最近遇到一个关于查找元素的问题，有的时候单独使用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>因为id属性在html文档的唯一性，所以可能只规定了document.getElementById()方法去获取含id的标签。（可以直接获取，也没必要复合查找）
2138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
