元素获取所有子节点

发表于 | 分类于 | 阅读次数:

使用原生javascript获取元素的所有元素子节点的方法详细介绍

1利用childrenNodes的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 实现思路：
// 通过childNodes获取到所有的子节点；
// 将上述所有的子节点中，元素节点获取出来。
/**
 * [getChildren 获取子元素]
 * @param  {[type]} parent [父节点]
 * @return {[type]}        [返回parent的所有子元素]
 */
function getChildren(parent) {
	// 存储结果集
	var ret = [],
		nodes;
	// 获取parent所有子节点
	nodes = parent.childNodes;
	// 遍历nodes
	for(var i = 0,l = nodes.length; i < l;i++){
		// 如果遍历到当前子节点类型为元素，即为所要结果。存储在ret内。
		if(nodes[i].nodeType === 1) {
			ret.push(nodes[i]);
		}
	}
	// 返回结果
	return ret;
}

2利用firstChild和nextSibling方法实现(推荐)

-比起childNodes可以减少一些性能问题,jquery中使用的也是这种方法.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getChildren(parent) {
			var ret = [],
				elem = parent.firstChild;
			// 遍历parent所有子节点
			// 如果有子节点
			while(elem){
				// 并且节点类型为元素。存储在ret内
				if(elem.nodeType === 1) ret.push(elem);
				// 更新循环标量
				// 赋值为下一个兄弟节点
				elem = elem.nextSibling;
			}
			// 返回结果
			return ret;
		}

3也可以将第二种方法中的while循环改成for循环

1
2
3
4
5
6
7
8
9
10
function getChildren(parent) {
			var ret = [],
				elem = parent.firstChild;
			for(; elem ; elem = elem.nextSibling){
				if(elem.nodeType === 1) ret.push(elem);
			}
			return ret;
		}