dom操作下的节点树属性以及内方法的重写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//遍历节点数
		//parenNode -> 父节点(最顶端的parentNode为#document);
		//childNodes -> 子节点们
		//firstChild -> 第一个子节点
		//lastChild -> 最后一个子节点
		//nextSibing -> 最后一个兄弟节点
		//previousSibing -> 前一个兄弟节点

		//基于元素节点数的遍历
		//parentElement -> 返回当前元素的父元素节点(IE不兼容)
		//children -> 只返回当前元素的元素子节点
		//node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE不兼容)
		//firstElementChild -> 返回的是第一个元素节点(IE不兼容)
		//lastElementChild -> 烦恼会的事最后一个元素节点(IE不兼容)
		//nextElementSibing / previousElementSibing -> 返回后一个 / 前一个兄弟元素节点(IE不兼容)

		//节点的四个属性
		//nodeName
			//元素的标签名,以大写形式表示,只读
		//nodeValue
			//Text节点或Comment节点的文本内容,可读写(只有文本节点和注释节点含有)
		//nodeType
			//该节点的类型,只读(*)
		//attributes
			//Element节点的属性集合

		//节点的一个方法 Node.hasChildNodes();


		//调用节点的nodeType返回的值
		//节点的类型		返回的值
			//元素节点 ---- 1
			//属性节点 ---- 2 (基本上没啥用)
			//文本节点 ---- 3
			//注释节点 ---- 8
			//document ---- 9
			//DocumentFragment ---- 11



	</script>
</head>
<body>
	<div>
	<span>	 </span>
	
	<em></em>
	</div>
	<script>
		
					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 < len; i++) {
					if (child[i].nodeType === 1) {
						temp.push(child[i]);
					}
				}
				return temp	;

			}

			console.log(retElementChild(div));
	</script>
</body>
</html>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值