nodeType trong JavaScript và cách lấy kiểu Node | Laptrinhcanban.com

HOME › >>

nodeType trong JavaScript và cách lấy kiểu Node

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

Các kiểu Node trong JavaScript

Trong JavaScript có 12 kiểu Node được đại diện bởi 12 con số tương ứng như bảng sau đây:

Số đại diệnNoteTyteÝ nghĩa
1ELEMENT_NODENode phần tử
2ATTRIBUTE_NODENode thuộc tính
3TEXT_NODENode văn bản
4CDATA_SECTION_NODENode SECTION của CDATA
5ENTITY_REFERENCE_NODENode tham chiếu thực thể
6ENTITY_NODENode khai báo thực thể
7PROCESSING_INSTRUCTION_NODENode hướng dẫn xử lý
8COMMENT_NODENode comment
9DOCUMENT_NODENode tài liệu
10DOCUMENT_TYPE_NODENode loại tài liệu
11DOCUMENT_FRAGMENT_NODENode đoạn tài liệu
12NOTATION_NODENode 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 kiểu Node của Node này thông qua thuộc tính NodeType mà Kiyoshi sẽ hướng dẫn dưới đây.

nodeType trong JavaScript là gì

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

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

node.nodeType

Thuộc tính nodeType có tác dụng tham chiếu đến Node chỉ định và trả về kết quả là một số thuộc kiểu unsigned short đại diện cho kiểu Node của Node đó, có giá trị từ 1 đến 12 tương ứng trong bảng NodeType mà Kiyoshi hướng dẫn ở phần trên. Lưu ý kết quả ở đây không phải là tên kiểu Node dưới dạng chữ, mà là số đại diện cho kiểu Node đó mà thôi.

Để lấy được tên Node tương ứng, chúng ta cần tạo một mảng chứa 12 tên kiểu Node như trên và dùng số nguyên đại diện trên để truy vấn như ví dụ sau đây.

Mã mẫu

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

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng nodeType </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 kiểu Node bằng nodeType </button>

<script>
function getElements(){
const ntype = ['ELEMENT',
'ATTRIBUTE',
'TEXT',
'CDATA_SECTION',
'ENTITY_REFERENCE',
'ENTITY',
'PROCESSING_INSTRUCTION',
'COMMENT',
'DOCUMENT',
'DOCUMENT_TYPE',
'DOCUMENT_FRAGMENT',
'NOTATION'];

let element = document.getElementById('box');
let children = element.childNodes;

let len = children.length;

for (let i = 0; i < len; i++){
console.log(ntype[children.item(i).nodeType - 1]);
}
}
</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 kiểu Node của từng Node con này bằng thuộc tính nodeType, và dùng số đại diện thu về để truy xuất vào trong mảng chứa các tên kiểu Node. Và kết quả, từng tên kiểu Node sẽ được xuất ra như sau:

nodeType trong JavaScript.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng nodeType trong JavaScript để lấy kiểu 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.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/nodetype-trong-javascript/

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.