代码片段►JavaScript

利用forEach循环Dom元素

DOM，主要用来修改HTML的标准编程接口，可以用来修改各种html标签内容 和属性 样式。

查找：

document： 整个文档。 

1
document.getElementsByTagName
1
document.getElementById
1
document.getElementsByClassName
1
document.querySelector
1
document.querySelectorAll

遍历节点：

1
var div = document.getElementsByClassName('con')[0];

div.parentNode-> 父节点  (最顶端的parentNode为#document);
遍历元素：

div.children 遍历所有的子元素（孙子就不算）这就是一个对象，可以.length属性

获取节点类型：div.firstElementChild.nodeType

元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType

forEach是循环数组用的，但是它不能循环Dom元素。
可以利用call来完成forEach循环Dom;

假设有这样的HTML结构：

1
2
3
4
5
6
7
<ul class="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

点击上面的LI来输出自身的索引值，具体可看下面代码：

1
2
3
4
5
6
var arrLi = document.querySelector(".box").children;
Array.prototype.forEach.call(arrLi, function(ele, index) {
    ele.onclick = function() {
        alert(index)
    }
})

需要注意的是，在IE8及以下是不支持forEach的，所以我们需要做下兼容，使用以下方法：

1
2
3
4
5
6
7
8
9
10
// 兼容IE8以下浏览器方法：
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(fun) {
        for (var i = 0; i < this.length; i++) {
            if (i in this) {
                fun.call(arguments[1], this[i], i, this);
            }
        }
    };
}