javasript 的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、 建立节点、追加节点
1.createElement（标签名）建立一个元素节点（具体的一个元素）。
2.appendChild（节点） 追加一个节点
3.createTextNode（节点文本内容）建立一个文本节点
var oDiv = document.createElement('div') // 常见一个div元素，由于是document 对象的方法
var oDivText = document.createTextNode('666') // 建立一个文本节点内容是666 , 由于是document 对象的方法
oDiv.appendChild(oDivText) // 父级.appendChild(子节点); 在div元素中添加6666
document.body.appendChild(oDiv) // 父级.appendChild(子节点);document.body是指向<body> 元素
document.documentElement.appendChild(createNode) //父级.appendChild(子节点); document.documentElement 是指向html 元素
x
1
var oDiv = document.createElement('div') // 常见一个div元素，由于是document 对象的方法
2
var oDivText = document.createTextNode('666') // 建立一个文本节点内容是666 , 由于是document 对象的方法
3
oDiv.appendChild(oDivText) // 父级.appendChild(子节点); 在div元素中添加6666
4
document.body.appendChild(oDiv) // 父级.appendChild(子节点);document.body是指向<body> 元素
5
document.documentElement.appendChild(createNode) //父级.appendChild(子节点); document.documentElement 是指向html 元素
2、插入节点
1.appendChild（节点）也是一种插入节点的方式，还能够添加已经存在的元素，会将其元素从原来的位置移动新的位置
2.insertBefore(a,b), 意思是a节点会插入b节点的前面
var oDiv = document.createElement("div");//建立一个div元素，由于是document对象的方法。
var oDiv1 = document.getElementById("div1");
document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新建立的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
1
1
var oDiv = document.createElement("div");//建立一个div元素，由于是document对象的方法。
2
var oDiv1 = document.getElementById("div1");
3
document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新建立的元素节点
4
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
5
注： 在练习的时候，
注意以上2种写法的差异，下面一种换行的方式会致使，最后一个lastChild 是空格节点，因此必须保证同一行
详见附件方法
3、删除、移除节点
一、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
一、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
var removeChild = document.body.removeChild(div1);//移除document对象的方法div1
1
1
var removeChild = document.body.removeChild(div1);//移除document对象的方法div1
4、替换节点
一、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。
一、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。
var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2
1
1
var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2
5、查找节点
一、childNodes 包含文本节点和元素节点的子节点。
一、childNodes 包含文本节点和元素节点的子节点。
for (var i = 0; i < oList.childNodes.length; i++) {//oList是作的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
}
}
1
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
}
二、A、children也能够获取子节点，并且兼容各类浏览器。包括IE6-8
B、parentNode：获取父节点
B、parentNode：获取父节点
var oList = document.getElementById('list');//oList是作的ul的对象
var oChild=document.getElementById('child');//oChild是作的ul中的一个li的对象
//经过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数
1
1
var oList = document.getElementById('list');//oList是作的ul的对象
2
var oChild=document.getElementById('child');//oChild是作的ul中的一个li的对象
3
//经过子节点查找父节点//parentNode：获取父节点
4
console.log(oChild.parentNode);//在控制器日志中显示父节点
5
console.log(oList.children);//在控制器日志中显示oList子节点
6
console.log(children.length)//子节点的个数
三、A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是非IE兼容。
<span style="white-space:pre"> </span>//查找第一个子节点的封装函数
<span style="white-space:pre"> </span>function firstChild(ele) {
<span style="white-space:pre"> </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是该条件是true则在该浏览器（IE或非IE）中兼容</span>
<span style="white-space:pre"> </span> return ele.firstElementChild;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.firstChild;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>firstChild(oList).style.background = 'red';//将得到的节点的背景变成红色
1
1
<span style="white-space:pre"> </span>//查找第一个子节点的封装函数
2
<span style="white-space:pre"> </span>function firstChild(ele) {
3
<span style="white-space:pre"> </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是该条件是true则在该浏览器（IE或非IE）中兼容</span>
4
<span style="white-space:pre"> </span> return ele.firstElementChild;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.firstChild;
7
<span style="white-space:pre"> </span>}
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>firstChild(oList).style.background = 'red';//将得到的节点的背景变成红色
B、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是非IE兼容。
<span style="white-space:pre"> </span>//查找最后一个子节点的封装函数
<span style="white-space:pre"> </span>function lastChild(ele) {
<span style="white-space:pre"> </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是该条件是true则在该浏览器（IE或非IE）中兼容</span>
<span style="white-space:pre"> </span> return ele.lastElementChild;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.lastChild;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>lastChild(oList).style.background = 'red';//将得到的节点的背景变成红色
1
1
<span style="white-space:pre"> </span>//查找最后一个子节点的封装函数
2
<span style="white-space:pre"> </span>function lastChild(ele) {
3
<span style="white-space:pre"> </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//若是该条件是true则在该浏览器（IE或非IE）中兼容</span>
4
<span style="white-space:pre"> </span> return ele.lastElementChild;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.lastChild;
7
<span style="white-space:pre"> </span>}
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>lastChild(oList).style.background = 'red';//将得到的节点的背景变成红色
C、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。
<span style="white-space:pre"> </span>//查找下一个兄弟节点的封装函数
<span style="white-space:pre"> </span>function nextSibling(ele) {
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
<span style="white-space:pre"> </span> return ele.nextElementSibling;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.nextSibling;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>nextSibling(oMid).style.background = 'red';
1
1
<span style="white-space:pre"> </span>//查找下一个兄弟节点的封装函数
2
<span style="white-space:pre"> </span>function nextSibling(ele) {
3
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
4
<span style="white-space:pre"> </span> return ele.nextElementSibling;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.nextSibling;
7
<span style="white-space:pre"> </span>}
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>nextSibling(oMid).style.background = 'red';
D、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。
<span style="white-space:pre"> </span>//查找上一个兄弟节点的封装函数
<span style="white-space:pre"> </span>function previousSibling(ele) {
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
<span style="white-space:pre"> </span> return ele.previousElementSibling;
<span style="white-space:pre"> </span>} else {
<span style="white-space:pre"> </span> return ele.previousSibling;
<span style="white-space:pre"> </span> }
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>previousSibling(oMid).style.background = 'red';
1
1
<span style="white-space:pre"> </span>//查找上一个兄弟节点的封装函数
2
<span style="white-space:pre"> </span>function previousSibling(ele) {
3
<span style="white-space:pre"> </span>if (ele.nextElementSibling) {
4
<span style="white-space:pre"> </span> return ele.previousElementSibling;
5
<span style="white-space:pre"> </span>} else {
6
<span style="white-space:pre"> </span> return ele.previousSibling;
7
<span style="white-space:pre"> </span> }
8
<span style="white-space:pre"> </span>}
9
<span style="white-space:pre"> </span>previousSibling(oMid).style.background = 'red';
转载至：http://blog.csdn.net/torrex/article/details/54376633
附件列表
相关文章
- 1. js的DOM节点操做：建立 ，插入，删除，复制，查找节点
- 2. 插入节点 建立节点 对文本操做 删除节点
- 3. JavaScript节点操做--建立节点、添加节点、删除节点、复制节点
- 4. DOM操做——怎样添加、移除、移动、复制、建立和查找节点
- 5. JS DOM操做（建立、遍历、获取、操做、删除节点）
- 6. javascript对DOM节点的建立--插入--删除操做---appendChild()注意事项！
- 7. jQuery DOM节点的建立、插入、删除
- 8. jQuery DOM操做之删除节点
- 9. DOM节点变更事件，监听节点删除、插入操做
- 10. JS 进阶(5) DOM操做：dom加载完毕执行js、建立节点、遍历节点、查找节点、删除节点
- 更多相关文章...
- • XML DOM 删除节点 - XML DOM 教程
- • XML DOM 节点 - XML DOM 教程
- • 算法总结-二分查找法
- • 漫谈MySQL的锁机制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. js的DOM节点操做：建立 ，插入，删除，复制，查找节点
- 2. 插入节点 建立节点 对文本操做 删除节点
- 3. JavaScript节点操做--建立节点、添加节点、删除节点、复制节点
- 4. DOM操做——怎样添加、移除、移动、复制、建立和查找节点
- 5. JS DOM操做（建立、遍历、获取、操做、删除节点）
- 6. javascript对DOM节点的建立--插入--删除操做---appendChild()注意事项！
- 7. jQuery DOM节点的建立、插入、删除
- 8. jQuery DOM操做之删除节点
- 9. DOM节点变更事件，监听节点删除、插入操做
- 10. JS 进阶(5) DOM操做：dom加载完毕执行js、建立节点、遍历节点、查找节点、删除节点