Web APIs: Đối tượng Node

Đối tượng Node đại diện cho một nút duy nhất trong cây tài liệu. Một Node có thể là nút phần tử, nút thuộc tính, nút văn bản hoặc bất kỳ loại nút nào khác.

Lưu ý rằng trong khi tất cả các đối tượng thừa kế các thuộc tính / phương thức của nút để giao dịch với nút cha và nút con, không phải tất cả các đối tượng đều có thể có cha mẹ hoặc con cái. Ví dụ: Các nút văn bản có thể không có nút con và việc thêm nút con vào các nút này sẽ dẫn đến lỗi DOM.

Các thuộc tính

• Node.childNodes Read only

  Trả về một NodeList thực chứa tất cả các nút con của nút này. NodeList thực này sẽ bị thay đổi nếu bất kỳ Node con của nó bị thay đổi, đối tượng NodeList thực sẽ tự động được cập nhật.

• Node.firstChild Read only

  Trả về một Node là nút con trực tiếp đầu tiên, hoặc null nếu nút không có nút con.

• Node.nextSibling Read only

  Trả về một Node là nút tiếp theo trong dãy, hoặc null nếu không có nút tiếp theo.

• Node.nodeName Read only

  Trả về a DOMString chứa tên của Node. Cấu trúc của tên nút sẽ khác với loại nút. Ví dụ một HTMLElement sẽ chứa tên của thẻ tương ứng, như "audio" cho một HTMLAudioElement, một nút Text sẽ có giá trị dạng chuỗi là "#text", hoặc một nút Document sẽ có giá trị dạng chuỗi là "#document".

• Node.nodeType Read only

  Trả về một giá trị kiểu unsigned short đại diện cho loại nút. Các giá trị khả thi là:

  Tên hằng số	Giá trị
  ELEMENT_NODE	1
  TEXT_NODE	3
  PROCESSING_INSTRUCTION_NODE	7
  COMMENT_NODE	8
  DOCUMENT_NODE	9
  DOCUMENT_TYPE_NODE	10
  DOCUMENT_FRAGMENT_NODE	11
  Các giá trị không liệt kê, một số đã không còn hiệu lực, và một số sẽ bị loại bỏ trong các phiên bản HTML và Javascript mới hơn trong tương lai.

• Node.nodeValue

  Trả về / Gán giá trị cho node hiện hành

• Node.parentNode Read only

  Trả về giá trị dạng Node là cha của node này. Nếu không tìm được, hoặc nếu nút này là đỉnh của cây, hoặc nếu nút này không tham gia vào một cây, thì thuộc tính này trả về null.

• Node.parentElement Read only
  Trả về giá trị dạng Element là cha của node này. Nếu nút không có nút cha, hoặc nếu nút cha của nó không phải là một Element, thì thuộc tính này trả về null.

• Node.textContent

  Trả về / Gán nội dung văn bản của một phần tử và tất cả các phần tử của nó.

Các phương thức

• Node.appendChild()

  Thêm một đối số childNode cụ thể vào sau cùng của nút hiện tại.
  Nếu đối số tham chiếu một nút hiện có trên cây DOM, 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.

• Node.cloneNode()

  Tạo bản sao của một Node, và tùy chọn, tất cả nội dung của nó. Theo mặc định, phương thức này nhân bản nội dung của nút.

• Node.contains()

  Trả về một giá trị Boolean cho biết liệu nút hiện tại có chứa một nút nào đó hay không.

• Node.getRootNode()

  Trả về gốc của đối tượng ngữ cảnh có tùy chọn bao gồm shadow root nếu nó có sẵn

• Node.hasChildNodes()

  Trả về a Boolean chỉ ra nếu phần tử có bất kỳ nút con nào hay không.

• Node.insertBefore()

  Chèn một nút Node vào tập họp nút con của nó và đứng trước một nút con mà bạn chỉ định.

• Node.isEqualNode()

  Trả về giá trị Boolean cho biết hai nút có bằng nhau hay không, nghĩa là cùng loại và tất cả các điểm dữ liệu xác định của chúng giống nhau.

• Node.isSameNode()

  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).

• Node.lookupPrefix()

  Trả về DOMString có chứa tiền tố cho một namespace URI đã cho, nếu có, và null nếu không. Khi có nhiều tiền tố, kết quả sẽ phụ thuộc vào việc triển khai thực hiện.

• Node.removeChild()

  Loại bỏ 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.

• Node.replaceChild()

  Thay thế một Node con của nút cha hiện tại thành một nút thứ hai được đưa ra trong tham số.

• Node.querySelector(String selector)

  Trả về phần tử đầu tiên là phần tử con của phần tử mà nó được gọi ra khớp với nhóm bộ chọn được chỉ định.

Ví dụ

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

Element.prototype.removeAll = function () {
  while (this.firstChild) { this.removeChild(this.firstChild); }
  return this;
};

Sử dụng mẫu

/* ... một thay thế cho document.body.innerHTML = "" ... */
document.body.removeAll();

Tham khảo:

• Web APIs: Đối tượng Document