HTML DOM文檔對象查找元素的方法

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

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

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

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

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

二、Document 對象

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

三、HTML DOM 定義的查找對象的方法

HTML文檔常見的方法:

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

（一）、getElementsByName()

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

2、語法
　　document.getElementsByName(name)

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

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>
	蘋果:<input name="fruit" type="radio" value="蘋果">
	香蕉:<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)簽名的對象的集合。
　　提示：參數(shù)值 “*” 返回文檔的所有元素。

2、語法
　　document.getElementsByTagName(tagname)

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

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

5、實(shí)例

<!DOCTYPE html><html><head>
	<meta charset="utf-8">
	<title>getElementsByTagName()實(shí)例</title></head><body>
	<p id="demo">單擊按鈕來改變這一段中的文本。</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() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。NodeList 對象代表一個有順序的節(jié)點(diǎn)列表。NodeList 對象我們可通過節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號來訪問列表中的節(jié)點(diǎn)(索引號由0開始)。
　　提示：你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數(shù)，并循環(huán)各個元素來獲取你需要的那個元素。
　　注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

2、語法
　　document.getElementsByClassName(classname)

3、參數(shù)
　　classname String 必須。你需要獲取的元素類名。
　　多個類名使用空格分隔，如 “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 元素在在第一個樣式為 class="example" 的 Div 元素中。Div 的索引值為 0。</p></div><div class="color red">
	<p>P 元素在在第一個樣式為 class="example color" 的 Div 元素中。Div 的索引值為 0。</p></div><div class="color yellow">
	<p>P 元素在在第二個樣式為 class="example color" 的 Div 元素中。Div 的索引值為 1。</p></div><p>點(diǎn)擊按鈕修改第一個類為 "example" 的 div 元素的背景顏色。</p><p>獲取到的對象的長度（數(shù)量）：<span id="demo"></span></p><hr/><h1>實(shí)例二</h1><div class="example">樣式 class="example" 的 Div 元素</div><div class="example">另外一個樣式 class="example" 的 Div 元素</div><p class="example">樣式為 class="example" 的 p 元素。</p><p>這是一個插入在 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() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
　　NodeList 對象代表一個有順序的節(jié)點(diǎn)列表。NodeList 對象我們可通過節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號來訪問列表中的節(jié)點(diǎn)(索引號由0開始)。
　　提示：你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數(shù)，并循環(huán)各個元素來獲取你需要的那個元素。

2、方法
　　getElementsById()

3、語法
　　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">單擊按鈕來改變這一段中的文本。</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

6、效果圖
單擊按鈕前
這里寫圖片描述

單擊按鈕后
這里寫圖片描述

乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

HTML DOM文檔對象查找元素的方法

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

二、Document 對象