共同学习js，不对的地方欢迎大家指正。

js Dom 操作

一

　　document获取节点的基本方法

    1.document.getElementById('id');                                  //通过id来获取元素,返回指定的唯一元素。

    2.document.getElementsByName("name");                      //通过name来获取元素，返回name='name'的集合。

    3.document.getElementsByClassName("classname")         //用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)。

    4.document.getElementsByTagName('div');                     //用元素的标签获取元素，返回所有标签=“div”的集合。

getElementsByClassName不兼容ie8及以下，所以需要做兼容，搜集到以下两种方式：

//兼容IE getElementsByClassName取标签 方法一//写成一个函数，每次调用这个函数function getElementsByClassName(className,root,tagName) {    //root：父节点，tagName：该节点的标签名。 这两个参数均可有可无    if(root){        root=typeof root=="string" ? document.getElementById(root) : root;       }else{        root=document.body;    }    tagName=tagName||"*";                                        if (document.getElementsByClassName) {                    //如果浏览器支持getElementsByClassName，就直接的用        return root.getElementsByClassName(className);    }else {         var tag= root.getElementsByTagName(tagName);    //获取指定元素        var tagAll = [];                                    //用于存储符合条件的元素        for (var i = 0; i < tag.length; i++) {                //遍历获得的元素            for(var j=0,n=tag[i].className.split(' ');j

　　js节点操作方法

　　1.获取节点

        document.documentElement        //获取整个Html Dom结构

        element.childNodes                     //得到element的全部子节点

        element.parentNode                    //得到element的父节点

        element.nextSibling                    //得到element的下一个兄弟节点

        element.previousSibling              //得到element的上一个兄弟节点

        element.firstChild                       //得到element的第一个节点

        element.lastChild                        //得到element的最后一个节点

        *        example : console.log(element.nextSibling.previousSibling);

       

        2.节点 获取/设置 属性

        *element.setAttribute("class","class1")         //设置元素属性

        *element.getAttribute("class")                    //获取元素属性

        *element.removeAttribute("class")              //删除元素属性

        *      example : element.parentNode.setAttribute("id","bannerUl");

        3.创建节点

        createElement()                                          //创建标签名为tagname的元素

        createTextNode()                                        //创建包含文本text的文本节点

        createDocumentFragment()                         //创建文档碎片节点               

        *         example: document.createElement("p");       

        *       example: document.createTextNode("Hellow world");

        *         document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会 改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次 性添加到document中。

       

        4.添加、移除、替换、复制节点。

        element.appendChild()                                           //向节点的子节点列表末尾增加一个新的节点

        element.insertBefore(newchild,refchild)                    //向某个子节点的前面插入一个节点    newchild新的节点  refchild指定的节点

        element.removeChild()                                           //删除某个节点 只能删除下一级的节点

        element.replaceChild(newnode,oldnode)                   //替换DOM节点的方法     newnode新的节点      oldnode需要替换的节点

        element.cloneNode(Boolean)                                   //设置为 true，克隆节点及其属性，以及后代, 设置为 false，则只克隆节点及其属性,不克隆后代节点

        element.cloneNode                                                   //不同于一般的赋值 var li  = childodeClear(ul2).childNodes[0].cloneNode(true) != var li  = childodeClear(ul2).childNodes[0]; 后者是赋值一个内存地址，所以操作会改变原来的节点

 

常见问题：

        用element.childNodes获取一个节点的子元素集合的时候（ul获取li集合），如果里面有很多空格/回车,子集的长度会不符合子集个数。需要手动清除回车、空格

 

     
        
      
            
       
1
                        
       
2
                        
       
3
                        
       
4sdfsfsdfsfsdfsfsfsdf