原生js dom操作

这里说说一些原生js操作dom的方法：
1，元素的获取     
getElementById()，getElementsByTagName()，getElementsByClassName()，这里要注意这个getElementsByClassName()在ie8以下是不兼容的。

//兼容写法
function getByClassName(className){    
            if(document.getElementByClassName){    
                return document.getElementByClassName(className) 
                //FF下因为有此方法，所以可以直接获取到；    
            }    
            var nodes=document.getElementsByTagName("*");//获取页面里所有元素，因为他会匹配全页面元素，所以性能上有缺陷，但是可以约束他的搜索范围；    
            var arr=[];//用来保存符合的className；    
            for(var i=0;i<nodes.length;i++){    
                if(hasClass(nodes[i],className)) arr.push(nodes[i]);    
            }    
            return arr;    
        }  


         function hasClass(node,className){    
            var cNames=node.className.split(/\s+/);//根据空格来分割node里的元素；    
            for(var i=0;i<cNames.length;i++){    
                if(cNames[i]==className) return true;    
            }    
            return false;    
        }

2，元素操作方法</p><p>      
    (1)node.appendChild(node1)：向某个节点添加一个子节点，这个添加的节点会被放在最后，成为这个节点的最后一个子节点；
    (2)node.removeChild(node1)：移除某个节点     
        <div id="test" class="test" name="test">
<p id="ptest">123</p>
</div>
<script type="text/javascript">
var div = document.getElementById("test");
var p = document.getElementById("ptest");
div.removeChild(p);
</script>




      (3)insertBefore(nodo1, node2),将node1作为当前元素的子节点，插入到当前元素的节点node2的前面
<div id="test" class="test" name="test">
<p id="ptest">123</p>
</div>
<p id="ptest2"></p>
<script type="text/javascript" charset="utf-8">
var div = document.getElementById("test");
var p = document.getElementById("ptest");
var p2 = document.getElementById("ptest2");
//div.removeChild(p);
div.insertBefore(p2, p);
</script>


这里注意了，inserBefore的第二个参数，div的子节点，就是p要是div的子节点


(4)replaceChild(newnode, oldnode);新节点，代替纠结点
<div id="test" class="test" name="test">
<p id="ptest">123</p>
</div>
<p id="ptest2"></p>
<script type="text/javascript" charset="utf-8">
var div = document.getElementById("test");
var p = document.getElementById("ptest");
var p2 = document.getElementById("ptest2");
//div.removeChild(p);
//div.insertBefore(p2, p);
div.replaceChild(p2, p);
</script>
    这里注意了，replaceChild的第二个参数，div的子节点，就是p要是div的子节点    

3，获取节点

 (1)hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素。

(2)childNodes 返回当前指定元素所有子元素(包括被注释掉的元素)的数组: document.body.childNodes;

它返回指定元素的子元素集合，包括HTML节点(元素节点），文本节点(空格也是文本节点)。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3 是文本节点。

(3)children返回当前指定元素所有子元素，但是与childNodes 不同的是，他只会返回HTML节点(元素节点)，不返回文本节点。

(4)firstChildelem.firstChild 返回当前元素下的第一个子节点。

这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点

(5)lastChildelem.lastChild返回当前元素下的最后一个子节点。

  这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点

(6)nextSbilingelem.nextSbiling 返回紧跟在当前节点后的那一个同级节点(同级元素，不是子元素)。

 这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点

(7)previousSiblingelem.previousSibling 返回前一个同级节点，跟nextSbiling类似，只不过nextSbiling是返回后一个，

(8)parentNodeelem.parentNode 返回父节点

4，属性操作

(1)elem.getAttribute(name); 获取元素属性

(2)elem.setAttribute(name, value); 设置元素属性

5，创建元素、文本节点

(1) var p = document.createElement("p"); 创建元素，里面的“p”，就是代表创建p元素

div.appendChild(p);

(2) var txt = document.createTextNode("这是文本"); 这是创建文本元素

p.appendChild(txt);

6，获取元素，节点的值

<p id="test">123</p> 要获取p之下的文本值

1, document.getElementById("test").childNodes[0].nodeValue；(这里不能用children替换childNodes，因为children获取不到 文本节点)

2, document.getElementById("test").innerTEXT;

3, document.getElementById("test").innerHTML;

注意这里2个3是有区别的：

<p id="test"><a href="#">123</a></p>

如果是这样 那么2的值还是 123， 但是3的值就是a href="#">123</a>，就是说innerHTML会连html标签也拿到，但是innerText不会