js的DOM节点操作：创建，插⼊，删除，复制，查节点
DOM含义：DOM是⽂档对象模型(Document Object Model，是基于浏览器编程的⼀套API接⼝，是W3C出台的推荐标准。其赋予了JS操作节点的能⼒。当⽹页被加载时，浏览器就会创建页⾯的⽂档对象模型。
节点：根据 W3C 的 HTML DOM 标准，HTML ⽂档中的所有内容都是节点：
1、整个⽂档时⼀个⽂档节点。
2、每个HTML元素是元素节点。
3、HTML元素内的⽂本是⽂本节点。
4、每个HTML属性是属性节点。
5、每个注释是注释节点。
所以HTML DOM 将 HTML ⽂档视作树结构，这种结构被称为节点树。通过 HTML DOM，节点树中的所有节点都可以通过 JS 进⾏访问。所有 HTML 元素（节点）均可被修改。
⼀、创建节点、追加节点
1、createElement（标签名）创建⼀个元素节点（具体的⼀个元素）。
2、appendChild（节点）追加⼀个节点。
3、createTextNode（节点⽂本内容）创建⼀个⽂本节点
[html]
1. <code class="language-html">        var oDiv = ateElement("div");//创建⼀个div元素，因为是document对象的⽅法。
2.        var oDivText = ateTextNode("666");//创建⼀个⽂本节点内容是“666”，因为是document对象的⽅法。
3.        oDiv.appendChild(oDivText);//⽗级.appendChild(⼦节点)；在div元素中添加“666”
4.        document.body.appendChild(oDiv);//⽗级.appendChild(⼦节点);;document.body是指向<body>元素
5.        document.documentElement.appendChild(createNode);//⽗级.appendChild(⼦节点);;document.documentElement是指向<html>
元素</code>
⼆、插⼊节点
1、appendChild（节点）也是⼀种插⼊节点的⽅式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插⼊b节点的前⾯。
1.
var oDiv = ateElement("div");//创建⼀个div元素，因为是document对象的⽅法。
2.
var oDiv1 = ElementById("div1");
3.
document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插⼊新创建的元素节点
4.
ul.appendChild(ul.firstChild); //把ul的第⼀个元素节点移到ul⼦节点的末尾
三、删除、移除节点
1、removeChild(节点) 删除⼀个节点，⽤于移除删除⼀个参数（节点）。其返回的被移除的节点，被移除的节点仍在⽂档中，只是⽂档中已没有其位置了。
var removeChild = veChild(div1);//移除document对象的⽅法div1
四、替换节点
1、replaceChild(插⼊的节点，被替换的节点) ，⽤于替换节点，接受两个参数，第⼀参数是要插⼊的节点，第⼆个是要被替换的节点。返回的是被替换的节点。
var replaceChild= placeChild(div1,div2); //将div1替换div2
五、查节点
1、childNodes 包含⽂本节点和元素节点的⼦节点。
1.
for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
2.
//nodeType是节点的类型，利⽤nodeType来判断节点类型，再去控制⼦节点
3.
//nodeType==1 是元素节点
4.
//nodeType==3 是⽂本节点
5.
if (oList.childNodes[i].nodeType == 1) {//查到oList内的元素节点
6.
console.log(oList.childNodes[i]);//在控制器⽇志中显⽰到的元素节点
7.
}
8.
}
2、A、children也可以获取⼦节点，⽽且兼容各种浏览器。包括IE6-8
B、parentNode：获取⽗节点
1.
var oList = ElementById('list');//oList是做的ul的对象
2.
var ElementById('child');//oChild是做的ul中的⼀个li的对象
3.
/
/通过⼦节点查⽗节点//parentNode：获取⽗节点
4.
console.log(oChild.parentNode);//在控制器⽇志中显⽰⽗节点
5.
console.log(oList.children);//在控制器⽇志中显⽰oList⼦节点
6.
console.log(children.length)//⼦节点的个数
3、A、firstChild ; firstElementChild查第⼀个⼦节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是⾮IE兼容。
1.
//查第⼀个⼦节点的封装函数
2.
function firstChild(ele) {
3.
if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或⾮IE）中兼容
4.
return ele.firstElementChild;
5.
} else {
6.
return ele.firstChild;
7.
}
8.
}
9.
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红⾊
B、lastChild ; lastElementChild查最后⼀个⼦节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是⾮IE兼容。
1.
//查最后⼀个⼦节点的封装函数
2.
function lastChild(ele) {
3.
if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或⾮IE）中兼容
4.
return ele.lastElementChild;
5.
} else {
6.
return ele.lastChild;
7.
}
8.
}
9.
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红⾊
C、nextSibling ; nextElementSibling查下⼀个兄弟节点。也是存在兼容性问题。
1.
//查下⼀个兄弟节点的封装函数
2.
function nextSibling(ele) {
3.
if (ElementSibling) {
4.
ElementSibling;
5.
} else {
6.
Sibling;
7.
}
8.
}
9.
nextSibling(oMid).style.background = 'red';
D、previousSibling ; previousElementSibling查上⼀个兄弟节点。也是存在兼容性问题。
1.
/
/查上⼀个兄弟节点的封装函数
2.
function previousSibling(ele) {
3.
if (ElementSibling) {
4.
return ele.previousElementSibling;
5.
} else {
6.
return ele.previousSibling;
js教程removechild
7.
}
8.
}
9.
previousSibling(oMid).style.background = 'red';

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。