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

禁忌石 2019-11-15

展開全文

2018-09-03 10:24:21

版權(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é)點

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

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

二,、Document 對象

當(dāng)瀏覽器載入 HTML 文檔, 它就會成為 Document 對象。
　　Document 對象是 HTML 文檔的根節(jié)點,。
　　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,、實例

<!DOCTYPE html><html><head>
	<meta charset="utf-8">
	<title>getElementsByName()實例</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'的元素數(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,、實例

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

2,、語法
　　document.getElementsByClassName(classname)

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

4、實例

<!DOCTYPE html><html><head>
	<meta charset="utf-8">
	<title>getElementsByClassName()實例</title>
	<style>
		div {
		    border: 1px solid black;
		    margin: 5px;
		}
		.example {
		    border: 1px solid black;
		    margin: 5px;
		}
	</style></head><body><h1>實例一</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>點擊按鈕修改第一個類為 "example" 的 div 元素的背景顏色,。</p><p>獲取到的對象的長度（數(shù)量）：<span id="demo"></span></p><hr/><h1>實例二</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>點擊按鈕修改所有樣式 class="example" 的背景顏色,。</p><button onclick="myFunction()">點我</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é)點列表,。NodeList 對象我們可通過節(jié)點列表中的節(jié)點索引號來訪問列表中的節(jié)點(索引號由0開始)。
　　提示：你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數(shù),，并循環(huán)各個元素來獲取你需要的那個元素,。

2、方法
　　getElementsById()

3,、語法
　　document.getElementsById(id)

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

5,、實例

<!DOCTYPE html><html><head>
	<meta charset="utf-8">
	<title>getElementById()</title></head><body>
	<p id="demo">單擊按鈕來改變這一段中的文本。</p>
	<button onclick="myFunction()">點我</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,、效果圖
單擊按鈕前
這里寫圖片描述

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

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點擊一鍵舉報,。

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久