DOM扩展_元素遍历

最新推荐文章于 2021-12-23 10:44:55 发布

荆莿鸟的绝唱

最新推荐文章于 2021-12-23 10:44:55 发布

阅读量510

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/only_Love_Strangers/article/details/47073693

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>DOM扩展_元素遍历</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			/*
			对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他的浏览器都会返回文本节点。
			这样导致了使用childNodes和firstChild等属性是行为不一样。为了弥补这一差异，而同时又
			保持DOM规范不变。Element Traversal规范（www.w3.org/TR/ElementTraversal/）新定义的一
			组属性。
				Element Traversal API为DOM元素添加了以下5个属性。
				childElementCount:返回子元素(不包括文本节点和注释)的个数。
				firstElementChild:指向第一个元素；firstChild的元素版。
				lastElementChild:指向最后一个元素；lastChild的元素版。
				previousElementSibling:指向前一个同辈元素；previousSibling的元素版。
				nextElementSibling:指向后一个同辈元素nextSibling的元素版本。
				支持的浏览器的DOM元素添加了这些属性，利用这些元素不必担心空白节点，从而可以更方便
				查找DOM元素了。
				
				下面遍历元素的兼容性代码
			*/	   
				window.onload = function(){
	
				var element = document.querySelector("#element");
				var i,len,
					child = element.firstElementChild;
				while(!!child){
					alert(child.firstChild.nodeValue);
					//processChild(child);//处理该元素方法
					child = child.nextElementSibling;
				}
				//支持Element Traversal规范的浏览器有IE9+、Firefox3.5+、safari4+、Chrome和Opera10+。
			}
		</script>
	</head>
	<body>
		<ul id = 'element'>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>

荆莿鸟的绝唱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM扩展_元素遍历

DOM扩展_元素遍历 /* 对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他的浏览器都会返回文本节点。这样导致了使用childNodes和firstChild等属性是行为不一样。为了弥补这一差异，而同时又保持DOM规范不变。Element Traversal规范（www.w3.org/TR/ElementTraversal/）新定义的一组
复制链接

扫一扫