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

Trong quá trình học JavaScript ban đầu của mình, tôi đã bắt gặp hai đối tượng. 'nút' và 'phần tử' gây ra một số nhầm lẫn trong tâm trí tôi. Tôi nghĩ rằng cả hai đối tượng đều giống nhau, trong khi thực tế, hóa ra chúng không giống nhau về mặt kỹ thuật bởi vì có sự khác biệt rõ ràng giữa cả hai. Hãy sắp xếp sự khác biệt giữa các nút và phần tử

Nút là gì? . Nó có thể là một trong các thành phần DOM tích hợp như chính tài liệu, tài liệu. đầu hoặc tài liệu. thân thể. Một nút có thể là một thẻ HTML được chỉ định trong HTML, chẳng hạn như…

Giao diện DOM

removeAllChildren[document.body];
3 là một lớp cơ sở trừu tượng dựa trên nhiều đối tượng API DOM khác, do đó cho phép các loại đối tượng đó được sử dụng tương tự và thường thay thế cho nhau. Là một lớp trừu tượng, không có thứ gọi là đối tượng
removeAllChildren[document.body];
3 đơn giản. Tất cả các đối tượng triển khai chức năng
removeAllChildren[document.body];
3 đều dựa trên một trong các lớp con của nó. Đáng chú ý nhất là
removeAllChildren[document.body];
6,
removeAllChildren[document.body];
7 và
removeAllChildren[document.body];
8

Ngoài ra, mọi loại nút DOM được đại diện bởi một giao diện dựa trên

removeAllChildren[document.body];
3. Chúng bao gồm
removeAllChildren[document.body];
1,
removeAllChildren[document.body];
2 [tất cả đều dựa trên
removeAllChildren[document.body];
3,
removeAllChildren[document.body];
4,
removeAllChildren[document.body];
5 và
removeAllChildren[document.body];
6] và
removeAllChildren[document.body];
7

Trong một số trường hợp, một tính năng cụ thể của giao diện

removeAllChildren[document.body];
3 cơ sở có thể không áp dụng cho một trong các giao diện con của nó; . Ví dụ: cố gắng thêm con vào loại nút không thể có con sẽ đưa ra một ngoại lệ

Sự kiệnTargetNode

Thuộc tính cá thể

Ngoài các thuộc tính bên dưới,

removeAllChildren[document.body];
3 thừa hưởng các thuộc tính từ cha mẹ của nó,
function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
1

function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
2 Chỉ đọc

Trả về một chuỗi đại diện cho URL cơ sở của tài liệu chứa

removeAllChildren[document.body];
3

function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
4 Chỉ đọc

Trả về một

function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
5 trực tiếp chứa tất cả các phần tử con của nút này [bao gồm các phần tử, văn bản và nhận xét].
function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
5 đang hoạt động có nghĩa là nếu con của
removeAllChildren[document.body];
3 thay đổi, đối tượng
function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
5 sẽ tự động được cập nhật

function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
9 Chỉ đọc

Trả về một

removeAllChildren[document.body];
3 đại diện cho nút con trực tiếp đầu tiên của nút hoặc
removeAllChildren[document.body];
9 nếu nút không có nút con

removeAllChildren[document.body];
62 Chỉ đọc

Một giá trị logic cho biết Nút có được kết nối [trực tiếp hoặc gián tiếp] với đối tượng ngữ cảnh hay không, e. g. đối tượng

removeAllChildren[document.body];
6 trong trường hợp DOM bình thường hoặc đối tượng
removeAllChildren[document.body];
64 trong trường hợp DOM bóng

removeAllChildren[document.body];
65 Chỉ đọc

Trả về một

removeAllChildren[document.body];
3 đại diện cho nút con trực tiếp cuối cùng của nút hoặc
removeAllChildren[document.body];
9 nếu nút không có nút con nào

removeAllChildren[document.body];
68 Chỉ đọc

Trả về một

removeAllChildren[document.body];
3 đại diện cho nút tiếp theo trong cây hoặc
removeAllChildren[document.body];
9 nếu không có nút đó

removeAllChildren[document.body];
31 Chỉ đọc

Trả về một chuỗi chứa tên của

removeAllChildren[document.body];
3. Cấu trúc của tên sẽ khác với loại nút. e. g. Một
removeAllChildren[document.body];
33 sẽ chứa tên của thẻ tương ứng, chẳng hạn như
removeAllChildren[document.body];
34 cho một
removeAllChildren[document.body];
35, một nút
removeAllChildren[document.body];
3 sẽ có chuỗi
removeAllChildren[document.body];
37 hoặc một nút
removeAllChildren[document.body];
6 sẽ có chuỗi
removeAllChildren[document.body];
39

