iTakeo

js对DOM节点的操作整理…

js对DOM节点的操作整理…

获取节点：

  1. //按照ID获取  
  2. document.getElementById(‘element’);    
  3. //按照节点名称获取，返回类数组对象   
  4. document.getElementsByTagName(‘element’);   
  5. //按照name名称获取，返回类数组对象  
  6. document.getElementsByName(‘element’);    
  7. // 按照className获取，返回类数组对象,IE7及以下并不支持；     
  8. document.getElementsByClassName(‘className’)    
  9. //html5提供的新接口，类似jq的选择器，可以使用层叠关系，多选，返回值为第一个元素  
  10. document.querySelector(‘.element’)  //根据class  
  11. document.querySelector(‘#element’)  //根据id  
  12. document.querySelector(‘#element .div’)  //层叠关系  
  13. document.querySelector(‘.div,.div2’)  //多选  
  14. document.querySelector(“div.test > p:first-child”);  //子选择器  
  15. document.querySelector(“div.test + p”);  //兄弟选择器  
  16. document.querySelector(“div[type=qq]”)   //属性选择器;  
  17. //使用方法同上，也是html5提供的新接口，这个返回类数组对象     
  18. document.querySelectorAll(‘.element’)  

获取子节点：

  1. //元素子节点集合，这个有兼容性问题，在IE9以下，会忽略文本节点，比如换行符，空格，文字，而IE9以上，包括现代浏览器会获取文本节点，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。  
  2. element.childNodes  
  3. //元素子节点集合，这个不返回文本节点，直接获取元素节点，也是最常用的，兼容性也不错，只是在IE9以下，会包含注释节点，只要div里面不写注释也就没啥大问题  
  4. element.children  

获取第一个子节点：

  1. //获取元素的第一个子节点，这个同样有兼容性问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会  
  2. element.firstChild  
  3. //同样获取元素的第一个子节点，但是在IE9以下不支持，现代浏览器中会忽略文本节点。  
  4. element.firstElementChild  
  5.   
  6. //我们可以通过下面的写法获取第一个子节点，来兼容所有浏览器。  
  7. var firstChild = ele.firstElementChild || ele.firstChild  
  8. alert(firstChild)  

获取最后一个子节点：

  1. //获取元素的最后一个子节点，同firstChild一样，这个同样有兼容性问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会  
  2. element.lastChild  
  3. //同样获取元素的第一个子节点，但是在IE9以下不支持，现代浏览器中会忽略文本节点。  
  4. element.lastElementChild  
  5.   
  6. //我们可以通过下面的写法获取最后一个子节点，来兼容所有浏览器。  
  7. var lastChild = ele.lastElementChild || ele.lastChild  
  8. alert(lastChild)  

获取父元素：

  1. //获取元素的父元素  
  2. element.parentNode   
  3. //获取元素的父元素，据说这个只支持IE，但是测试了一下貌似Firefox和chrome也支持，大部分情况下还是用parentNode来取代parentElement  
  4. element.parentElement   

获取上一个兄弟元素：

  1. //获取上一个兄弟元素，这个同上面获取第一个子节点一样的问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会  
  2. element.previousSibling  
  3. //同样获取上一个兄弟元素，但是在IE9以下不支持，现代浏览器中会忽略文本节点。    
  4. element.previousElementSibling   
  5.   
  6. //我们可以通过下面的写法获取上一个兄弟元素，来兼容所有浏览器。    
  7. var prevEle = ele.previousElementSibling || ele.previousSibling    
  8. alert(prevEle)    

获取下一个兄弟元素：

  1. //获取下一个兄弟元素，这个同上面获取第一个子节点一样的问题，在IE9以下会忽略文本节点，IE9以上及其它现代浏览器则不会  
  2. element.nextSibling  
  3. //同样获取下一个兄弟元素，但是在IE9以下不支持，现代浏览器中会忽略文本节点。    
  4. element.nextElementSibling   
  5.   
  6. //我们可以通过下面的写法获取下一个兄弟元素，来兼容所有浏览器。    
  7. var nextEle = ele.nextElementSibling || ele.nextSibling    
  8. alert(nextEle)    

获取上下兄弟元素：

  1. var siblings = Array.prototype.slice.call(el.parentNode.children);  
  2. for (var i = siblings.length; i–;) {  
  3.     if (siblings[i] === el) {  
  4.         siblings.splice(i, 1);  
  5.         break;  
  6.     };  
  7. };  
  1. ;[].forEach.call(el.parentNode.children, function(child){  
  2.     if(child !== el);  
  3. });  

获取元素或者属性节点的标签名称：

  1. element.nodeName  

获取元素的内容(包含HTML标签)：

  1. element.innerHTML  

获取元素的纯文本内容(不包含HTML标签)：

  1. element.innerText   //Firefox不认识这个  
  2. element.textContent //Firefox用这个  

设置元素的属性节点：

  1. element.setAttribute(Name,Value);    

获取元素的属性节点：

  1. element.getAttribute(Name);    

删除元素的属性节点：

  1. element.removeAttribute(Name);    

创建元素：

  1. document.createElement(‘element’);  //创建元素节点：         
  2. document.createTextNode(‘text’);   //创建文本节点：         
  3. document.createAttribute(‘attribute’); //创建属性节点：     

删除节点（必须从父层开始删除）：

  1. parentNode.removeChild(ele);   

插入节点：

  1. //插入到父节点的尾部  
  2. parentNode.appendChild(ele);    
  3. //插入到已存在节点的前面；   
  4. parentNode.insertBefore(newNode,ele)   

克隆节点：

  1. node.cloneNode(true)     //传入true为深度复制  

替换节点：

  1. parentNode.replaceChild(newNode,oldNode);   

循环节点：

  1. [].forEach.call(ele,function(el,i){  
  2.     //xxx  
  3. });  
  1. for(var i = 0;i < ele.length;i ++){  
  2.     //ele[i]  
  3. }  

以下是HTML5提供的新方法：

  1. ele.classList  //元素的class对象  
  2. ele.classList.add(‘xxx’)   //添加class  
  3. ele.classList.remove(‘xxx’)   //删除class  
  4. ele.classList.toggle(‘xxx’)   //切换class  
  5. ele.classList.contains(‘xxx’)   //是否包含class  

以下是利用原生js实现对class的添加删除和判断：

  1. //添加class  
  2. function addClass(_object,_clsname){  
  3.     var _clsname = _clsname.replace(“.”,“”);  
  4.     if(!hasClass(_object,_clsname)){  
  5.         _object.className = _object.className+(” “+_clsname);  
  6.     };  
  7. }  
  8. //判断是否存在已有class  
  9. function hasClass(_object,_clsname){  
  10.     var _clsname = _clsname.replace(“.”,“”);  
  11.     var _sCls = ” “+(_object.className)+” “;  
  12.     return (_sCls.indexOf(” “+_clsname+” “) != -1) ? true : false;  
  13. }  
  14. //删除class  
  15. function delClass(_object,_clsname){  
  16.     var _clsname = _clsname.replace(“.”,“”);  
  17.     if(hasClass(_object,_clsname)){  
  18.         _object.className = _object.className.replace(new RegExp(“(?:^|\\s)”+_clsname+“(?=\\s|$)”,“g”),” “);  
  19.     };  
  20. }  
2015/07/13 1 /
前端
/
标签:  暂无标签

评论回复

  1. 回复 2015/08/04 黑客

    ❗ 很好很喜欢

验证码： 7 + 8 =

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部