跳到主要内容

Node

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如，继承同一组方法，或者用同样的方式测试。

以下接口都从 Node 继承其方法和属性：

::: tip 备注： Document Element Attr CharacterData Text Comment ProcessingInstruction DocumentFragment DocumentType :::

从其父类型 EventTarget 承属性。

EventTarget > Node

Node 属性​

baseURI 只读​

Node.baseURI 是只读属性，返回一个节点的绝对基址 URL。

document.baseURI; // 'https://developer.mozilla.org'

childNodes 只读​

Node.childNodes 返回包含指定节点的子节点的集合

document.childNodes; // NodeList(2) [<!DOCTYPE html>, html]

firstChild 只读​

Node.firstChild 只读属性返回树中节点的第一个子节点

document.childNodes; // <!DOCTYPE html>

isConnected 只读​

如果该节点与 DOM 树连接则返回 true, 否则返回 false。例如：Document 对象与一般 DOM 树连接，ShadowRoot 与 shadow DOM 连接。

document.childNodes; // true

lastChild 只读​

返回当前节点的最后一个子节点。

document.lastChild; // html

nextSibling 只读​

返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。

document.nextSibling; // null
document.head.nextSibling; // body

nodeName 只读​

返回当前节点的节点名称

document.nodeName; // '#document'

nodeType 只读​

只读属性 Node.nodeType 表示的是该节点的类型。

document.nodeType; // 9

nodeValue​

Node 的 nodeValue 属性返回或设置当前节点的值。对于文档节点来说，nodeValue 返回 null. 对于 text, comment，和 CDATA 节点来说，nodeValue 返回该节点的文本内容. 对于 attribute 节点来说，返回该属性的属性值。

document.nodeValue; // null

ownerDocument 只读​

只读属性会返回当前节点的顶层的 document 对象。

document.body.ownerDocument; // #document

parentElement​

返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。

document.body.parentElement; // #html

parentNode​

返回指定的节点在 DOM 树中的父节点。

document.body.parentNode; // #html

previousSibling​

返回当前节点的前一个兄弟节点，没有则返回 null.

document.body.parentNode; // #html

textContent​

Node 接口的 textContent 属性表示一个节点及其后代的文本内容。

document.textContent; // null

Node 方法​

appendChild()​

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。

element.appendChild(aChild);

cloneNode()​

Node.cloneNode() 方法返回调用该方法的节点的一个副本。

var dupNode = node.cloneNode(deep);

compareDocumentPosition()​

Node.compareDocumentPosition() 可以比较当前节点与任意文档中的另一个节点的位置关系。 返回值是一个具有以下值的位掩码：

1 不在同一文档中 2 otherNode 在 node 之前 4 otherNode 在 node 之后 8 otherNode 包含 node 16 otherNode 被 node 包含 32 待定

compareMask = node.compareDocumentPosition(otherNode);

contains()​

contains() 返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（childNodes）、子节点的直接子节点等。

contains(otherNode);

getRootNode()​

getRootNode() 方法返回上下文中的根节点，如果 shadow DOM 可用，则对 shadow DOM 同样适用。

var root = node.getRootNode(options);

hasChildNodes()​

hasChildNodes 方法返回一个布尔值,表明当前节点是否包含有子节点.

element.hasChildNodes();

insertBefore()​

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

isDefaultNamespace()​

isDefaultNamespace 接受一个命名空间 URI 作为参数，如果该命名空间是当前节点的默认命名空间，则返回 true,否则返回 false.

result = node.isDefaultNamespace(namespaceURI);

isEqualNode()​

Node.isEqualNode() 方法可以判断两个节点是否相等。

var isEqualNode = node.isEqualNode(otherNode);

normalize()​

Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。

element.normalize();

removeChild()​

Node.removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点。

let oldChild = node.removeChild(child);

replaceChild()​

Node.replaceChild() 方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

replaceChild(newChild, oldChild)

事件​

selectstart​

Selection API (en-US) 的 selectstart 事件在用户开始一个新的选择时候触发。 如果事件被取消，选择将不被触发。

document.addEventListener(
  "selectstart",
  function () {
    console.log("Selection started");
  },
  false
);

参考链接​

MDN 官网：https://developer.mozilla.org/zh-CN/docs/Web/API/Node