<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通过别的元素找里面的一些元素</title>
<!--
document来调用找元素的那些方法代表找到这整个页面里所有匹配的元素
A元素来调用找元素的那些方法代表找到A元素下面所有匹配的元素
getElementById只能通过document来调用，其他元素不能调用会报错
-->
</head>
<body>
<ul id="ul1">
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li class="four">隔壁老王4</li>
<li>隔壁老王5</li>
<li id="li6">隔壁老王6</li>
<li>隔壁老王7</li>
<li>隔壁老王8</li>
<li>隔壁老王9</li>
<li>隔壁老王10</li>
</ul>
<ul>
<li>隔壁老周1</li>
<li>隔壁老周2</li>
<li>隔壁老周3</li>
<li class="four">隔壁老周4</li>
<li>隔壁老周5</li>
<li>隔壁老周6</li>
<li>隔壁老周7</li>
<li>隔壁老周8</li>
<li>隔壁老周9</li>
<li>隔壁老周10</li>
</ul>
<script>
// 通过document来调用代表找到这个页面中所有匹配的元素
// var liList = document.getElementsByTagName('li');
// console.log(liList);
//找到第一个ul里的所有的li
// var ul1 = document.getElementById('ul1');
// var liList = ul1.getElementsByTagName('li');
// console.log(liList);
// var list = document.getElementsByClassName('four');
// console.log(list);//找到2个
// var list = ul1.getElementsByClassName('four');
// console.log(list);//找到1个
var li6 = ul1.getElementById('li6'); //这里会报错
console.log(li6);
// getElementById只能通过document来调用，其他元素不能调用会报错
</script>
</body>
</html>
网友评论