1.元素获取方式 id tagName name className--不兼容 querySelector--不兼容，主要用于开发移动端 querySelectorAll--不兼容，主要用于开发移动端 document.documentElement.clientWidth||document.body.clientWidth浏览器的宽 document.documentElement.clientHeight||document.body.clientHeight浏览器的高

//1.id获取元素--完全兼容    //var oP=document.getElementById('p1'); //    //2.class获取元素--在IE6-8下不兼容    //var oP=document.getElementsByClassName('p1')[0];    //3.标签名--完全兼容    //var oP=document.getElementsByTagName('p')[0];    //4.name获取元素--主要用于表单元素；    //var oInput=document.getElementsByName('txt')[0];    //5.可视区的宽和高    /*var w=document.documentElement.clientWidth||document.body.clientWidth;    var h=document.documentElement.clientHeight||document.body.clientHeight;*/    //6.querySelector--只能获取一个元素   // var oP=document.querySelector('.p1');   // var oP=document.querySelector('#p1')    //var oP=document.querySelector('p')    //7.querySelectorAll    //var oP=document.querySelectorAll('.p1')[0];    //var oP=document.querySelectorAll('p')[0];    var oP=document.querySelectorAll('#p1')[0];    console.log(oP);

2.节点类型             nodeType       nodeName       nodeValue 元素节点       1             大写的标签名      null 文本节点       3             #text          文本内容 注释节点       8             #comment       注释内容 document节点  9              #document       null

var oUl=document.getElementsByTagName('ul')[0];    //var aChild=oUl.childNodes;//childNodes:子节点    var aChild=oUl.nextchildren;    //console.log(aChild[1].nodeValue)    console.log(aChild.length)

3.节点关系 parentNode  父节点 --兼容 childNodes  子节点  --兼容：问题他能拿到所有的子节点：元素节点，注释节点。。。 children  子元素-但不兼容 previousSibling 上一个哥哥节点（哥哥节点：元素节点，注释节点，document节点，文本节点） nextSibling 下一个弟弟节点 firstChild 第一个子节点 lastChild  最后一个子节点

//getChildren：获取当前元素ul下所有的子元素；    /*    * 参数：当前元素    * 返回值：当前元素下的所有的子元素    * 1.思路：    * 1）拿到所有的子节点    * 2）判断所有的子节点，看谁的nodeType==1;符合要求的，被放入新数组；    * 3）返回数组；    * */    var oUl=document.getElementsByTagName('ul')[0];    var aLi=getChildren(oUl);    console.log(aLi.length)    function getChildren(curEle){        var ary=[];        var aChilds=curEle.childNodes; //拿到当前元素下所有的子节点        //判断所有的子节点，看谁的nodeType==1;符合要求的，被放入新数组；        for(var i=0; i

 

4.元素的动态操作： 1）元素的动态创建     动态创建：document.createElement(标签名)；     克隆：obj.cloneNode(布尔值) true：深度克隆 false：只克隆表面 2）元素的动态插入     父级.appendChild(要插入的元素); //把新元素插入到父容器的末尾；     父级.insertBefore(newEle,refEle); 3）元素的删除和替换     父级.removeChild(要删除的元素)  //在父容器下删除某个元素     父级.replaceChild(newEle,oldEle);//在父容器下用新元素替换旧元素； 5.attribute系列：     获取属性 obj.getAttribute('属性名')     设置属性 obj.setAttribute('属性名','属性值')     删除元素的属性，用obj.removeAttribute('属性名');

    
             
     
    
      
112343
     

5、. 和 [] 、 attribute  区别

　　1）在获取自定义属性的时候，点. 无法获取元素身上自定义属性，getAttribute可以获取元素身上的自定义属性。

　　2）在设置自定义属性的时候，点.设置的自定义属性可以用点获取，但在页面结构中看不到。setAttribute给元素设置的自定义属性可以在页面结构中看到

　　3）点. [] setAttribute 不能混合操作。