Hướng dẫn dùng dom nodes trong PHP

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.

Nội dung chính Show

Các kiểu Node trong JavaScript
nodeType trong JavaScript là gì
Tổng kết

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ện	NoteTyte	Ý nghĩa
1	ELEMENT_NODE	Node phần tử
2	ATTRIBUTE_NODE	Node thuộc tính
3	TEXT_NODE	Node văn bản
4	CDATA_SECTION_NODE	Node SECTION của CDATA
5	ENTITY_REFERENCE_NODE	Node tham chiếu thực thể
6	ENTITY_NODE	Node khai báo thực thể
7	PROCESSING_INSTRUCTION_NODE	Node hướng dẫn xử lý
8	COMMENT_NODE	Node comment
9	DOCUMENT_NODE	Node tài liệu
10	DOCUMENT_TYPE_NODE	Node loại tài liệu
11	DOCUMENT_FRAGMENT_NODE	Node đoạn tài liệu
12	NOTATION_NODE	Node 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.

Xem thêm: getElementById trong JavaScript
Xem thêm: querySelector trong JavaScript

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:

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ắmp>
<div id="box">
   
  <p>Ninh Bìnhp>
  <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:

Xem thêm: childNodes trong JavaScript và cách lấy các Node con

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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

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>> học javascript - lập trình javascript cơ bản>>13. dom trong javascript

Hướng dẫn dùng dom nodes trong PHP

Các kiểu Node trong JavaScript

nodeType trong JavaScript là gì

Mã mẫu

Tổng kết

Bài viết liên quan

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội