JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
本文实例讲述了JS常见DOM节点操作。分享给大家供大家参考,具体如下:
DOM含义:DOM是文档对象模型(DocumentObjectModel,是基于浏览器编程的一套API接口,是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时,浏览器就会创建页面的文档对象模型。
节点:根据W3C的HTMLDOM标准,HTML文档中的所有内容都是节点:
1、整个文档时一个文档节点。
2、每个HTML元素是元素节点。
3、HTML元素内的文本是文本节点。
4、每个HTML属性是属性节点。
5、每个注释是注释节点。
所以HTMLDOM将HTML文档视作树结构,这种结构被称为节点树。通过HTMLDOM,节点树中的所有节点都可以通过JS进行访问。所有HTML元素(节点)均可被修改。
一、创建节点、追加节点
1、createElement(标签名)创建一个元素节点(具体的一个元素)。
2、appendChild(节点)追加一个节点。
3、createTextNode(节点文本内容)创建一个文本节点
varoDiv=document.createElement("div");//创建一个div元素,因为是document对象的方法。 varoDivText=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节点的前面。
varoDiv=document.createElement("div");//创建一个div元素,因为是document对象的方法。 varoDiv1=document.getElementById("div1"); document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点 ul.appendChild(ul.firstChild);//把ul的第一个元素节点移到ul子节点的末尾
三、删除、移除节点
1、removeChild(节点)删除一个节点,用于移除删除一个参数(节点)。其返回的被移除的节点,被移除的节点仍在文档中,只是文档中已没有其位置了。
varremoveChild=document.body.removeChild(div1);//移除document对象的方法div1
四、替换节点
1、replaceChild(插入的节点,被替换的节点),用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要被替换的节点。返回的是被替换的节点。
varreplaceChild=document.body.replaceChild(div1,div2);//将div1替换div2
五、查找节点
1、childNodes包含文本节点和元素节点的子节点。
for(vari=0;i2、
A、children也可以获取子节点,而且兼容各种浏览器。包括IE6-8
B、parentNode:获取父节点
varoList=document.getElementById('list');//oList是做的ul的对象 varoChild=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兼容。
//查找第一个子节点的封装函数 functionfirstChild(ele){ if(ele.firstElementChild){//如果该条件是true则在该浏览器(IE或非IE)中兼容 returnele.firstElementChild; }else{ returnele.firstChild; } } firstChild(oList).style.background='red';//将获得的节点的背景变成红色B、lastChild;lastElementChild查找最后一个子节点。此存在浏览器兼容问题:lastChild是IE兼容,lastElementChild是非IE兼容。
//查找最后一个子节点的封装函数 functionlastChild(ele){ if(ele.lastElementChild){//如果该条件是true则在该浏览器(IE或非IE)中兼容 returnele.lastElementChild; }else{ returnele.lastChild; } } lastChild(oList).style.background='red';//将获得的节点的背景变成红色C、nextSibling;nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。
//查找下一个兄弟节点的封装函数 functionnextSibling(ele){ if(ele.nextElementSibling){ returnele.nextElementSibling; }else{ returnele.nextSibling; } } nextSibling(oMid).style.background='red';D、previousSibling;previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。
//查找上一个兄弟节点的封装函数 functionpreviousSibling(ele){ if(ele.nextElementSibling){ returnele.previousElementSibling; }else{ returnele.previousSibling; } } previousSibling(oMid).style.background='red';更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。