______530 Chỉ đọc

Trả về một

removeAllChildren[document.body];
31 đại diện cho loại nút. giá trị có thể là

NameValue
removeAllChildren[document.body];
32
removeAllChildren[document.body];
33
removeAllChildren[document.body];
34
removeAllChildren[document.body];
35
removeAllChildren[document.body];
36
removeAllChildren[document.body];
37
removeAllChildren[document.body];
38
removeAllChildren[document.body];
39
removeAllChildren[document.body];
30
removeAllChildren[document.body];
31
removeAllChildren[document.body];
32
removeAllChildren[document.body];
33
removeAllChildren[document.body];
34
removeAllChildren[document.body];
35
removeAllChildren[document.body];
36
removeAllChildren[document.body];
37
removeAllChildren[document.body];
38
removeAllChildren[document.body];
39
removeAllChildren[document.body];
60

Trả về / Đặt giá trị của nút hiện tại

removeAllChildren[document.body];
61 Chỉ đọc

Trả về

removeAllChildren[document.body];
6 mà nút này thuộc về. Nếu bản thân nút là một tài liệu, trả về
removeAllChildren[document.body];
9

______564 Chỉ đọc

Trả về một

removeAllChildren[document.body];
3 là cha của nút này. Nếu không có nút nào như vậy, chẳng hạn như nếu nút này là đỉnh của cây hoặc nếu không tham gia vào cây, thì thuộc tính này trả về
removeAllChildren[document.body];
9

______567 Chỉ đọc

Trả về một

removeAllChildren[document.body];
7 là cha của nút này. Nếu nút không có cha hoặc nếu cha đó không phải là một
removeAllChildren[document.body];
7, thì thuộc tính này trả về
removeAllChildren[document.body];
9

______571 Chỉ đọc

Trả về một

removeAllChildren[document.body];
3 đại diện cho nút trước đó trong cây hoặc
removeAllChildren[document.body];
9 nếu không có nút đó

removeAllChildren[document.body];
74

Trả về / Đặt nội dung văn bản của một phần tử và tất cả phần tử con của nó

Phương thức sơ thẩm

Ngoài các phương thức bên dưới,

removeAllChildren[document.body];
3 kế thừa các phương thức từ cha của nó,
function eachNode[rootNode, callback] {
  if [!callback] {
    const nodes = [];
    eachNode[rootNode, [node] => {
      nodes.push[node];
    }];
    return nodes;
  }

  if [callback[rootNode] === false] {
    return false;
  }

  if [rootNode.hasChildNodes[]] {
    for [const node of rootNode.childNodes] {
      if [eachNode[node, callback] === false] {
        return;
      }
    }
  }
}
1

removeAllChildren[document.body];
77

Thêm đối số

removeAllChildren[document.body];
78 được chỉ định làm nút con cuối cùng vào nút hiện tại. Nếu đối số tham chiếu đến một nút hiện có trên cây DOM, thì nút đó sẽ được tách ra khỏi vị trí hiện tại của nó và được gắn vào vị trí mới

removeAllChildren[document.body];
79

Sao chép một

removeAllChildren[document.body];
3, và tùy chọn, tất cả nội dung của nó. Theo mặc định, nó sao chép nội dung của nút

removeAllChildren[document.body];
81

So sánh vị trí của nút hiện tại với nút khác trong bất kỳ tài liệu nào khác

removeAllChildren[document.body];
82

Trả về giá trị

removeAllChildren[document.body];
83 hoặc
removeAllChildren[document.body];
84 cho biết một nút có phải là con cháu của nút đang gọi hay không

removeAllChildren[document.body];
85

Trả về gốc của đối tượng bối cảnh, tùy chọn bao gồm gốc bóng tối nếu có

removeAllChildren[document.body];
86

Trả về giá trị boolean cho biết phần tử có bất kỳ nút con nào hay không

removeAllChildren[document.body];
87

Chèn một

removeAllChildren[document.body];
3 trước nút tham chiếu với tư cách là nút con của nút cha được chỉ định

removeAllChildren[document.body];
89

Chấp nhận URI không gian tên làm đối số và trả về giá trị boolean có giá trị là

removeAllChildren[document.body];
83 nếu không gian tên là không gian tên mặc định trên nút đã cho hoặc
removeAllChildren[document.body];
84 nếu không

removeAllChildren[document.body];
02

Trả về một giá trị boolean cho biết hai nút có cùng loại hay không và tất cả các điểm dữ liệu xác định của chúng khớp với nhau

removeAllChildren[document.body];
03

