js常用DOM操作
在博客园看到了苏夏写的常用DOM整理文章，地址：http://www.cnblogs.com/cabbagen/p/4579412.html，然后抽时间都试了一下这些常用的DOM操作。在这里记录一下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>常用dom</title> 6 <script> 7 window.onload = function(){ 8 function $(id){ //获取id元素 9 return typeof id === 'string' ? document.getElementById(id) : id; 10 } 11 //取得节点 12 var box = $('box'); //得到id名为box的元素节点 13 var div = document.getElementsByTagName('div'); //得到所有标签为div的元素节点集合 14 var name = document.getElementsByName('our'); //得到name为our的元素 15 //var cls = document.getElementsByClassName('box'); //ie8及以下不支持 16 //var clsdiv = document.querySelectorAll('#box,#boxs'); //找到所有id为box和boxs的元素数组集合querySelector只能找到第一个，ie8以上才支持 17 18 19 //遍历节点 20 var ul = $('ul'); 21 var lis = ul.children; //取得ul下的直系子元素li 22 var lis1 = getFirst(ul); //在火狐下它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。 23 function getFirst(ele){ //通过childNodes封装得到第一个子元素 24 for(var i=0;i<ele.childNodes.length;i++){ 25 if(ele.childNodes[i].nodeType == 1){ 26 return ele.childNodes[i]; 27 } 28 } 29 }; 30 var lisFirst = firstChild(ul); //也可以这样获取到第一个子元素，比较方便 31 var lisLast = lastChild(ul); //也可以这样获取到最后一个子元素，比较方便 32 function firstChild(node){ //封装得到第一个子元素 33 return node.firstElementChild || node.firstChild; 34 }; 35 function lastChild(node){ //封装得到最后一个子元素 36 return node.lastElementChild || node.lastChild; 37 }; 38 function prev(node){ //得到上一个元素 39 return node.previousElementSibling || node.previousSibling; 40 }; 41 function next(node){ //得到下一个元素 42 return node.nextElementSibling || node.nextSibling; 43 }; 44 var parent = $('con').parentNode; //得到id为con的元素的父节点也就是得到了id为box的元素节点 45 46 47 //获取节点信息 48 var nodeName = $('box').nodeName; //获取元素或者属性节点的标签名称 结果是：DIV 49 var nodeValue = $('con').childNodes[0].nodeValue; //获取文本节点的内容 结果是：文本节点内容 50 var innerHTML = $('inner').innerHTML; //获取并设置元素节点的内容 结果是：文本节点内容<span>123</span> 可能会包含HTML标签 51 var innerText = innerText($('inner')); //获取并设置元素节点的纯文本内容不包含标签结果是：文本节点内容123 (ie用innerText，ff用textContent) 52 function innerText(node){ 53 return node.textContent || node.innerText; 54 }; 55 for(var i=0;i<lis.length;i++){ 56 var index = lis[i].getAttribute('index'); //获取属性节点的值 57 lis[i].setAttribute('index', i); //设置属性节点的值 58 }; 59 var nodeType = $('ul').attributes[0].nodeType; //获取节点的类型 元素节点： 1；属性节点： 2；文本节点： 3；文档节点： 9；注释节点： 8； 60 61 62 //操作节点 63 var input = document.createElement('input'); //创建元素节点 64 var textNode = document.createTextNode('你们好'); //创建文本节点 65 var attrNode = document.createAttribute('index'); //创建属性节点 66 attrNode.value = '123'; 67 $('box').setAttributeNode(attrNode); 68 //$('box').remove(); //删除节点 在ie中 .removeNode(true) 69 $('ul').removeChild($('ul').children[0]); 70 document.body.appendChild(textNode); //插入节点 71 var clone = $('con').cloneNode([true]); //克隆节点 传入true为深度复制，会把内容也复制过来 72 document.body.appendChild(clone); 73 $('box').replaceChild(input, $('con')); //替换节点 74 function addClass(element,className) { //添加class 75 element.className += className; 76 }; 77 function removeClass(element,removeClassName) { //移除class 78 var classStr = element.className; 79 element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,''); 80 } 81 addClass($('box'), ' haha ei'); 82 removeClass($('box'), 'haha'); 83 } 84 </script> 85 </head> 86 <body> 87 <div id="box" class="box wo" name="our"> 88 <div id="con">文本节点内容</div> 89 </div> 90 <div id="boxs" class="box" name="our"></div> 91 <div id="inner">文本节点内容<span>123</span></div> 92 <ul id="ul"> 93 <li index="0"></li> 94 <li index="1"></li> 95 <li index="2"></li> 96 </ul> 97 </body> 98 </html>
