JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
本文实例讲述了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（节点文本内容）创建一个文本节点
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是指向<body>元素
document.documentelement.appendchild(createnode);//父级.appendchild(子节点);;document.documentelement是指向<html>元素
二、插入节点
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、removechild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
var removechild = document.body.removechild(div1);//移除document对象的方法div1
四、替换节点
1、replacechild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。
var replacechild= document.body.replacechild(div1,div2); //将div1替换div2
五、查找节点
1、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]);//在控制器日志中显示找到的元素节点
}
}
2、
a、children也可以获取子节点，而且兼容各种浏览器。包括ie6-8
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)//子节点的个数
3、
a、firstchild ; firstelementchild查找第一个子节点。此存在浏览器兼容问题：firstchild是ie兼容，firstelementchild是非ie兼容。
//查找第一个子节点的封装函数
function firstchild(ele) {
if (ele.firstelementchild) {//如果该条件是true则在该浏览器（ie或非ie）中兼容
return ele.firstelementchild;
} else {
return ele.firstchild;
}
}
firstchild(olist).style.background = 'red';//将获得的节点的背景变成红色
b、lastchild ; lastelementchild查找最后一个子节点。此存在浏览器兼容问题：lastchild 是ie兼容，lastelementchild是非ie兼容。
//查找最后一个子节点的封装函数
function lastchild(ele) {
if (ele.lastelementchild) {//如果该条件是true则在该浏览器（ie或非ie）中兼容
return ele.lastelementchild;
} else {
return ele.lastchild;
}
}
lastchild(olist).style.background = 'red';//将获得的节点的背景变成红色
c、nextsibling ; nextelementsibling查找下一个兄弟节点。也是存在兼容性问题。
//查找下一个兄弟节点的封装函数
function nextsibling(ele) {
if (ele.nextelementsibling) {
return ele.nextelementsibling;
} else {
return ele.nextsibling;
}
}
nextsibling(omid).style.background = 'red';
d、previoussibling ; previouselementsibling查找上一个兄弟节点。也是存在兼容性问题。
//查找上一个兄弟节点的封装函数
function previoussibling(ele) {
if (ele.nextelementsibling) {
return ele.previouselementsibling;
} else {
return ele.previoussibling;
}
}
previoussibling(omid).style.background = 'red';
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。