HTML DOM文档对象查找元素的方法
一、HTML DOM 節點
在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節點:
二、Document 對象
當瀏覽器載入 HTML 文檔, 它就會成為 Document 對象。
Document 對象是 HTML 文檔的根節點。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
三、HTML DOM 定義的查找對象的方法
HTML文檔常見的方法:
- getElementsByName()
- getElementsByTagName()
- getElementsByClassName()
- getElementById()
（一）、getElementsByName()
1、定義和用法
getElementsByName() 方法可返回帶有指定名稱的對象的集合。
2、語法
document.getElementsByName(name)
3、參數
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'的元素數量?"> </body> </html>5、效果圖
（二）、getElementsByTagName()
1、定義和用法
getElementsByTagName() 方法可返回帶有指定標簽名的對象的集合。
提示： 參數值 “*” 返回文檔的所有元素。
2、語法
document.getElementsByTagName(tagname)
3、參數
tagname String 必須。你要獲取元素的標簽名。
4、返回值
NodeList 對象 指定標簽名的元素集合
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>6、效果
單擊按鈕前：
單擊按鈕后：
（三）、getElementsByClassName()
1、定義和使用
getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。
提示： 你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數，并循環各個元素來獲取你需要的那個元素。
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。
2、語法
document.getElementsByClassName(classname)
3、參數
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>獲取到的對象的長度（數量）：<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循環改變var x = document.getElementsByClassName("example");var i;for (i = 0; i < x.length; i++) {x[i].style.backgroundColor = "red";}} </script></body> </html>5、效果圖
單擊按鈕前：
單擊按鈕后：
（四）、getElementsById()
1、定義和使用
getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。
提示： 你可以使用 NodeList 對象的 length 屬性來確定指定類名的元素個數，并循環各個元素來獲取你需要的那個元素。
2、方法
getElementsById()
3、語法
document.getElementsById(id)
4、參數
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>6、效果圖
單擊按鈕前
單擊按鈕后
總結
以上是生活随笔為你收集整理的HTML DOM文档对象查找元素的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jsp示例-response页面重定向
- 下一篇： 数据库为date型，而前端要显示Stri