nodeName trong JavaScript và cách lấy tên Node | Laptrinhcanban.com

nodeName trong JavaScript và cách lấy tên Node

Hướng dẫn cách sử dụng nodeName trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính nodeName để lấy tên Node của một Node chỉ định sau bài học này.

Các loại tên Node (nodeName) trong JavaScript

Trong JavaScript, tương ứng với 12 loại nodeType mà chúng ta đã học trong bài nodeType trong JavaScript sẽ có 12 loại tên Node (nodeName) như bảng sau đây:

Node TypeNode NameÝ nghĩa
1 ELEMENT_NODEGiá trị của Element.tagNameNode phần tử
2 ATTRIBUTE_NODEGiá trị của Attr.nameNode thuộc tính
3 TEXT_NODE"#text"Node văn bản
4 CDATA_SECTION_NODE"#cdata-section"Node SECTION của CDATA
5 ENTITY_REFERENCE_NODETên của Node tham chiếu thực thểNode tham chiếu thực thể
6 ENTITY_NODETên của Node khai báo thực thểNode khai báo thực thể
7 PROCESSING_INSTRUCTION_NODEGiá trị của ProcessingInstruction.targetNode hướng dẫn xử lý
8 COMMENT_NODE"#comment"Node comment
9 DOCUMENT_NODE"#document"Node tài liệu
10 DOCUMENT_TYPE_NODEGiá trị của DocumentType.nameNode loại tài liệu
11 DOCUMENT_FRAGMENT_NODE"#document-fragment"Node đoạn tài liệu
12 NOTATION_NODETên của Node ký hiệuNode ký hiệu

Sau khi lấy một Node thông qua các phương thức như getElementById hoặc querySelector mà chúng ta đã học trong các bài trước, chúng ta có thể tìm ra tên Node của Node này thông qua thuộc tính nodeName mà Kiyoshi sẽ hướng dẫn dưới đây.

nodeName trong JavaScript là gì

nodeName trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy tên Node của một Node chỉ định.

Cú pháp sử dụng thuộc tính nodeName trong JavaScript như sau:

node.nodeName

Thuộc tính nodeName có tác dụng tham chiếu đến Node chỉ định và trả về kết quả là một DOMString đại diện của Node đó, có giá trị tương ứng trong bảng nodeName mà Kiyoshi hướng dẫn ở phần trên.

Mã mẫu

Hãy cùng tìm hiểu cách lấy tên Node của Node chỉ định bằng thuộc tính nodeName trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng nodeName </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
<!-- Địa điểm -->
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy tên Node bằng nodeName </button>

<script>
function getElements(){
let element = document.getElementById('box');
let children = element.childNodes;

let len = children.length;
for (let i = 0; i < len; i++){
console.log(children.item(i).nodeName);
}
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì các Node con của Node có id="box" sẽ được lấy thông qua thuộc tính childNodes. Sau đó bằng vòng lặp, chúng ta kiểm tra và lấy tên Node của từng Node con này bằng thuộc tính nodeName rồi xuất ra màn hình console như sau:

nodeName trong JavaScript.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng nodeName trong JavaScript để lấy tên Node của một Node chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.