Điều hướng HTML DOM trong JavaScript
Với HTML DOM, bạn có thể điều hướng cây node thông qua các mối quan hệ node. Các DOM Node Theo chuẩn HTML DOM của W3C, mọi thứ trong một tài liệu HTML là một node: Toàn bộ tài liệu là một node tài liệu Mỗi phần tử HTML là một node phần tử Văn bản bên ...
Với HTML DOM, bạn có thể điều hướng cây node thông qua các mối quan hệ node.
Các DOM Node
Theo chuẩn HTML DOM của W3C, mọi thứ trong một tài liệu HTML là một node:
- Toàn bộ tài liệu là một node tài liệu
- Mỗi phần tử HTML là một node phần tử
- Văn bản bên trong phần tử HTML là các node văn bản
- Mỗi thuộc tính HTML là một node thuộc tính (không dùng nữa)
- Tất cả nhận xét là các node nhận xét
Với HTML DOM, tất cả node trong cây node có thể được truy cập bằng JavaScript. Các node mới có thể được tạo ra, và tất cả các node có thể được sửa đổi hoặc xóa.
Các mối liên hệ node
Các node trong cây nút có quan hệ phân cấp với nhau. Các điều khoản parent, child, và sibling được sử dụng để mô tả các mối quan hệ.
- Trong một cây node, node trên cùng được gọi là node gốc (hoặc node gốc)
- Mỗi node có chính xác một parent, ngoại trừ root (không có parent)
- Một node có thể có một số child
- Sibling là các node có cùng parent
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Từ HTML ở trên bạn có thể hiểu:
- <html> là nút gốc
- <html> không có parent
- <html> là parent của <head> và <body>
- <head> là child đầu tiên của <html>
- <body> là child cuối cùng của <html>
Và:
- <head> có một child: <title>
- <title> có một child (node văn bản): “DOM Tutorial”
- <body> có hai child: <h1> và <p>
- <h1> có một child: “DOM Bài học một”
- <p> có một child: “Hello world!”
- <h1> và <p> là sibling của nhau
Điều hướng giữa các node
Bạn có thể sử dụng các thuộc tính sau để di chuyển giữa các node với JavaScript:
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
Child node và các giá trị node
Lỗi chung trong quá trình xử lý DOM là mong đợi một node phần tử chứa văn bản.
<title id="demo">DOM Tutorial</title>
Node phần tử <title> (trong ví dụ ở trên) không chứa văn bản. Nó chứa một nút văn bản với giá trị DOM Tutorial”. Giá trị của node văn bản có thể được truy cập bởi thuộc tính innerHTML của node:
var myTitle = document.getElementById("demo").innerHTML;
Truy cập thuộc tính innerHTML cũng giống như truy cập nodeValue của child đầu tiên:
var myTitle = document.getElementById("demo").firstChild.nodeValue;
Tiếp cận child đầu tiên cũng có thể được thực hiện như sau:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
Tất cả (3) ví dụ sau lấy ra văn bản của một phần tử <h1> và sao chép nó vào phần tử <p>:
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
Trong hướng dẫn này chúng ta sử dụng thuộc tính innerHTML để lấy nội dung của một phần tử HTML. Tuy nhiên, học các phương pháp khác ở trên sẽ hữu ích cho việc hiểu cấu trúc cây và điều hướng của DOM.
DOM Root node
Có hai đặc tính đặc biệt cho phép truy cập vào đầy đủ tài liệu:
- document.body – Phần thân của tài liệu
- document.documentElement – Tài liệu đầy đủ
<html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.body</b> property.</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html>
<html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.documentElement</b> property.</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html>
Thuộc tính nodeName
Thuộc tính nodeName xác định tên của một node.
- nodeName chỉ đọc
- nodeName của một node phần tử giống như tên của thẻ
- nodeName của một node thuộc tính là tên thuộc tính
- nodeName của một node văn bản luôn là #text
- nodeName của nút tài liệu luôn là #document
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
Lưu ý: nodeName luôn chứa tên thẻ chữ hoa của một phần tử HTML.
Thuộc tính nodeValue
Thuộc tính nodeValue xác định giá trị của một node.
- nodeValue cho các node phần tử không xác định
- nodeValue cho các node văn bản là văn bản chính nó
- nodeValue cho các node thuộc tính là giá trị thuộc tính
Thuộc tính nodeType
Thuộc tính nodeType chỉ được đọc. Nó trả về kiểu của một node.
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
Các thuộc tính nodeType quan trọng nhất là:
| Node | Kiểu | Ví dụ |
| ELEMENT_NODE | 1 | <h1 class=”heading”>W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = “heading” (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!– This is a comment –> |
| DOCUMENT_NODE | 9 | <html> |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Kiểu 2 không được dùng nữa trong DOM HTML (nhưng hoạt động). Nó vẫn có thể hoạt động trong DOM XML.
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
