版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82357068
目录
Node类型
Node是一个接口,该接口将由DOM中所有节点类型实现,这个Node接口在javaScript中作为Node类型实现的。除了IE之外,其他所有浏览器都可以访问这个类型。继承图如下:
**:Document、Element、DocumentFragement、DocumentType都继承于Node,这个在后面文章中会逐个说,此时的继承图则是从Node节点开始。
属性
nodeType
只读属性。用于表明节点的类型。
节点类型常量
Node.ELEMENT_NODE 1 一个元素节点 例如 <div>
Node.TEXT_NODE 3 Element或者Attr中实际的文字
Node.COMMENT_NODE 8 一个Comment节点 <!--注释-->
Node.DOCUMENT_NODE 9 一个Document节点
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的节点 <!DOCTYPE html>
Node.DOCUMENT_FRAGMENT_NODE 11 一个DocumentFragement节点
使用方法
document.nodeType === Node.DOCUMENT_NODE; // true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
var div = document.createElement("div");
div.textContent = "hello! cc...";
div.nodeType === Node.ELEMENT_NODE; // true
div.firstChild.nodeType === Node.TEXT_NODE; // true nodeName
只读属性。返回当前节点作为字符串的名称(大写)
var div=document.createElement('div');
div.textContent="ccc";
console.log(div.nodeName) //"DIV"
console.log(div.firstChild.nodeName);//"#text"nodeValue
该属性返回或设置当前节点的值
对于文档本身,nodeValue返回null.对于text,comment节点,则返回节点的内容，对于属性节点返回属性的值。
var div = document.createElement("div");
div.textContent = "hello! cc...";
console.log(div.nodeValue); //null
console.log(div.firstChild.nodeValue); //"hello! cc.."childNodes
只读属性。返回NodeList的孩子nodes给定元素
NodeList是一种类数组对象,用于保存一组有序的节点，可以通过位置来访问这些节点。既然是类数组对象则它就不是Array的实例。
将NodeList转换为数组
var childs=document.body.childNodes;
//将类数组对象转换为数组
//var arr=Array.prototype.slice.call(childs,0);
var arr=Array.prototype.slice.apply(childs,[0]);
console.log(arr);
parentNode
返回指定的节点在DOM树中的父节点
用法
parentNode=node.parentNodefirstChild
只读属性。返回树种节点的第一个子节点。如果无子节点则返回null
console.log(document.firstChild) //<!doctype html>lastChild
只读属性。返回树节点最后一个子节点。如果无子节点则返回null
如果只有一个子节点时，firstChild和lastChild的值指向同一个节点。
previousSibling
返回当前节点的前一个兄弟节点，没有则返回null
// <div><a id="a1"/><a id="a2"/></div>
alert(document.getElementById("a1").previousSibling); // null
alert(document.getElementById("a2").previousSibling.id); // "a1"
nextSibling
只读属性。返回其父节点的childNodes列表中紧跟在其后的节点，如果指定的节点为最后一个节点，则返回null。
<div id="div1">this is div1</div>
<div id="div2">this is div2</div>
<script>
console.log(document.body.childNodes); //[text, div#div1, text, div#div2, text, script]
var el=document.getElementById('div1').nextSibling;
var i=1;
while(el){
console.log(i+' ---' +el.nodeName); //1 ---#text 2 ---DIV 3 ---#text 4 ---SCRIPT
el=el.nextSibling;
i++;
}
</script>ownerDocument
只读属性。返回当前节点的顶层的document对象，即整个文档的文档节点。
**：如果在 文档节点自身上使用此属性，则返回null
document.ownerDocument //null方法
操作节点
在下面操作节点的方法中都必须先取得父节点(可以使用parentNode属性).并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用该操作方法则会导致错误。
例如:
document.firstChild.appenChild('1'); //会报错appendChild()
该方法将一个节点添加到指定父节点列表末尾
返回值
该方法会把插入的这个节点引用作为返回值返回。
应用
//创建一个div元素,然后添加到body的最尾部
var div=document.createElement("div");
var returnNode=document.body.appendChild(div);
console.log(returnNode==div); //trueinsertBefore()
该方法在参考节点之前插入一个节点作为一个指定父节点的子节点。
参数
第一个要插入的节点，第二个为参照的节点
返回值
返回被插入的节点
应用
<div id="parent">
<span id="child">child sapn</span>
</div>
<script>
//创建一个span标签
var sp1=document.createElement("span");
//获取id为child的span标签
var sp2=document.getElementById('child');
//获取div
var parentDiv = sp2.parentNode;
console.log(parentDiv.childNodes); // [text, span#child, text]
//将创建的span插入到html中span标签前
parentDiv.insertBefore(sp1, sp2);
console.log(parentDiv.childNodes); // [text, span, span#child, text]
</script>replaceChild()
用指定的节点替换当前节点的一个子节点,并返回替换掉的节点
参数
第一个参数为要插入的节点;第二个参数为要替换的节点
返回值
返回替换掉的节点
应用
<div>
<span id="oldSpan">oldSpan</span>
</div>
<script>
//创建一个span标签
var newSpan=document.createElement('span');
//添加id 属性
newSpan.setAttribute("id","newSpan");
//创建文本
var newSpan_content=document.createTextNode("new Span元素的content");
//将文本加入newSpan中
newSpan.appendChild(newSpan_content);
//获取 oldSpan
var oldSpan=document.getElementById('oldSpan');
var parentDiv=oldSpan.parentNode;
var returnNode=parentDiv.replaceChild(newSpan,oldSpan);
console.log(returnNode); //<span id="oldSpan">oldSpan</span>
</script>removeChild()
该方法从DOM中删除一个子节点,返回删除的节点
参数
要移除的那个子节点
返回值
返回被删除的节点
应用
<div id="top">
<div id="nested"></div>
</div>
<script>
//移除一个元素节点的所有子元素
var element=document.getElementById('top');
while(element.firstChild){
element.removeChild(element.firstChild);
}
</script>其它方法
cloneNode()
方法返回调用该方法的节点一个副本
参数
可选。表示是否采用深度克隆，如果true，则采用深度克隆(该节点的后代节点也都会被克隆);如果false,则只是克隆该节点本身
返回值
克隆生成的副本节点
应用
<p id="p1">1</p>
<script>
var p=document.getElementById("p1");
var p_prime=p.cloneNode(true);
console.log(p.childNodes.length); //1
console.log(p_prime.childNodes.length); //1
</script>
normalize()
处理文档树中的文本节点。处理后不存在一个空的文本节点，或者两个相邻的文本节点。
注1：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。
注2：两个以上相邻文本节点的产生原因包括：
通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
HTML中超长的文本节点会被浏览器自动分割为多个相邻文本节点。
使用
var wrapper=document.crateElement("div");
wrapper.appendChild(document.createTextNode('part 1 '));
wrapper.appenChild(document.createTextNode('part 2 '));
console.log(wrapper.childNodes.length); //2
wrapper.normalize();
console.log(wrapper.childNodes.length); //1