版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wgf5845201314/article/details/90668901
JavaScript获取元素的方法
本节课所讲内容：
- JavaScript 获取元素的方法
2.循环的应用
主讲教师：Head老师
一. JavaScript 获取元素的方法
<!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>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById("list");
//alert(oUl.length);
var oUl = document.getElementsByTagName("li");
//alert(oUl.length); //返回 8
var oInput = document.getElementsByTagName("input");
alert(oInput.length);
/*注：类似这种getElementsByTagName("li")
含Elements的,要声明拿取哪个元素节点
*/
oInput[0].onclick=function(){
alert("请填写内容！");
}
oInput[1].onclick=function(){
alert("请填写内容！");
}
}
</script>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<input type="text">
<input type="text">
</body>
</html>二.循环的应用
<!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>for 循环的应用</title>
</head>
<body>
<ul id="list">
<li id='li1'></li>
<li></li>
<li></li>
</ul>
<script>
window.onload=function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
// alert(aLi[0].id);
var arr = ['Head','teacher','school'];
var len = arr.length;
for(var i=0;i<len;i++){
aLi[i].innerHTML=arr[i];
};
}
</script>
</body>
</html>