在《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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
输出结果：
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
输出结果：
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
输出结果：
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
输出结果：
