DOM选择器,节点类型

遍历节点树

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

    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

获取第几个父级

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