Các nút trong html là gì

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ốn

Mặ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à nextElementSibling1 và nextElementSibling2. 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ụ: nextElementSibling1 không phải là danh sách cập nhật trực tiếp, nhưng nextElementSibling2 đ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 nextElementSibling1 sẽ chỉ trả về các phần tử bên trong NodeList nên tôi thường xuyên sử dụng nextElementSibling1

Sự 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

<html>

  <head>
    <title>DOM | Hackinbitstitle>
  head>

  <body>
    <h1>
      Output:
    h1>
    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="op1">
        document.documentElement :
      p>
      <p id="op2">
        document.head :
      p>
      <p id="op3">
        document.body :
      p>
    div>
  body>

html>

---

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

ValueConstants1Node. ELEMENT_NODE9Nút. DOCUMENT_NODE3Nút. TEXT_NODE8Nút. COMMENT_NODE

Thí dụ

html

<html>

  <head>
    <title>DOM | Hackinbitstitle>
  head>

  <body>
    <h1 id="heading">
      Welcome to hackinbits.com
    h1>
    <hr>
    <h2>
      Output:
    h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      p>
    div>
  body>

html>

---

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

<html>

  <head>
    <title>DOM | Hackinbitstitle>
  head>

  <body>
    <h1 id="heading">
      Welcome to hackinbits.com
    h1>
    <hr>
    <h2>
      Output:
    h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      p>
    div>
  body>

html>

---

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ức

nú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

Loại nút trong HTML là gì?

Các nút trong web là gì?

Thẻ HTML có phải là nút không?

Giá trị nút trong HTML là gì?