文章目录
1.通过id获取(getElementById())
返回对拥有指定 id 的第一个对象的引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="do" value="do"/>
<input id="on" value="on"/>
<script>
var element = document.getElementById("do");//该语句不能写在id为do的语句的前面,否则先执行该语句此时还没有id为do的语句,输出为null
console.log(element);//将id为do的语句内包含的内容全部输出
</script>
</body>
</html>
由于id是唯一的,故此时只能获取到一个element对象
2.通过那么获取(getElementsByName())
返回带有指定名称的对象集合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<script>
var elements = document.getElementsByName("sex");//获取标签属性name为sex的所有标签及标签内的内容
for(i=0;i<elements.length;i++){//由于name相同的可以有很多个,故获取到的是一个集合,用for循环遍历
console.log(elements[i]);//i下标表示第几个元素
}
</script>
</body>
</html>
由于name相同的可以有很多个,故获取到的是一个集合
3.通过标签名获取(getElementsByTagName())
返回带有指定标签名的对象集合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<input type="button" value="按钮" />
<script>
var elements = document.getElementsByTagName("input");//获取标签名为input的所有标签及标签内的内容
for(i=0;i<elements.length;i++){//由于标签名相同的可以有很多个,故获取到的是一个集合,用for循环遍历
console.log(elements[i]);//i下标表示第几个元素
}
</script>
</body>
</html>
由于标签名相同的可以有很多个,故获取到的是一个集合
4.通过class标签属性获取(getElementsByClassName())
返回带有指定class标签属性的对象集合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input class="a" type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<div class="a"></div>
<script>
var elements = document.getElementsByClassName("a");//获取class属性为a的所有标签及标签内的内容
for(i=0;i<elements.length;i++){//由于Class标签属性值相同的可以有很多个,故获取到的是一个集合,用for循环遍历
console.log(elements[i]);//i下标表示第几个元素
}
</script>
</body>
</html>