getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别

本文主要是介绍getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在《Javascript DOM 编程艺术》与 W3school 中是这样定义的：

getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。

下面这个案例我是想通过触发test()函数后，给一个id为“div1”的div层添加背景色为黄颜色。

<!DOCTYPE html>
<html>
<head><title>shopping list</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/css.css" rel="stylesheet" type="text/css">
</head><h1>what to buy</h1><P title="a gentle reminder">Don't forget to buy this stuff.</P><ul id="purchases"><li>A tin of beans</li><li class="sale">Cheese</li><li class="sale important">milk</li></ul><div id="div1">helloworld</div><input type="button" value="按钮" onclick="test()"/><script>function test(){document.getElementById("div1").style.backgroundColor="yellow";}</script>
</body>
</html>

输出结果：

这里写图片描述

getElementsByName():方法可返回带有指定名称的对象的集合。

这个案例是为获取无序列表中名字name叫“t”的li 的长度。

<!DOCTYPE html>
<html>
<head><title>shopping list</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/css.css" rel="stylesheet" type="text/css">
</head><h1>what to buy</h1><P title="a gentle reminder">Don't forget to buy this stuff.</P><ul id="purchases"><li name="t">A tin of beans</li><li name="t" class="sale">Cheese</li><li name="t" class="sale important">milk</li></ul><div id="div1">helloworld</div><input type="button" value="按钮" onclick="test()"/><script>function test(){alert(document.getElementsByName("t").length);}</script>
</body>
</html>

输出结果：

这里写图片描述

getElementsByTagName():方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。这个理解起来有点拗口。
W3school中是这样定义的：此方法可返回带有指定标签名的对象的集合。

下面这个我是要获得script标签的长度

<!DOCTYPE html>
<html>
<head><title>shopping list</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/css.css" rel="stylesheet" type="text/css">
</head><h1>what to buy</h1><P title="a gentle reminder">Don't forget to buy this stuff.</P><ul id="purchases"><li name="t" class="sale">A tin of beans</li><li name="t" class="sale">Cheese</li><li name="t" class="sale important">milk</li></ul><div id="div1">helloworld</div><input type="button" value="按钮" onclick="test()"/><script>function test(){alert(document.getElementsByTagName("script").length);}</script>
</body>
</html>

输出结果：

这里写图片描述

getElementsByClassName():方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

下面这个是要设置class=”sale”且数组下标为：1的li的背景色为：red

<!DOCTYPE html>
<html>
<head><title>shopping list</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/css.css" rel="stylesheet" type="text/css">
</head><h1>what to buy</h1><P title="a gentle reminder">Don't forget to buy this stuff.</P><ul id="purchases"><li name="t" class="sale">A tin of beans</li><li name="t" class="sale">Cheese</li><li name="t" class="sale important">milk</li></ul><div id="div1">helloworld</div><input type="button" value="按钮" onclick="test()"/><script>function test(){var x=document.getElementsByClassName("sale");x[1].style.backgroundColor="red";}</script>
</body>
</html>