DOM节点的易错点

关于节点的问题

DOM节点类型

DOM一共有十二个节点，常用的节点有三个：

1.元素节点 属性值为1
2.属性节点 属性值为2
3.文本节点 属性值为3

更多DOM节点请参考: http://www.cnblogs.com/xiaohuochai/p/5785189.html

元素节点的相关问题

问题一：找元素节点却找到了文本节点

代码片段：

<div class="mui-card pop">
    <div class="mui-card-header mui-card-media" style="height:10vw;background-image:url(../images/cbd.jpg)"></div><div class="mui-card-content"><div class="mui-card-content-inner"><p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p></div></div>
    <div id="popover" class="mui-popover show" style="height: 200px; width: 300px; background: green;">

    </div>
</div>

<script type="text/javascript">
    var pop = document.getElementsByClassName("pop");
    console.log(pop[0].firstChild);
    alert(pop[0].firstChild);
</script>

原因：在标准浏览器中，会将空格或者换行作为文本节点，而在IE8和IE8以下浏览器中则忽略。

解决方案：

<script type="text/javascript">
    var pop = document.getElementsByClassName("pop");
    d = pop[0].firstChild;
    while(d.nodeType!=1){
        d = d.nextSibling;//nextSibling  同一级下一相邻节点
    }//用一个while循环找到第一个属性值为1的节点，即（元素节点）
    console.log(d);
    alert(d);
</script>

效果图：

相关链接: http://www.softwhy.com/article-2097-1.html