Trả về một giá trị boolean cho biết hai nút có giống nhau hay không [nghĩa là chúng tham chiếu cùng một đối tượng]

removeAllChildren[document.body];
04

Trả về một chuỗi chứa tiền tố cho một URI không gian tên đã cho, nếu có và

removeAllChildren[document.body];
9 nếu không. Khi có thể có nhiều tiền tố, kết quả phụ thuộc vào việc triển khai

removeAllChildren[document.body];
06

Chấp nhận một tiền tố và trả về URI không gian tên được liên kết với nó trên nút đã cho nếu tìm thấy [và

removeAllChildren[document.body];
9 nếu không]. Cung cấp
removeAllChildren[document.body];
9 cho tiền tố sẽ trả về không gian tên mặc định

removeAllChildren[document.body];
09

Dọn sạch tất cả các nút văn bản bên dưới thành phần này [hợp nhất liền kề, xóa trống]

removeAllChildren[document.body];
10

Xóa một nút con khỏi phần tử hiện tại, phải là nút con của nút hiện tại

removeAllChildren[document.body];
11

Thay thế một con

removeAllChildren[document.body];
3 của con hiện tại bằng con thứ hai đã cho trong tham số

ví dụ

Xóa tất cả con được lồng trong một nút

Hàm này loại bỏ từng phần tử con đầu tiên của một phần tử, cho đến khi không còn phần tử nào

removeAllChildren[document.body];
8

Sử dụng chức năng này là một cuộc gọi duy nhất. Ở đây chúng tôi làm trống phần thân của tài liệu

removeAllChildren[document.body];

Một cách khác có thể là đặt textContent thành chuỗi trống.

removeAllChildren[document.body];
13

Đệ quy qua các nút con

Hàm sau gọi đệ quy hàm gọi lại cho mỗi nút được chứa bởi nút gốc [bao gồm cả nút gốc]

________số 8

Hàm gọi đệ quy một hàm cho từng nút con của

removeAllChildren[document.body];
14 [bao gồm cả nút gốc]

Nếu bỏ qua

removeAllChildren[document.body];
15, thay vào đó, hàm trả về một
removeAllChildren[document.body];
16, chứa
removeAllChildren[document.body];
14 và tất cả các nút có trong đó

Nếu

removeAllChildren[document.body];
15 được cung cấp và nó trả về
removeAllChildren[document.body];
84 khi được gọi, mức đệ quy hiện tại bị hủy bỏ và hàm tiếp tục thực thi ở cấp độ cha cuối cùng. Điều này có thể được sử dụng để hủy bỏ các vòng lặp sau khi tìm thấy một nút [chẳng hạn như tìm kiếm một nút văn bản chứa một chuỗi nhất định]

Hàm có hai tham số

removeAllChildren[document.body];
14

Đối tượng

removeAllChildren[document.body];
3 có con cháu sẽ được đệ quy thông qua

removeAllChildren[document.body];
15 Tùy chọn

Một hàm gọi lại tùy chọn nhận một đối số duy nhất là

removeAllChildren[document.body];
3. Nếu bị bỏ qua,
removeAllChildren[document.body];
24 trả về một
removeAllChildren[document.body];
16 của mọi nút có trong
removeAllChildren[document.body];
14 [bao gồm cả nút gốc]

Phần sau minh họa việc sử dụng hàm

removeAllChildren[document.body];
27 trong thế giới thực. tìm kiếm văn bản trên một trang web

Phần tử HTML có phải là nút không?

Theo tiêu chuẩn DOM HTML của W3C, mọi thứ trong tài liệu HTML đều là nút. Toàn bộ tài liệu là một nút tài liệu. Mỗi phần tử HTML là một nút phần tử . Văn bản bên trong các phần tử HTML là các nút văn bản.

Nút trong HTML là gì?

Trong ngữ cảnh của DOM, một nút là một điểm duy nhất trong cây nút . Nhiều thứ khác nhau là các nút là chính tài liệu, thành phần, văn bản và nhận xét.

A Div là một phần tử hay nút?

Phần tử so với nút . elements are the easiest to understand since they are just HTML elements, such as a div, span, or body tag.

Sự khác biệt giữa nút và phần tử là gì?

Vì vậy, tóm lại, nút là bất kỳ đối tượng DOM nào. Một phần tử là một loại nút cụ thể vì có nhiều loại nút khác [nút văn bản, nút nhận xét, nút tài liệu, v.v. ]. DOM bao gồm một hệ thống phân cấp các nút trong đó mỗi nút có thể có nút cha, danh sách các nút con và nextSibling và previousSibling.

Chủ Đề