JavaScript阮一峰教程DOM(Node)API一览-1

Node接口属性

jiekou.png

• nodeType属性返回一个整数值，表示节点的类型。
• nodeName属性返回节点的名称。
• nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。
• textContent属性返回当前节点和它的所有后代节点的文本内容。
• baseURI属性返回一个字符串，表示当前网页的绝对路径。浏览器根据这个属性，计算网页上的相对路径的 URL。该属性为只读。
• Node.ownerDocument属性返回当前节点所在的顶层文档对象，即document对象。
• Node.nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。
• previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
• parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。
• parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。
• firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
• childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。
• isConnected属性返回一个布尔值，表示当前节点是否在文档之中。

Node接口方法

fangfa.png

• appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。
• hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点。
• cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。
• insertBefore方法用于将某个节点插入父节点内部的指定位置。
• removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
• replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。
• contains方法返回一个布尔值，表示参数节点是否满足以下三个条件之一。

参数节点为当前节点。
参数节点为当前节点的子节点。
参数节点为当前节点的后代节点。

• compareDocumentPosition方法的用法，与contains方法完全一致，返回一个七个比特位的二进制值，表示参数节点与当前节点的关系。
• isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
• normailize方法用于清理当前节点内部的所有文本节点（text）。它会去除空的文本节点，并且将毗邻的文本节点合并成一个，也就是说不存在空的文本节点，以及毗邻的文本节点。
• getRootNode方法返回当前节点所在文档的根节点。

Nodelist接口

HTMLcollection接口

jiekou2.png

节点都是单个对象，有时需要一种数据结构，能够容纳多个节点。DOM 提供两种节点集合，用于容纳多个节点：NodeList和HTMLCollection。

这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是NodeList实例或HTMLCollection实例。

• NodeList实例是一个类似数组的对象，它的成员是节点对象。通过以下方法可以得到NodeList实例。
• length属性返回 NodeList 实例包含的节点数量。
• forEach方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的forEach方法完全一致。
• item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
• 这三个方法都返回一个 ES6 的遍历器对象，可以通过for...of循环遍历获取每一个成员的信息。区别在于，keys()返回键名的遍历器，values()返回键值的遍历器，entries()返回的遍历器同时包含键名和键值的信息。
• HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。

返回HTMLCollection实例的，主要是一些Document对象的集合属性，比如document.links、docuement.forms、document.images等。

• length属性返回HTMLCollection实例包含的成员数量。
• item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。
• namedItem方法的参数是一个字符串，表示id属性或name属性的值，返回对应的元素节点。如果没有对应的节点，则返回null。

ParentNode接口

ChildNode接口

接口3.png

节点对象除了继承 Node 接口以外，还会继承其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。

如果当前节点是父节点，就会继承ParentNode接口。由于只有元素节点（element）、文档节点（document）和文档片段节点（documentFragment）拥有子节点，因此只有这三类节点会继承ParentNode接口。

• children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。该属性只读。

下面是遍历某个节点的所有元素子节点的示例。

• firstElementChild属性返回当前节点的第一个元素子节点。如果没有任何元素子节点，则返回null。
• lastElementChild属性返回当前节点的最后一个元素子节点，如果不存在任何元素子节点，则返回null。
• childElementCount属性返回一个整数，表示当前节点的所有元素子节点的数目。如果不包含任何元素子节点，则返回0。
• append方法为当前节点追加一个或多个子节点，位置是最后一个元素子节点的后面。

该方法不仅可以添加元素子节点，还可以添加文本子节点。

如果一个节点有父节点，那么该节点就继承了ChildNode接口。

• remove方法用于从父节点移除当前节点。
• replaceWith方法使用参数节点，替换当前节点。参数可以是元素节点，也可以是文本节点。