本文实例讲述了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（节点文本内容）创建一个文本节点
rush:js;">
var oDiv = document.createElement("div");//创建
一个div元素，因为是document对象的
方法。
var oDivText = document.createTextNode("666");//创建
一个文本节点
内容是“666”，因为是document对象的
方法。
oDiv.appendChild(oDivText);//父级.appendChild(子节点);在div元素中
添加“666”
document.body.appendChild(oDiv);//父级.appendChild(子节点);;document.body是指向元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向元素
二、插入节点
1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。
rush:js;">
var oDiv = document.createElement("div");//创建
一个div元素，因为是document对象的
方法。
var oDiv1 = document.getElementById("div1");
document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点
ul.appendChild(ul.f
irstChild); //把ul的第
一个元素节点移到ul子节点的末尾
三、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
rush:js;">
var removeChild = document.body.removeChild(div1);//移除document对象的
方法div1
四、替换节点
1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。
rush:js;">
var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2
五、查找节点
1、
rush:js;">
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]);//在控制器日志中
显示找到的元素节点
}
}
2、
A、获取子节点，而且兼容各种浏览器。包括IE6-8
B、获取父节点
rush:js;">
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)//子节点的个数
3、
A、irstChild ; irstElementChild查找第一个子节点。此存在浏览器兼容问题
：firstChild是IE兼容，firstElementChild是非IE兼容。
rush:js;">
//查找第
一个子节点的封装
函数
function f
irstChild(ele) {
if (ele.f
irstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.f
irstElementChild;
} else {
return ele.f
irstChild;
}
}
f
irstChild(oList).style.background = 'red';//将获得的节点的背景变成红色
B、一个子节点。此存在浏览器兼容问题
：lastChild 是IE兼容，lastElementChild是非IE兼容。
rush:js;">
//查找最后
一个子节点的封装
函数
function lastChild(ele) {
if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.lastElementChild;
} else {
return ele.lastChild;
}
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色
C、一个兄弟节点。也是存在兼容性问题
。
rush:js;">
//查找下
一个兄弟节点的封装
函数
function nextSibling(ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
return ele.nextSibling;
}
}
nextSibling(oMid).style.background = 'red';
D、IoUsSibling ; IoUsElementSibling查找上一个兄弟节点。也是存在兼容性问题
。
rush:js;">
//查找上
一个兄弟节点的封装
函数
function prev
IoUsSibling(ele) {
if (ele.nextElementSibling) {
return ele.prev
IoUsElementSibling;
} else {
return ele.prev
IoUsSibling;
}
}
prev
IoUsSibling(oMid).style.background = 'red';
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
