<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档对象模型</title>
<!--//通过dom获取元素对象的方法(五种)-->
</head>
<body>
<div>
<span>李太白</span>
<span id="libai"></span>
<span class="bt"></span>
</div>
<form action="">
<input type="text" name="username">
<input type="text" name="nickname">
<input type="password" name="pwd">
</form>
<!--第一种:通过标签获取元素对象-->
<script>
var spanArr=document.getElementsByTagName("span");
console.log(spanArr);
//获取某一下标的具体对象
console.log(spanArr[2]);
// 第二种:通过ID获取元素对象
var span1=document.getElementById("libai");
console.log(span1);
// 第三种:通过class获取元素对象:这里存在一个问题就是这个获取的可能是
//一组class对象,所以返回值是数组,那个是一个对象的数组,
//所以按照数组的处理方式来处理
var span2=document.getElementsByClassName("bt");
console.log(span2[0]);
// 第四种方法:通过name属性来获取元素对象
var nickarr=document.getElementsByName("nickname");
console.log(nickarr[0]);
// 第五种方式:通过父类元素获取子类元素对象
// 先获取父类对象
var fathertag=document.getElementsByTagName("div")[0];
var spansarray=fathertag.getElementsByTagName("span");
console.log(spansarray);
//遍历对象数组的元素
for(var i=0;i<spansarray.length;i++){
console.log(spansarray[i]);
}
</script>
</body>
</html>