节点Nodes 常用API

324 阅读3分钟

节点

在 HTML DOM (文档对象模型)中,每个部分都是节点:

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点 (包括回车符也是属于文本节点)
  • 注释是注释节点

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

总结:元素是元素节点,是节点中的一种,但元素节点中可以包含很多的节点。

节点属性

Node.nodeName    //返回节点名称,只读
Node.nodeType    //返回节点类型的常数值,只读
Node.nodeValue   //返回Text或Comment节点的文本值,只读
Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写
Node.baseURI     //返回当前网页的绝对路径
Node.ownerDocument     //返回当前节点所在的顶层文档对象,即document
Node.nextSibling      //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling  //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode       //返回当前节点的父节点
Node.parentElement    //返回当前节点的父Element节点
Node.childNodes       //返回当前节点的所有子节点
Node.firstChild       //返回当前节点的第一个子节点
Node.lastChild        //返回当前节点的最后一个子节点

parentNode接口

Node.children           //返回指定节点的所有Element子节点
Node.firstElementChild  //返回当前节点的第一个Element子节点
Node.lastElementChild   //返回当前节点的最后一个Element子节点
Node.childElementCount  //返回当前节点所有Element子节点的数目。

操作

Node.appendChild(node)                //向节点添加最后一个子节点
Node.hasChildNodes()                  //返回布尔值,表示当前节点是否有子节点
Node.cloneNode(true);                 // 默认为false(克隆节点), true(克隆节点及其属性,以及后代)
Node.insertBefore(newNode,oldNode)    // 在指定子节点之前插入新的子节点
Node.removeChild(node)                //删除节点,在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild)  //替换节点
Node.contains(node)                   //返回一个布尔值,表示参数节点是否为当前节点的后代节点。
Node.compareDocumentPosition(node)    //返回一个7个比特位的二进制值,表示参数节点和当前节点的关系
Node.isEqualNode(noe)                 //返回布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。
Node.normalize()                      //用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。

ChildNode接口

Node.remove()      //用于删除当前节点
Node.before()      //在ChildNode这个节点的父节点中插入一些列的Node或者 DOMString对象,位置就是在ChildNode节点的前面
Node.after()       //方法会在其父节点的子节点列表中插入一些 Node 或 DOMString 对象。插入位置为该节点之后
Node.replaceWith() //替换了该节点父节点下的子节点