js常用DOM操作

在博客园看到了苏夏写的常用DOM整理文章，地址：http://www.cnblogs.com/cabbagen/p/4579412.html，然后抽时间都试了一下这些常用的DOM操作。在这里记录一下。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>常用dom</title>
     <script>
         window.onload = function(){
             function $(id){ //获取id元素
                 return typeof id === 'string' ? document.getElementById(id) : id;
             }
             //取得节点
             var box = $('box'); //得到id名为box的元素节点
             var div = document.getElementsByTagName('div'); //得到所有标签为div的元素节点集合
             var name = document.getElementsByName('our'); //得到name为our的元素
             //var cls = document.getElementsByClassName('box'); //ie8及以下不支持
             //var clsdiv = document.querySelectorAll('#box,#boxs'); //找到所有id为box和boxs的元素数组集合querySelector只能找到第一个，ie8以上才支持

             //遍历节点
             var ul = $('ul');
             var lis = ul.children; //取得ul下的直系子元素li
             var lis1 = getFirst(ul); //在火狐下它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
             function getFirst(ele){ //通过childNodes封装得到第一个子元素
                 for(var i=0;i<ele.childNodes.length;i++){
                     if(ele.childNodes[i].nodeType == 1){
                         return ele.childNodes[i];
                     }
                 }
             };
             var lisFirst = firstChild(ul);  //也可以这样获取到第一个子元素，比较方便
             var lisLast = lastChild(ul); //也可以这样获取到最后一个子元素，比较方便
             function firstChild(node){ //封装得到第一个子元素
                 return node.firstElementChild || node.firstChild;
             };
             function lastChild(node){ //封装得到最后一个子元素
                 return node.lastElementChild || node.lastChild;
             };
             function prev(node){ //得到上一个元素
                 return node.previousElementSibling || node.previousSibling;
             };
             function next(node){ //得到下一个元素
                 return node.nextElementSibling || node.nextSibling;
             };
             var parent = $('con').parentNode; //得到id为con的元素的父节点也就是得到了id为box的元素节点

             //获取节点信息
             var nodeName = $('box').nodeName; //获取元素或者属性节点的标签名称 结果是：DIV
             var nodeValue = $('con').childNodes[0].nodeValue; //获取文本节点的内容 结果是：文本节点内容
             var innerHTML = $('inner').innerHTML; //获取并设置元素节点的内容 结果是：文本节点内容<span>123</span> 可能会包含HTML标签
             var innerText = innerText($('inner')); //获取并设置元素节点的纯文本内容不包含标签结果是：文本节点内容123 (ie用innerText，ff用textContent)
             function innerText(node){
                 return node.textContent || node.innerText;
             };
             for(var i=0;i<lis.length;i++){
                 var index = lis[i].getAttribute('index'); //获取属性节点的值
                 lis[i].setAttribute('index', i); //设置属性节点的值
             };
             var nodeType = $('ul').attributes[0].nodeType; //获取节点的类型 元素节点： 1；属性节点： 2；文本节点： 3；文档节点： 9；注释节点： 8；

             //操作节点
             var input = document.createElement('input'); //创建元素节点
             var textNode = document.createTextNode('你们好'); //创建文本节点
             var attrNode = document.createAttribute('index'); //创建属性节点
             attrNode.value = '123';
             $('box').setAttributeNode(attrNode);
             //$('box').remove(); //删除节点 在ie中 .removeNode(true)
             $('ul').removeChild($('ul').children[0]);
             document.body.appendChild(textNode); //插入节点
             var clone = $('con').cloneNode([true]); //克隆节点 传入true为深度复制，会把内容也复制过来
             document.body.appendChild(clone);
             $('box').replaceChild(input, $('con')); //替换节点
             function addClass(element,className) { //添加class
                  element.className += className;
             };
             function removeClass(element,removeClassName) { //移除class
                  var classStr = element.className;
                  element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,'');
             }
             addClass($('box'), ' haha ei');
             removeClass($('box'), 'haha');
         }
     </script>
 </head>
 <body>
     <div id="box" class="box wo" name="our">
         <div id="con">文本节点内容</div>
     </div>
     <div id="boxs" class="box" name="our"></div>
     <div id="inner">文本节点内容<span>123</span></div>
     <ul id="ul">
         <li index="0"></li>
         <li index="1"></li>
         <li index="2"></li>
     </ul>
 </body>
 </html>