您的位置：首页 > Web前端 > JavaScript

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

2017-05-28 20:05 627 查看
在《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>


输出结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 函数 dom
相关文章推荐
新的分享
章节导航