1、依据id 标签属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="ttt" class="z">
<span>郑州大学</span><i>河南工业大学</i>
</div>
<script>
var element=document.getElementById("ttt");
console.log(element);
</script>
</body>
</html>
结果:
2、依据class标签属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="ttt" class="z">
<span>郑州大学</span><i>河南工业大学</i>
</div>
<p class="z">黄河水</p>
<p class="z">黄河水</p>
<script>
var elements=document.getElementsByClassName("z");
for (var i=0;i<elements.length;i++) {
console.log(elements[i]);
}
</script>
</body>
</html>
结果:
3、依据name标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p class="z">黄河水</p>
<p class="z">黄河水</p>
<script>
var elements=document.getElementsByTagName("p");
for (var i in elements) {
console.log(elements[i]);
}
</script>
</body>
</html>
结果:加强循环与循环输出有所不同
4、依据标签名字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>乒乓球
<script>
var elements=document.getElementsByName("hobby");
for (var i in elements) {
console.log(elements[i]);
}
</script>
</body>
</html>
结果: