getElementById、getElementsByTagName、getElementsByClassName复合使用浅析

最近遇到一个关于查找元素的问题,有的时候单独使用getElementById、getElementsByTagName、getElementsByClassName并不足以找到需要的元素,于是我就查找并检测了其复合使用的情况于此记录,以便日后自己使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>getElementsByTagName</title>
</head>
<body>
	<div class="box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<div id="content">
			<ul class="con">
				<li>11</li>
				<li>22</li>
				<li id="li3">33</li>
			</ul>
			<div></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var content = document.getElementById('content');
	var lis = document.getElementsByTagName('li');
	var box = document.getElementsByClassName('box');
	console.log(content);
	console.log(lis);
	console.log(box);
	var lis2 = box[0].getElementsByTagName('li');
	console.log("类.标签",lis2);//类.标签HTMLCollection(8) [li, li, li, li, li, li, li, li#li3, li3: li#li3]
	var lis3 = content.getElementsByTagName('li');
	console.log("id.标签",lis3);//id.标签HTMLCollection(3) [li, li, li#li3, li3: li#li3]
	var divs = content.getElementsByTagName('div');
	console.log("id.标签",divs);//id.标签HTMLCollection [div]
	var con = content.getElementsByClassName('con');
	console.log("id.类",con);//id.标签HTMLCollection [ul.con]
	var con2 = box[0].getElementsByClassName('con');
	console.log("类.类",con2);//类.类HTMLCollection [ul.con]
	var con3 = content.getElementById('li3');
	console.log("id.id",con3);//报错
	var content2 = box[0].getElementById('content');
	console.log("类.id",content2);//报错
</script>
</html>
xx.id报错具体原因暂时没有查到,以下为我推测:
因为id属性在html文档的唯一性,所以可能只规定了document.getElementById()方法去获取含id的标签。(可以直接获取,也没必要复合查找)


猜你喜欢

转载自blog.csdn.net/lyxuefeng/article/details/80751636
今日推荐