Node

Thuộc tính thể hiện

Ngoài các thuộc tính bên dưới, Node còn kế thừa các thuộc tính từ lớp cha của nó, EventTarget.

Node.baseURI Read only

Trả về một chuỗi biểu thị URL cơ sở tuyệt đối của tài liệu chứa Node.

Node.childNodes Read only

Trả về một NodeList động chứa tất cả phần tử con của nút này (bao gồm phần tử, văn bản và chú thích). NodeList là động nghĩa là nếu các phần tử con của Node thay đổi, đối tượng NodeList sẽ được cập nhật tự động.

Node.firstChild Read only

Trả về một Node đại diện cho nút con trực tiếp đầu tiên của nút, hoặc null nếu nút không có phần tử con.

Node.isConnected Read only

Một giá trị boolean cho biết Node có được kết nối hay không (trực tiếp hoặc gián tiếp) với đối tượng ngữ cảnh, ví dụ như đối tượng Document trong DOM thông thường, hoặc ShadowRoot trong shadow DOM.

Node.lastChild Read only

Trả về một Node đại diện cho nút con trực tiếp cuối cùng của nút, hoặc null nếu nút không có phần tử con.

Node.nextSibling Read only

Trả về một Node đại diện cho nút kế tiếp trong cây, hoặc null nếu không có nút như vậy.

Node.nodeName Read only

Trả về một chuỗi chứa tên của Node. Cấu trúc của tên sẽ khác nhau tùy theo kiểu nút. Ví dụ, một HTMLElement sẽ chứa tên của thẻ tương ứng, như 'AUDIO' cho HTMLAudioElement, còn nút Text sẽ có chuỗi '#text', hoặc nút Document sẽ có chuỗi '#document'.

Node.nodeType Read only

Trả về một unsigned short biểu thị kiểu của nút. Các giá trị có thể là:

Tên	Giá trị
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11

Node.nodeValue

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

Node.ownerDocument Read only

Trả về Document 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ề null.

Node.parentNode Read only

Trả về một Node là nút cha của nút này. Nếu không có nút như vậy, chẳng hạn nếu nút này ở đầu cây hoặc không tham gia vào cây, thuộc tính này trả về null.

Node.parentElement Read only

Trả về một Element là phần tử 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à Element, thuộc tính này trả về null.

Node.previousSibling Read only

Trả về một Node đại diện cho nút trước đó trong cây, hoặc null nếu không có nút như vậy.

Node.textContent

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 thể hiện

Ngoài các phương thức bên dưới, Node còn kế thừa các phương thức từ lớp cha của nó, EventTarget.

Node.appendChild()

Thêm đối số childNode đã chỉ định vào cuối danh sách phần tử con của nút hiện tại. Nếu đối số tham chiếu đến một nút đã tồn tại trong cây DOM, nút đó sẽ được tách khỏi vị trí hiện tại và gắn vào vị trí mới.

Node.cloneNode()

Sao chép một Node, và tùy chọn sao chép toàn bộ nội dung của nó. Mặc định, nó sao chép nội dung của nút.

Node.compareDocumentPosition()

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

Node.contains()

Trả về giá trị true hoặc false cho biết một nút có phải là nút hậu duệ của nút gọi hay không.

Node.getRootNode()

Trả về gốc của đối tượng ngữ cảnh, có thể bao gồm shadow root nếu có.

Node.hasChildNodes()

Trả về giá trị boolean cho biết phần tử có phần tử con hay không.

Node.insertBefore()

Chèn một Node đứng trước nút tham chiếu như một phần tử con của một nút cha được chỉ định.

Node.isDefaultNamespace()

Nhận một URI namespace làm đối số và trả về giá trị boolean true nếu namespace đó là namespace mặc định trên nút đã cho, hoặc false nếu không phải.

Node.isEqualNode()

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

Node.isSameNode()

Trả về một giá trị boolean cho biết hai nút có phải là cùng một nút hay không (tức là chúng tham chiếu đến cùng một đối tượng).

Node.lookupPrefix()

Trả về một chuỗi chứa tiền tố của một URI namespace đã cho, nếu có, và null nếu không có. Khi có nhiều tiền tố khả dĩ, kết quả phụ thuộc vào cách triển khai.

Node.lookupNamespaceURI()

Nhận một tiền tố và trả về URI namespace được liên kết với nó trên nút đã cho nếu tìm thấy, và null nếu không. Nếu truyền null làm tiền tố, phương thức sẽ trả về namespace mặc định.

Node.normalize()

Dọn dẹp tất cả các nút văn bản bên dưới phần tử này (gộp các nút liền kề, xóa các nút rỗng).

Node.removeChild()

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

Node.replaceChild()

Thay thế một Node con của nút hiện tại bằng nút thứ hai được truyền vào.

Sự kiện

selectstart

Được kích hoạt khi người dùng bắt đầu một vùng chọn mới trong nút này.

Ví dụ

Xóa tất cả phần tử con lồng bên trong một nút

Hàm này xóa 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.

function removeAllChildren(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
}

Dùng hàm này chỉ cần một lần gọi. Ở đây chúng ta xóa toàn bộ nội dung của phần body trong tài liệu:

removeAllChildren(document.body);

Một cách khác là đặt textContent thành chuỗi rỗng: document.body.textContent = "".

Đệ quy qua các nút con

Hàm sau gọi đệ quy một hàm callback cho mỗi nút được chứa bởi một nút gốc (bao gồm cả nút gốc):

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;
      }
    }
  }
}

Hàm này gọi đệ quy một hàm cho mỗi nút hậu duệ của rootNode (bao gồm cả nút gốc).

Nếu bỏ qua callback, hàm sẽ trả về một Array thay thế, chứa rootNode và tất cả các nút bên trong nó.

Nếu cung cấp callback, và nó trả về false khi được gọi, mức đệ quy hiện tại sẽ bị dừng và hàm sẽ tiếp tục thực thi ở mức của nút cha cuối cùng. Điều này có thể dùng để dừng vòng lặp khi đã tìm thấy một nút nào đó, chẳng hạn khi tìm một nút văn bản chứa một chuỗi nhất định.

Hàm có hai tham số:

rootNode

Đối tượng Node có các nút hậu duệ sẽ được duyệt đệ quy.

callback Optional

Một hàm callback tùy chọn chỉ nhận một đối số Node. Nếu bỏ qua, eachNode trả về một Array gồm mọi nút được chứa trong rootNode (bao gồm cả nút gốc).

Ví dụ sau minh họa một cách sử dụng thực tế của hàm eachNode(): tìm kiếm văn bản trên một trang web.

Chúng ta dùng một hàm bao bọc tên là grep để thực hiện việc tìm kiếm:

function grep(parentNode, pattern) {
  let matches = [];
  let endScan = false;

  eachNode(parentNode, (node) => {
    if (endScan) {
      return false;
    }

    // Bỏ qua mọi thứ không phải nút văn bản
    if (node.nodeType !== Node.TEXT_NODE) {
      return;
    }

    if (typeof pattern === "string" && node.textContent.includes(pattern)) {
      matches.push(node);
    } else if (pattern.test(node.textContent)) {
      if (!pattern.global) {
        endScan = true;
        matches = node;
      } else {
        matches.push(node);
      }
    }
  });

  return matches;
}

Thông số kỹ thuật

Tương thích trình duyệt