Tất cả các nút có thể được truy cập thông qua cây. Nội dung của chúng có thể được sửa đổi hoặc xóa và có thể tạo các phần tử mới
Cây nút bên dưới hiển thị tập hợp các nút và các kết nối giữa chúng. Cây bắt đầu từ nút gốc và phân nhánh ra các nút văn bản ở mức thấp nhất của cây
Nút cha mẹ, con cái và anh chị em
Các nút trong cây nút có mối quan hệ thứ bậc với nhau
Các thuật ngữ cha mẹ, con cái và anh chị em được sử dụng để mô tả các mối quan hệ. Các nút cha có con. Trẻ ngang hàng gọi là anh em ruột [anh chị em]
Nếu bạn đã từng làm việc với DOM trong JavaScript, bạn có thể nhận thấy rằng có nhiều cách để truy cập cùng một phần tử [nextSibling
, nextElementSibling
]. Điều này thực sự khó hiểu vì không rõ ràng bạn nên sử dụng cái nào hoặc thậm chí sự khác biệt giữa chúng là gì. Trong bài viết này, tôi sẽ xem xét những khác biệt chính xác này bằng cách giải thích sự khác biệt giữa các nút và phần tử
Nếu bạn muốn học trực quan, hãy xem phiên bản video của bài viết này
Các phần tử so với các nút
Trong hai phần tử này, phần tử dễ hiểu nhất vì chúng chỉ là phần tử HTML, chẳng hạn như thẻ div, span hoặc body. Nói chung khi bạn đang làm việc với DOM, bạn sẽ làm việc với các phần tử vì thông thường bạn muốn tương tác với các phần tử HTML
Các nút là phiên bản chung hơn của một phần tử. Một nút có thể là một phần tử HTML, nhưng nó cũng có thể là bất kỳ thứ gì khác trong tài liệu HTML, chẳng hạn như văn bản hoặc nhận xét. Điều này làm cho các nút khó làm việc hơn vì thông thường khi làm việc với DOM, bạn không quan tâm đến những thứ như nút văn bản hoặc nút nhận xét và chỉ quan tâm đến các nút phần tử. Tôi thường tránh làm việc với các nút vì lý do này. Dưới đây là danh sách tất cả các loại Node quan trọng
- nút phần tử
- nút văn bản
- Nút phần CData
- Nút hướng dẫn xử lý
- nút nhận xét
- nút tài liệu
- Loại tài liệu Nút
- Nút đoạn tài liệu
Khi bạn đang điều hướng DOM, hãy luôn ưu tiên phương pháp chọn các phần tử thay vì các nút. Thông thường các phương thức này có phần tử từ trong đó hoặc phiên bản chọn nút sẽ có từ nút trong đó để bạn có thể phân biệt chúng
HTMLCollection so với NodeList
Khi duyệt qua DOM đôi khi bạn sẽ nhận được một tập hợp các phần tử/nút trả về [querySelector
, children
]. Đây sẽ là một HTMLCollection hoặc một NodeList
Một HTMLCollection khá đơn giản để hiểu vì nó chỉ có thể chứa các phần tử. Các phương thức như
var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
0 và children
trả về một HTMLCollection. Các bộ sưu tập này rất giống với các mảng, do đó bạn có thể thậm chí không nhận ra mình đang làm việc với một HTMLCollection, nhưng có một điều mà HTMLCollection thiếu mà các mảng có là tất cả các hàm bậc cao hơn. Những thứ như var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
2, var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
3 và var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
4 không có sẵn trên HTMLCollection. Ngoài ra, HTMLCollections đang cập nhật trực tiếp. Điều này có nghĩa là nếu bạn có một HTMLCollection gồm tất cả các phần tử với lớp var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
5 và bạn thêm một phần tử mới vào DOM với lớp đó thì nó sẽ tự động được thêm vào HTMLCollection. Thành thật mà nói, điều này hơi khó giải quyết vì nó có thể gây ra các lỗi không mong muốnMặt khác, một NodeList có thể chứa bất kỳ loại nút nào bao gồm các phần tử. NodeLists cũng tương tự như mảng, nhưng chúng lại thiếu hầu hết các hàm bậc cao hơn. Hàm bậc cao duy nhất trên NodeList là hàm
var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
2. Một số ví dụ về các phương thức trả về NodeLists là nextElementSibling
1 và nextElementSibling
2. NodeLists cũng đang cập nhật trực tiếp tương tự như HTMLCollections, nhưng chỉ trong một số trường hợp. Ví dụ: nextElementSibling
1 không phải là danh sách cập nhật trực tiếp, nhưng nextElementSibling
2 đang cập nhật trực tiếp. Nói chung, tôi cố gắng tránh các NodeList vì chúng có thể chứa các phần tử không phải HTML, nhưng nextElementSibling
1 sẽ chỉ trả về các phần tử bên trong NodeList nên tôi thường xuyên sử dụng nextElementSibling
1Sự kết luận
Tôi chỉ có thể đề cập đến một số phương thức truyền tải DOM trong bài viết này, nhưng nếu bạn muốn xem mọi phương thức truyền tải DOM trong JavaScript hoạt động như thế nào, hãy xem bảng gian lận truyền tải JS DOM MIỄN PHÍ của tôi
Các nút và phần tử rất giống nhau, nhưng có một số khác biệt nhỏ mà bạn phải hiểu. Nói chung, tôi thích làm việc với các phần tử bên trong NodeList bất cứ khi nào có thể vì theo tôi, chúng là cách dễ làm việc nhất
Trong bài viết trước - Giới thiệu về DOM, chúng ta đã thấy cách trình duyệt xây dựng một cây DOM để xử lý thêm trang web. Trong bài viết này, chúng ta sẽ thảo luận về một số loại nút phổ biến có trong hầu hết các tài liệu HTML và cũng xem xét các thuộc tính liên quan của chúng
Nút DOM
Cây được xây dựng từ các nút. Có 12 loại nút có sẵn để xây dựng Cây DOM. Các nút DOM được triển khai như một đối tượng với các thuộc tính và phương thức của chúng. Bốn loại nút được sử dụng thường xuyên có mặt trong hầu hết các tài liệu HTML là
- nút tài liệu
- nút phần tử
- nút văn bản
- nút bình luận
- nút tài liệu
nút tài liệu
Nút tài liệu là gốc của Cây DOM. Nó đại diện cho toàn bộ tài liệu được tải trong cửa sổ trình duyệt. Nó là điểm vào tài liệu. Chúng ta có thể truy cập tất cả các nút trong cây DOM từ nút tài liệu
Các nút cấp cao nhất trong tài liệu [html, head, body] có thể được truy cập trực tiếp bằng các thuộc tính của nút tài liệu
- document.documentElement -
- document.head -
- document.body -
Thí dụ
html
DOM | Hackinbits
Output:
document.documentElement :
document.head :
document.body :
jav
var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;
//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById['op1'];
var headOp = document.getElementById['op2'];
var bodyOp = document.getElementById['op3'];
//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;
Chúng tôi đã sử dụng nút. thuộc tính tagName trong ví dụ trên đã trả về tên của nút đã chọn
nút phần tử
Các thẻ HTML trở thành các nút phần tử trong cây DOM. Chúng ta có thể lấy loại nút bằng cách sử dụng Nút. thuộc tính nodeType. Nút. nodeType trả về một giá trị số tương ứng với loại nút. Bảng bên dưới hiển thị giá trị số và loại nút mà chúng đại diện
Thí dụ
html
DOM | Hackinbits
Welcome to hackinbits.com
Output:
jav
var heading_node = document.getElementById['heading'];
//showing output
var out_p = document.getElementById["output"];
out_p.innerHTML = heading_node.nodeType;
Như được hiển thị trong ví dụ trên, Nút. nodeType trả về "1" cho phần tử h1 cho thấy h1 thuộc loại phần tử node
nút văn bản
Nút văn bản luôn là một lá của cây DOM. Một phần tử HTML bao gồm một nút phần tử và một nút văn bản nói chung
html
DOM | Hackinbits
Welcome to hackinbits.com
Output:
jav
var heading_node = document.getElementById['heading'];
//showing output
var out_p = document.getElementById["output"];
out_p.innerHTML = heading_node.childNodes[0].nodeValue +
": " + heading_node.childNodes[0].nodeName;
Trong ví dụ trên, chúng tôi đã sử dụng các thuộc tính mới sau
Bất động sảnMô tảNút. nodeNameTrả về tên của nút hiện tại dưới dạng chuỗi. Đối với một nút văn bản, nó sẽ trả về "#text". Nút. nodeValueTrả về hoặc đặt giá trị của nút hiện tại. Đối với nút văn bản và nút nhận xét, nó sẽ trả về nội dung. Đối với nút tài liệu và phần tử, nó sẽ trả về null. Nút. childNodesTrả về một NodeList trực tiếp gồm các nút con của phần tử đã cho. Phần tử con cụ thể có thể được chọn bằng cách chỉ định chỉ mục bắt đầu từ '0' cho phần tử đầu tiên. Nodelist là một tập hợp các nút và "sống" ở đây có nghĩa là NodeList sẽ phản ánh bất kỳ thay đổi nào trong DOM ngay lập tứcnút nhận xét
Nhận xét HTML được biểu thị bằng các nút nhận xét trong cây DOM. Nút nhận xét cũng có thể được truy cập bằng javascript