返回

元素节点,属性节点,文本节点,注释节点,document,documentFragment六大节点属性与方法大盘点

前端

Node对象即节点对象,是HTML/XML DOM树的构建基石,它的构造函数就是Node,实现了绝大部分DOM节点共有属性和方法。

   DOM树结构图
   +---------------------+---------------------+---------------------+
   |元素节点 | 文本节点    | 注释节点    |
   +---------------------+---------------------+---------------------+
   |属性节点  |   |         |
   +---------------------+         |
                            |
                            |
                            |
   +---------------------+---------------------+---------------------+
   |document节点 | documentFragment节点 |其他节点      |
   +---------------------+---------------------+---------------------+

元素节点(Element node)

元素节点是HTML/XML DOM树中最为普遍的节点,它代表了HTML/XML中的所有标签。元素节点是HTML/XML DOM树中唯一的可变节点类型,这意味着它可以被创建、修改和删除。元素节点可以通过HTML/XML标记来创建,也可以通过DOM API来创建。

属性节点(Attribute node)

属性节点是元素节点的子节点,它代表了元素节点的属性。属性节点是一个只读节点,这意味着它不能被修改或删除。属性节点可以通过HTML/XML标记来创建,也可以通过DOM API来创建。

文本节点(Text node)

文本节点是元素节点的子节点,它代表了元素节点的内容。文本节点是一个只读节点,这意味着它不能被修改或删除。文本节点可以通过HTML/XML标记来创建,也可以通过DOM API来创建。

注释节点(Comment node)

注释节点是元素节点的子节点,它代表了元素节点中的注释。注释节点是一个只读节点,这意味着它不能被修改或删除。注释节点可以通过HTML/XML标记来创建,也可以通过DOM API来创建。

Document节点

Document节点是HTML/XML DOM树的根节点,它代表了整个HTML/XML文档。Document节点是一个只读节点,这意味着它不能被修改或删除。Document节点可以通过HTML/XML标记来创建,也可以通过DOM API来创建。

DocumentFragment节点

DocumentFragment节点是一个特殊的节点,它不属于HTML/XML DOM树。DocumentFragment节点可以用来创建HTML/XML片段,这些片段可以被添加到HTML/XML DOM树中。DocumentFragment节点可以通过DOM API来创建。

节点属性

节点属性是节点对象所具有的属性,这些属性可以用来获取或设置节点的各种信息。节点属性包括:

  • nodeType:节点类型,一个数字,用于标识节点的类型。
  • nodeName:节点名称,一个字符串,用于标识节点的名称。
  • nodeValue:节点值,一个字符串,用于标识节点的值。
  • namespaceURI:节点的命名空间URI,一个字符串,用于标识节点的命名空间。
  • childNode:节点的第一个子节点,一个节点对象,用于标识节点的第一个子节点。
  • childNodes:节点的所有子节点,一个节点对象数组,用于标识节点的所有子节点。
  • firstChild:节点的第一个子节点,一个节点对象,用于标识节点的第一个子节点。
  • lastChild:节点的最后一个子节点,一个节点对象,用于标识节点的最后一个子节点。
  • previousSibling:节点的前一个同级节点,一个节点对象,用于标识节点的前一个同级节点。
  • nextSibling:节点的后一个同级节点,一个节点对象,用于标识节点的后一个同级节点。
  • parentNode:节点的父节点,一个节点对象,用于标识节点的父节点。
  • ownerDocument:节点所属的document对象,一个document对象,用于标识节点所属的document对象。

节点方法

节点方法是节点对象所具有的方法,这些方法可以用来操作节点。节点方法包括:

  • insertBefore():在节点之前插入一个节点。
  • replaceChild():用一个节点替换另一个节点。
  • removeChild():删除一个节点。
  • appendChild():在节点末尾添加一个节点。
  • hasChildNodes():检查节点是否具有子节点。
  • cloneNode():克隆一个节点。
  • normalize():标准化节点。
  • isSupported():检查节点是否支持某种操作。

各节点特有的API函数

除了上面介绍的共同属性和方法外,每个节点类型还有一些特有的API函数。这些函数可以用来获取或设置节点的特定信息。

元素节点特有的API函数包括:

  • getAttribute():获取元素节点的某个属性。
  • setAttribute():设置元素节点的某个属性。
  • removeAttribute():删除元素节点的某个属性。
  • hasAttribute():检查元素节点是否具有某个属性。

属性节点特有的API函数包括:

  • value:属性节点的值。

文本节点特有的API函数包括:

  • data:文本节点的值。

注释节点特有的API函数包括:

  • data:注释节点的值。

Document节点特有的API函数包括:

  • createElement():创建一个元素节点。
  • createAttribute():创建一个属性节点。
  • createTextNode():创建一个文本节点。
  • createComment():创建一个注释节点。

DocumentFragment节点特有的API函数包括:

  • appendChild():在DocumentFragment节点末尾添加一个节点。
  • insertBefore():在DocumentFragment节点之前插入一个节点。
  • removeChild():从DocumentFragment节点中删除一个节点。
  • cloneNode():克隆一个DocumentFragment节点。