获取HTML元素所对应的javascript对象
一、getElementById()：返回对拥有指定 id 的第一个对象的引用，id是唯一的，因此返回是单个的
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
<div id="footer"><input class="a" type="button" value="按钮" onclick="test();"></div>
<input class="a" type="checkbox" name="hobby" value="0" /> 足球
<input type="checkbox" name="hobby" value="1" /> 乒乓球
<input type="checkbox" name="hobby" value="2" /> 篮球
<script>
var element = document.getElementById("header");//获得id=header的标签的HTML元素
console.log(element);
</script>
</body>
</html>运行结果：确实得到了id=header的标签的HTML元素
二、getElementsByTagName():返回带有指定标签名的对象集合
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
<div id="footer"><input class="a" type="button" value="按钮" onclick="test();"></div>
<input class="a" type="checkbox" name="hobby" value="0" /> 足球
<input type="checkbox" name="hobby" value="1" /> 乒乓球
<input type="checkbox" name="hobby" value="2" /> 篮球
<script>
var elements = document.getElementsByTagName("div")//通过标签名获取HTML元素，是多个，因此elements是返回带有指定标签名的对象集合
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
</script>
</body>
</html>运行结果：确实得到了标签名为div的HTML元素
三、getElementByName():返回带有指定名称的对象集合，可以用来获取单选框和复选框HTML元素
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
<div id="footer"><input class="a" type="button" value="按钮" onclick="test();"></div>
<input class="a" type="checkbox" name="hobby" value="0" /> 足球
<input type="checkbox" name="hobby" value="1" /> 乒乓球
<input type="checkbox" name="hobby" value="2" /> 篮球
<script>
var elements = document.getElementsByName("hobby")
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
</script>
</body>
</html>
运行结果：得到了所有name=hobby的元素
四、getElementByClassName():返回带有指定class的对象集合
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
<div id="footer"><input class="a" type="button" value="按钮" onclick="test();"></div>
<input class="a" type="checkbox" name="hobby" value="0" /> 足球
<input type="checkbox" name="hobby" value="1" /> 乒乓球
<input type="checkbox" name="hobby" value="2" /> 篮球
<script>
var elements = document.getElementsByClassName("a")
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
</script>
</body>
</html>
运行结果
