js的节点操作

来源：互联网发布：网络电视机顶盒系统编辑：程序博客网时间：2024/06/07 03:37

1.DOM基础

l什么是DOM：文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的文档对象模型（Document ObjectModel）

l浏览器支持情况：IE 10% chrome 60% FF 99%

HTML DOM 模型被构造为对象的树。

2.通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素：var x=document.getElementById();
通过标签名找到 HTML 元素:var y=getElementsByTagName(); 这里要注意通过标签名查找是要先缩小查找范围；
通过类名找到 HTML 元素：var x=document.getElementsByClassName(）；通过类名查找不兼容IE，解决方法会在下面说明；

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
      JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
      JavaScript 能够改变页面中的所有 CSS 样式
      JavaScript 能够对页面中的所有事件做出反应

2.DOM方法获取节点：

2.1.从父节点获取子节点：

childNodes， nodeType 组合使用，使用childNodes是获取到所有的元素节点以及文本节点，但一般我们只需要元素节点，所以要使用nodeType进行判断选择；

还有children也可以获取子节点，而且仅仅获取元素节点，所以比较常用：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="fat"><li></li><li></li></ul></body><script type="text/javascript">var oFat=document.getElementById('fat');var num=0;//nodeType==1 元素节点//nodeType==3 文本节点//for(var i=0;i<oFat.childNodes.length;i++){   //循环判断oFat中的节点是否为元素节点//if(oFat.childNodes[i].nodeType==1){//num++;   //}//}num=oFat.children.length;  //children可以直接获取元素节点console.log(num);</script></html>

2.2.从子节点获取付节点：

parentNode：获取父节点：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="fat"><li id="chi"></li><li></li></ul></body><script type="text/javascript">var oFat=document.getElementById('fat');var oChi=document.getElementById('chi');console.log(oChi.parentNode);  //parentNode可以通过子节点获取父节点；</script></html>

2.3.获取首尾子节点以及兄弟节点：

firstChild、firstElementChild ,lastChild 、lastElementChild ;有兼容性问题，需要同过判断解决：

nextSibling、nextElementSibling，previousSibling、previousElementSibling 兄弟节点也有兼容问题，

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="fat"><li></li><li id="chi"></li><li></li></ul></body><script type="text/javascript">var oFat=document.getElementById('fat');var oChi=document.getElementById('chi');function first(ele){  //首节点获取并实现兼容的函数if(ele.firstElementChild){return ele.firstElementChild; //非IE}else{return ele.firstChild;  //IE}}function last(ele){  //尾节点获取并实现兼容的函数if(ele.lastElementChild){return ele.lastElementChild;}else{return ele.lastChild;}}function nextbro(ele){  //获取下一个兄弟节点并实现兼容的函数if(ele.nextElementSibling){return ele.nextElementSibling;}else{return ele.nextSibling;}}function prebro(ele){  //获取上一个兄弟节点并实现兼容函数if(ele.previousElementSibling){return ele.previousElementSibling;}else{return ele.previousSibling;}}console.log(prebro(oChi));</script></html>

要注意在解决兼容问题要先对每个方法进行测试，一般是检测对IE的兼容；

3.用className选择元素：

前面我们用过id、标签名获取元素，兼容性比较好，但是通过类名获取元素不兼容ie浏览器。这里我们自己声明一个函数，封装以后可以使用。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="list"><li class="box"></li><li></li><li class="box"></li><li></li><li class="box"></li></ul></body><script type="text/javascript">//var oUl=document.getElementById('list');//var aLi=oUl.getElementsByTagName('li');////for(var i=0;i<aLi.length;i++){  //此循环可以使我们在IE中使用类名查找元素//if(aLi[i].className=='box'){//aLi[i].style.background='blue';//}//}function getByClass(oFat,sclass){   //在IE中使用类名查找元素的函数；（封装）var aResult=[];var aEles=oFat.getElementsByTagName('*');for(var i=0;i<aEles.length;i++){if(aEles[i].className==sclass){aResult.push(aEles[i]);}}return aResult;}var oUl=document.getElementById('list');var aBox=getByClass(oUl,'box');  //将获取的元素赋给一个数组变量方便使用for(i=0;i<aBox.length;i++){aBox[i].style.background='blue';}console.log(aBox.length);</script></html>

4.DOM方式操作元素属性：

4.1.获取：getAttribute(名称)

4.2.设置：setAttribute(名称, 值)

4.3.删除：removeAttribute(名称)

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><input id="txt1" type="text" /><input id="btn1" type="button" value="按钮" /></body><script>var oTxt = document.getElementById('txt1');var oBtn = document.getElementById('btn1');oBtn.onclick = function() {//oTxt.value='asdfasd';//oTxt['value']='xczcvb';oTxt.setAttribute('value', 'erwertwert');};</script></html>

5.创建DOM元素

5.1.createElement(标签名) 创建一个节点
5.2.appendChild(节点) 追加一个节点：这个插入节点是在ul里面的后面增加的

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><input id="btn1" type="button" value="创建li" /><ul id="ul1"></ul></body><script>var oBtn = document.getElementById('btn1');var oUl = document.getElementById('ul1');oBtn.onclick = function() {var oLi = document.createElement('li');//父级.appendChild(子节点);oUl.appendChild(oLi);};</script></html>

6.插入 DOM 元素：insertBefore(节点, 原有节点) 在已有元素前插入，同时，为了让节点有值，需要添加一个文本表单

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><input id="txt1" type="text" /><input id="btn1" type="button" value="创建li" /><ul id="ul1"></ul></body><script>var oBtn = document.getElementById('btn1');var oUl = document.getElementById('ul1');var oTxt = document.getElementById('txt1');oBtn.onclick = function() {var oLi = document.createElement('li');var aLi = oUl.getElementsByTagName('li');oLi.innerHTML = oTxt.value;if(aLi.length > 0) {   oUl.insertBefore(oLi, aLi[0]);} else {oUl.appendChild(oLi);}}</script></html>

7.删除DOM元素：removeChild(节点) 删除一个节点

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title></script></head><body><ul id="ul1"><li>asfasd<a href="javascript:;">删除</a></li><li>5645<a href="javascript:;">删除</a></li><li>ghdfjgj<a href="javascript:;">删除</a></li><li>mvbnmvnb<a href="javascript:;">删除</a></li></ul></body><script>var aA=document.getElementsByTagName('a');var oUl=document.getElementById('ul1');for(var i=0;i<aA.length;i++) {aA[i].onclick=function() {oUl.removeChild(this.parentNode);}}</html>

0 0