DOM选择器,节点类型

<div id='only'></div>
    <div class="mm"></div>
    <div class="kk"></div>
    <input name="frui" />
    <div>
        <span>
        <strong class="demo"></strong>
        </span>
    </div>
    <script type="text/javascript">
        //通过id获取
        var div = document.getElementById('only');//在ie8一下的浏览器,不区分id大小写而且也返回匹配name属性的元素
        var div2 = document.getElementsByTagName('div')[0];//把页面所有的div拿出来
        var div3 = document.getElementsByClassName('mm','kk');//类名->ie8和ie8以下的ie版本中没有,可以多个class一起
        var div4 =document.getElementsByName('frui')[0];//需注意,只有部分标签name可生效(表单,表单元素,img,iframe)
        var div5 = document.querySelector('div > span strong.demo');//css选择器
        // 在ie7以下版本中没有 query选出来的是副本是静态的而getElement是实时的
        var div6 = document.querySelectorAll('div > span strong.demo');
            
    </script>

遍历节点树

parentNode 父节点(最顶端的parentNode为#document);
childNodes 子节点们
firstChild 第一个子节点
lastChild 最后一个字节点
nextSibling 后一个兄弟节点 previousSibling 前一个兄弟节点

基于元素节点树的遍历

parentElement 返回当前元素的父元素节点(IE不兼容ie9以下)
children 只返回当前元素的元素子节点
node.childElementCount === node.children.length当前元素节点的子元素节点的个数
firstElementChild 返回的是第一个元素节点(IE不兼容)
lastElementChild 返回的时最后一个元素节点(IE不兼容)
nextElementSibling/previousElementSibling 返回后一个/前一个兄弟元素节点

节点的类型

元素节点------1
属性节点-----2
文本节点------3
注释节点-----8
document ---9
DocumentFragment---11
过去节点类型 nodeType

节点的四个属性

nodeName 元素的标签名,以大写形式表示,只读
nodeValue Text节点或comment节点的文本内容,可读写
nodeType该节点的类型,只读
attributes Element节点的属性集合
节点的一个方法 Node.hasChildNodes();判断有没有子节点

通过使用childNodes获取元素节点

var div =document.getElementsByTagName('div')[0];
        function retElementChild(node){
            //no children
            var temp = {
                length : 0,
                push : Array.prototype.push,
                splice : Array.prototype.splice
             },
             child=node.childNodes,
             len= child.length;
            for(var i=0;i<len;i++){
                if(child[i].nodeType ===1 ){
                    temp.push(child[i]);
                }
            }
            return temp;
        }
        console.log(retElementChild(div));

    Element.prototype.isclid=function (ww){
            var child=ww.children,
                len=child.length,
                tmpe={length : 0,push : Array.prototype.push,
                splice : Array.prototype.splice};
                for(var i=0;i<len;i++){
                    if(child[i].hasChildNodes()){
                        tmpe.push(arguments.callee(child[i]));
                    }
                    tmpe.push(child[i]);
                    
                }
                return tmpe;
        }
        
        var div = document.getElementsByTagName('div')[0];
        console.log(div.isclid(div));

获取第几个父级

function retParent(elem, n) {
                while (elem && n) {
                    elem = elem.parentElement;
                    n--;
                }
                return elem;
            }
            var i = document.getElementsByTagName('i')[0];
            console.log(retParent(i, 20));