在HTML中获取JavaScript对象常用的有四种方法:
分别是通过id、类名、对象名、标签名来进行获取
本次演示四种获取方法的代码和执行结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="tt">
<span id="t">北京市</span>
<p>上海市</p>
</div>
<p>重庆市</p>
<b class="tt">
天津市
</b>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>乒乓球
<input type="checkbox" name="hobby"/>羽毛球
<script>
var element = document.getElementById("t");//通过id
console.log(element);
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
var elements = document.getElementsByClassName("tt");//通过类名
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
elements = document.getElementsByName("hobby");//通过对象名
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
elements = document.getElementsByTagName("p");//通过标签名
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
</script>
</body>
</html>
执行结果: