JS初级获取元素的第二种方法_js如何查询 li第二个元素-优快云博客

本文链接：https://blog.youkuaiyun.com/jiajia199470/article/details/52871999

本文介绍了两种常见的DOM元素获取方法：通过ID获取元素和通过标签名获取元素集合，并提供了具体的代码示例，展示了如何使用这些方法进行页面元素的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1-1 第一种获取元素的方法：静态方法

#list {} var oUl = document.getElementById('list');

1-2 第二种获取元素的方法：动态方法

li {} document.getElementsByTagName('li');

#list li {} var aLi = oUl.getElementsByTagName('li');
// aLi => [ li, li, li ] 元素的集合
aLi.length 3
aLi[0]

// 在用 TagNasme 的时候，必须要加上：[]

1-3-1代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function (){
   // var oUl = document.getElementById('list');
   var oUl = document.getElementsByTagName('ul')[0];
   var aLi = oUl.getElementsByTagName('li');
   
   // document.getElementsByTagName('li');
   
   // alert( aLi.length );
};
</script>
</head>

<body>

<ul id="list">
   <li></li>
   <li></li>
   <li></li>
</ul>

<ol>
   <li></li>
   <li></li>
</ol>

</body>
</html>

1-3-2代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
window.onload = function (){
   // document.title = 123;
   // document.body.innerHTML = 'abc';
   var aBtn = document.getElementsByTagName('input');
   
   // alert(aBtn.length);
   
   document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />';
   
   // alert(aBtn.length);
   aBtn[0].onclick = function (){ alert(1); };
   aBtn[1].onclick = function (){ alert(1); };
   aBtn[2].onclick = function (){ alert(1); };
   
   // 重复执行某些代码
   // 每次执行的时候，有个数字在变化
};
</script>

</head>

<body>
</body>
</html>