DOM—Node原型链

1. 属性

childNodes

返回该节点的所有子节点组成的集合，节点包括标签节点、文本节点等等。返回类型为 NodeList

var ndList = elementNode.childNodes; 
//ndList变量为 NodeList 类型，且为只读。
ndList.length //长度
ndList[i]就是遍历到的每个子节点

在Node节点的原型链中没有找到子元素节点的属性，因此可以用Element原型链中的children属性

parentNode

返回指定的节点在DOM树中的父节点，该节点可以是元素节点、Document节点等等

parentNode = node.parentNode

parentElement

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

parentElement = node.parentElement

firstChild (只读)

如果有一个子节点, childNode 是节点的第一个子节点的引用，否则为null。

var childNode = node.firstChild;

lastChild (只读)

返回当前节点的最后一个子节点,如果没有子节点，则返回 null。

var last_child = node.lastChild

nextSibling (只读)

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

nextNode = node.nextSibling

previousSibling

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

previousNode = node.previousSibling

nodeName (只读)

返回当前节点的节点名称，是个字符串

var str = node.nodeName;

nodeType (只读)

返回一个整数，其代表的是节点类型，其所有可能的值请参考 节点类型常量. 1是Element，3是text节点

该属性可用来区分不同类型的节点，比如 元素, 文本 和 注释

var type = node.nodeType;

textContent

该属性用于获取或设置该节点所有子代的文本内容

let text = element.textContent;
element.textContent = "this is some sample text";
<div id="divA">This is <span>some</span> text</div>
var text = document.getElementById("divA").textContent;
//得到的text为 This is some text

2.方法

appendChild

该 方法将一个节点添加到指定父节点的子节点列表末尾，返回值仍是子节点

var child = parentNode.appendChild(child);

insertBefore

方法在参考节点之前插入一个拥有指定父节点的子节点，如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾

parentNode.insertBefore(newNode, referenceNode);

cloneNode

该方法返回调用该方法的节点的一个副本

var dupNode = node.cloneNode();//默认深拷贝
var dupNode = node.cloneNode(deep);
//deep参数值是bool值，决定是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,
如果为false,则只克隆该节点本身。
//在 DOM4 副规范中，默认值是 true，但在最新的规范中默认值成了 false，因此想要深克隆，就需要
手动设置为 true

contains

该方法返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点，若是则返回true

node.contains( otherNode )

hasChildNodes

该方法返回一个布尔值,表明当前节点是否包含有子节点，若有返回true

element.hasChildNodes()

有三种方法可以判断当前节点是否有子节点。

• node.firstChild !== null
• node.childNodes.length > 0
• node.hasChildNodes()

replaceChild

该方法用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

replacedNode = parentNode.replaceChild(newChild, oldChild);
//replaceNode === oldChild，replaceNode为oldChild的引用

3. parentNode

混合了所有(拥有子元素的) Node 对象包含的共有方法和属性，ParentNode 是一个原始接口，不能够创建这种类型的对象；它在 Element、Document 和 DocumentFragment对象上被实现。

3.1 属性

childElementCount (只读)

该属性返回一个无符号长整型数字，表示给定元素的子元素(元素也叫标签)数。

var count = node.childElementCount;

children (只读)

该属性返回 一个Node的子elements ，是一个动态更新的 HTMLCollection

var childrenList = node.children;
childrenList.length //标签元素集合的长度
通过children[i]来获取每个子元素

firstElementChild (只读)

该属性返回对象的第一个子 元素, 如果没有子元素，则为null。

var element = node.firstElementChild;

lastElementChild

该属性返回对象的最后一个子元素，如果没有子元素，则返回 null。

var element = node.lastElementChild;

3.2 方法

removeChild

该方法从DOM中删除一个子节点。返回删除的节点。
let oldChild = parentNode.removeChild(child);//oldChild === child
//OR
element.removeChild(child);
被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

append

该 方法在 ParentNode的最后一个子节点之后插入一组 Node对象或 DOMString对象。

被插入的 DOMString 对象等价为 Text 节点。

parent.append(node);
parent.append("Some text");
parent.append("Some text", node);

与 Node.appendChild()的差异：

• ParentNode.append()允许追加 DOMString 对象，而Node.appendChild() 只接受 Node 对象。
• ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 Node对象。
• ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

prepend

方法可以在父节点的第一个子节点之前插入一系列Node对象或者DOMString对象。DOMString会被当作Text节点对待

parent.prepend(node);
parent.prepend("Headline: ");
parent.prepend("Some text", node);

querySelector

返回选择到的第一个元素(也叫标签)，selectors 是一个CSS选择器字符串( selectors )

element = parentNode.querySelector(selectors);//parentNode是节点

querySelectorAll

返回一个 NodeList表示元素的列表。

elementsList = parentNode.querySelectorAll(selectors);

4. ChildNode

4.1 方法

after

在其父节点的子节点列表中插入一些 Node或 DOMString对象。插入位置为该节点之后。DOMString对象会被以 Text的形式插入。

child.after(node);
child.after("some text"); 
child.after(node, "some text");

before

该方法可以在ChildNode这个节点的父节点中插入一些列的 Node或者 DOMString 对象，位置就是在ChildNode节点的前面，``DOMString对象其实和 Text节点一样的方式来完成插入的。

child.before(node);
child.before("some text"); 
child.before(node, "some text");

remove

该方法，把对象从它所属的 DOM 树中删除。

node.remove();

replaceWith

方法用一套 Node对象或者 DOMString对象，替换了该节点父节点下的子节点 。DOMString 对象被当做等效的Text 节点插入。

child.replaceWith(newNode);
child.replaceWith("some text");

5. NonDocumentTypeChildNode

previousElementSibling

返回当前元素在其父元素的子元素节点中的前一个元素节点,如果该元素已经是第一个元素节点,则返回null,该属性是只读的

nextElementSibling

返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是第一个元素节点,则返回null,该属性是只读的

6. 参考

以上内容为mdn文档的部分总结，来源于mdn-DOM-Node、mdn-DOM-ParentNode、mdn-DOM-ChildNode