数组 - Dom对象列表 ¶

本文导航

通过标签名称获取Dom对象
通过class名字获取

作者：KK
发表日期：2016.2.25

通过标签名称获取Dom对象 ¶

以前我们的实例中要操作一个标签的内容变化就要先用document.getElementById方法取得Dom元素对象

其实要获取Dom元素对象并不只能通过那个方法来获取,也可以尝试其它方法,下面的例子使用document.getElementsByTagName来获取:

<html>
</head>
<meta charset="UTF-8">
<title>获取所有相同标签</title>
<script>
window.addEventListener('load', function(){
	var links = document.getElementsByTagName('a'); //通过标签名获取元素,标签名叫a
	if(links == null){
		return; //找不到指定的标签,你试试将上面的a改成div就会找不到了
	}
	alert('一共取得' + links.length + '个a标签元素对象');
	for(var i = 0; i < links.length; i++){
		var tag = links[i];
		alert('第' + (i + 1) + '个a标签的内容是:"' + tag .innerHTML + '"\n它的链接是:"' + tag.href + '"');
	}
});
</script>
</head>
<body>
	<a href="http://www.kkh86.com/it/index.html">野生程序员的成长之路</a>
	<a href="http://www.kkh86.com/it/codeception/guide-README.html">PHP-Codeception测试开发</a>
	
	<p>
		<a href="http://www.kkh86.com/it/web-debug/guide-README.html">Web开发调试技巧分享</a>
	</p>
</body>
</html>

注意到了吗,它说有3个a标签,意味着p标签里包住的也给取出来了,因为getElementsByTagName是遇到参数所指的标签名就都会将它取出来的,就算标签名写成大写也依然取出来(比如<A href=...>)

注意一下document对象的这两个方法的区别:

getElementById:根据ID获取一个DOM对象并返回
getElementsByTagName:注意By前面多了个s,是getElements..而不是上面那样只是getElement..,多了s就是复数,所以这个方法返回的并不是一个对象,而是很多个对象,这些对象都在一个数组里面,如果在网页元素中找不到这个元素的标签就会返回空数组

通过class名字获取 ¶

就是把所有class属性值相同的标签都取出来

<html>
</head>
<meta charset="UTF-8">
<title>获取所有相同标签</title>
<script>
window.addEventListener('load', function(){
	var spans = document.getElementsByClassName('name'); //通过class获取元素
	alert('找到' + spans.length + '个class="name"的标签,内容分别是:');
	for(var i = 0; i < spans.length; i = i + 1){
		alert(spans[i].innerHTML);
	}
});
</script>
</head>
<body>
	<span class="name">小明</span>
	<span class="age">18岁</span>
	
	<p>
		<span class="name">小红</span>
	</p>
</body>
</html>

注意，这里class="age"的岁数标签并没有被取出呢