HTML DOM文檔對(duì)象查找元素的方法

2019.11.15

關(guān)注

2018-09-03 10:24:21

版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/wd2011063437/article/details/80987809

一、HTML DOM 節(jié)點(diǎn)

在 HTML DOM (Document Object Model) 中 , 每一個(gè)元素都是節(jié)點(diǎn):

文檔是一個(gè)文檔節(jié)點(diǎn)。
所有的HTML元素都是元素節(jié)點(diǎn)。
所有 HTML 屬性都是屬性節(jié)點(diǎn)。
文本插入到 HTML 元素是文本節(jié)點(diǎn)。
注釋是注釋節(jié)點(diǎn)。

二、Document 對(duì)象

當(dāng)瀏覽器載入 HTML 文檔, 它就會(huì)成為 Document 對(duì)象。
　　Document 對(duì)象是 HTML 文檔的根節(jié)點(diǎn)。
　　Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪問(wèn)。
　　提示：Document 對(duì)象是 Window 對(duì)象的一部分，可通過(guò) window.document 屬性對(duì)其進(jìn)行訪問(wèn)。

三、HTML DOM 定義的查找對(duì)象的方法

HTML文檔常見(jiàn)的方法:

getElementsByName()
getElementsByTagName()
getElementsByClassName()
getElementById()

（一）、getElementsByName()

1、定義和用法
　　getElementsByName() 方法可返回帶有指定名稱(chēng)的對(duì)象的集合。

2、語(yǔ)法
　　document.getElementsByName(name)

3、參數(shù)
　　name 必須。元素的名稱(chēng)。

4、實(shí)例

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>getElementsByName()實(shí)例</title>	<script>		function getElements(){			var f=document.getElementsByName("fruit");			alert(f.length);		}	</script></head><body>	蘋(píng)果:<input name="fruit" type="radio" value="蘋(píng)果">	香蕉:<input name="fruit" type="radio" value="香蕉">	<input type="button" onclick="getElements()" value="name為 'fruit'的元素?cái)?shù)量?"></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5、效果圖

（二）、getElementsByTagName()

1、定義和用法
　　getElementsByTagName() 方法可返回帶有指定標(biāo)簽名的對(duì)象的集合。
　　提示：參數(shù)值 “*” 返回文檔的所有元素。

2、語(yǔ)法
　　document.getElementsByTagName(tagname)

3、參數(shù)
　　tagname String 必須。你要獲取元素的標(biāo)簽名。

4、返回值
　　NodeList 對(duì)象指定標(biāo)簽名的元素集合

5、實(shí)例

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>getElementsByTagName()實(shí)例</title></head><body>	<p id="demo">單擊按鈕來(lái)改變這一段中的文本。</p>	<button onclick="myFunction()">點(diǎn)我</button>	<script>		function myFunction(){			document.getElementsByTagName("P")[0].innerHTML="Hello World";		};	</script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6、效果
　單擊按鈕前：

單擊按鈕后：

（三）、getElementsByClassName()

1、定義和使用
　　getElementsByClassName() 方法返回文檔中所有指定類(lèi)名的元素集合，作為 NodeList 對(duì)象。NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象我們可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪問(wèn)列表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始)。
　　提示：你可以使用 NodeList 對(duì)象的 length 屬性來(lái)確定指定類(lèi)名的元素個(gè)數(shù)，并循環(huán)各個(gè)元素來(lái)獲取你需要的那個(gè)元素。
　　注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

2、語(yǔ)法
　　document.getElementsByClassName(classname)

3、參數(shù)
　　classname String 必須。你需要獲取的元素類(lèi)名。
　　多個(gè)類(lèi)名使用空格分隔，如 “test demo”。

4、實(shí)例

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>getElementsByClassName()實(shí)例</title>	<style>		div {		    border: 1px solid black;		    margin: 5px;		}		.example {		    border: 1px solid black;		    margin: 5px;		}	</style></head><body><h1>實(shí)例一</h1><div class="nocolor">	<p>P 元素在在第一個(gè)樣式為 class="example" 的 Div 元素中。Div 的索引值為 0。</p></div><div class="color red">	<p>P 元素在在第一個(gè)樣式為 class="example color" 的 Div 元素中。Div 的索引值為 0。</p></div><div class="color yellow">	<p>P 元素在在第二個(gè)樣式為 class="example color" 的 Div 元素中。Div 的索引值為 1。</p></div><p>點(diǎn)擊按鈕修改第一個(gè)類(lèi)為 "example" 的 div 元素的背景顏色。</p><p>獲取到的對(duì)象的長(zhǎng)度（數(shù)量）：<span id="demo"></span></p><hr/><h1>實(shí)例二</h1><div class="example">樣式 class="example" 的 Div 元素</div><div class="example">另外一個(gè)樣式 class="example" 的 Div 元素</div><p class="example">樣式為 class="example" 的 p 元素。</p><p>這是一個(gè)插入在 p 元素中樣式 class="example" 的<span class="example">span</span> 元素 。</p><p>點(diǎn)擊按鈕修改所有樣式 class="example" 的背景顏色。</p><button onclick="myFunction()">點(diǎn)我</button><p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p><script>	function myFunction() {	    var x = document.getElementsByClassName("color");	    x[0].style.backgroundColor = "red";		x[1].style.backgroundColor = "yellow";		document.getElementById("demo").innerHTML = x.length;				//for循環(huán)改變		var x = document.getElementsByClassName("example");	    var i;	    for (i = 0; i < x.length; i++) {	        x[i].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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

5、效果圖
單擊按鈕前：

單擊按鈕后：

（四）、getElementsById()

1、定義和使用
　　getElementsByClassName() 方法返回文檔中所有指定類(lèi)名的元素集合，作為 NodeList 對(duì)象。
　　NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象我們可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪問(wèn)列表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始)。
　　提示：你可以使用 NodeList 對(duì)象的 length 屬性來(lái)確定指定類(lèi)名的元素個(gè)數(shù)，并循環(huán)各個(gè)元素來(lái)獲取你需要的那個(gè)元素。

2、方法
　　getElementsById()

3、語(yǔ)法
　　document.getElementsById(id)

4、參數(shù)
　　id String 必須。你需要獲取的元素id。

5、實(shí)例

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<title>getElementById()</title></head><body>	<p id="demo">單擊按鈕來(lái)改變這一段中的文本。</p>	<button onclick="myFunction()">點(diǎn)我</button>	<script>		function myFunction(){			document.getElementById("demo").innerHTML="Hello World";		};	</script></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16