今天给大家带来的遍历节点，分为遍历节点树和遍历元素节点树

1.遍历节点树

parentNode　　　　获取父节点

childNodes　　　　 获取子节点

firstChild　　　　　 获取第一个子节点

lastChild　　　　　 获取最后一个子节点

nextSibling　　　　获取下一个兄弟节点

previousSibling　　 获取上一个兄弟节点

好，方法很简单，一目了然，既然看懂了，我们来看一下这个简单的HTML结构，来检验一下，你对节点数的理解

前端节点 demo 前端节点操作_html

　　var div = document.getElementsByTagName("div")[0];
        var strong = document.getElementsByTagName("strong")[0];
        console.log(strong.parentNode);
        // 结果显而易见，strong的父节点是div，div的父节点是body，在body之上是html，而html之上便是#document,#document也是最顶端
        console.log(div.childNodes);
        // 上面的console结果是[text, strong, text, span, text, div, text]，咦，怎么会是7个呢，稍等我们再看下childNodes的长度
        console.log(div.childNodes.length);
        // 哎呀，真的是7啊，对，没错就是7，下面我来解释下长度为什么是7，而不是3
        1.从<div>到<strong>是第一个节点，属于文本节点，也就是上面的text
        2.<strong>到</strong>是第二个节点，属于元素节点
        3.</strong>到<span>是第三个节点，属于文本节点
        4.<span>到</span>是第四个节点，属于元素节点
        5.</span>到<div>是第五个节点，属于文本节点
        6.<div>到</div>是第六个节点，属于元素节点
        7.</div>到</div>是第七个节点，属于文本节点
        所以说，这样的话，当我们console.log(div.firstChild)结果会是text，也就是上面的序号1

　　console.log(div.childNodes[1]);得到的才是strong节点

2.遍历元素节点树

parentElement　　　　父元素节点

children　　　　　　　子元素节点

firstElementChild　　　第一个子元素节点

lastElementChild　　　最后一个子元素节点

nextElementSibling　　下一个兄弟元素节点

previousElementSibling　　上一个兄弟节点

仍然是使用上面的HTML结构

　　var div = document.getElementsByTagName("div")[0];
        var strong = document.getElementsByTagName("strong")[0];
        console.log(div.children);

　　 // 上面的console结果是[strong, span, div]，这次得到的便是我们想要的，只有元素节点

元素节点固然好用，但是除了children以外，其余五种在IE9以下是不支持的。

3.节点的四个属性

nodeName　　　　元素的标签名，只读

nodeValue　　　　Text节点和comment节点的文本内容,可读可写

nodeType　　　　  该节点的类型，只读

attributes　　　　　Element节点属性的集合

上面的四种属性，使用频率最多的那便是nodeType,使用这个属性，需要了解以下知识

节点类型分：元素节点-------1

　　　　　　属性节点-------2

　　　　　　文本节点-------3

　　　　　　注释节点-------8

　　　　　　document-------9

　　　　　　DocumentFranment-------11

对，没错，nodeType返回的是该节点对应的数值，通过该数值，我们可以知道这个节点属于什么节点

例，在不使用children的情况下，得到以下html结构的元素节点的集合

function getChild(target){
            // 构造了一个类数组，这里是为了给大家先普及下类数组，后期会详细讲解
            var temp = {
                    lenght: 0,
                    push: Array.prototype.push,
                    splice: Array.prototype.splice
                },
                child = target.childNodes,
                len = child.length;
            for(var i=0;i<len;i++){
                if(child[i].nodeType === 1){
                    temp.push(child[i]);
                }
            }
            return temp;
        }
        console.log(getChild(div));

通过以上程序，可实现得到某对象的子元素节点。

以上有问题之处，请大家多多批评指正。