一篇文章帶你了解JavaScript htmldom 元素
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
這篇文章將教會(huì)大家如何查找和訪(fǎng)問(wèn)網(wǎng)頁(yè)中的HTML元素。
一、找到HTML元素
通常，使用JavaScript，想操作HTML元素。要做到這一點(diǎn)，必須先找到元素。有幾種方法可以做到這一點(diǎn)。
找到DOM中的HTML元素的最簡(jiǎn)單的方法，是利用元素的id。
使用id="intro"找到元素 :
var myElement = document.getElementById("intro");如果找到元素，則該方法將返回元素作為對(duì)象 (賦值給myElement)。
元素沒(méi)有被發(fā)現(xiàn)，myElement將是空的。
二、通過(guò)標(biāo)簽名稱(chēng)找到HTML元素
找到所有<p>元素:
var x = document.getElementsByTagName("p");這個(gè)例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:
var x = document.getElementById("main");var y = x.getElementsByTagName("p");
三、通過(guò)類(lèi)名稱(chēng)找到HTML元素
如果想找到同一類(lèi)名稱(chēng)的所有HTML元素，使用getElementsByClassName()。
例：
返回所有class="intro"的元素列表.
var x = document.getElementsByClassName("intro");在Internet Explorer 8和早期版本中，按類(lèi)名查找元素不起作用。
四、通過(guò)CSS選擇器找到HTML元素
如果想找到所有的HTML元素，匹配指定的CSS選擇器 (id, 類(lèi)名, 類(lèi)型, 屬性, 屬性值, 等等), 使用querySelectorAll() 方法。
此示例返回所有class="intro"的<p>元素列表。
var x = document.querySelectorAll("p.intro");querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。
五、通過(guò)HTML對(duì)象集合找到HTML元素
此示例查找id="frm1"的表單元素,在表單集合里,并顯示所有的顏色值。
var x = document.forms["frm1"];var text = "";var i;for (i = 0; i < x.length; i++) {text += x.elements[i].value + "<br>";}document.getElementById("demo").innerHTML = text;
下面的HTML對(duì)象（或?qū)ο蟮募希┮部稍L(fǎng)問(wèn):
1. document.anchors
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;"><a name="html">HTML Tutorial</a><br><a name="css">CSS Tutorial</a><br><a name="xml">XML Tutorial</a><br><p id="demo"></p><script>document.getElementById("demo").innerHTML ="Number of anchors are: " + document.anchors.length;</script></body></html>
2. document.body
<script>alert(document.body.innerHTML);</script>
3. document.embeds
<script>document.getElementById("demo").innerHTML ="Number of embeds: " + document.embeds.length;</script>
4. document.head
<script>document.getElementById("demo").innerHTML = document.head;</script>
5. document.images
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body><img src="pic_htmltree.gif"><img src="pic_navigate.gif"><p id="demo"></p><script>document.getElementById("demo").innerHTML ="Number of images: " + document.images.length;</script></body></html>
6. document.title
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;"><p id="demo"></p><script>document.getElementById("demo").innerHTML = "The title of this document is: " + document.title;</script></body></html>
HTML DOM允許JavaScript獲取和更改HTML元素的屬性。
六、擴(kuò)展
獲取元素的屬性值
getAttribute()方法用于獲取元素上指定屬性的當(dāng)前值。
以下示例獲取錨元素的href和title屬性的值。
var link = document.getElementById("demo");var href = link.getAttribute("href");var title = link.getAttribute("title");
1. 在元素上設(shè)置屬性
setAttribute()方法用于設(shè)置指定元素上的屬性的值。
如果屬性已經(jīng)存在，則更新值；否則，將添加具有指定名稱(chēng)和值的新屬性，將href屬性的值設(shè)置為錨元素：
例
var x = document.getElementsByTagName("a")[0];x.setAttribute("href", "https://www.baidu.com/css3/");
同樣，可以使用setAttribute( )方法來(lái)更新或更改HTML元素上現(xiàn)有屬性的值。
例
document.getElementsByTagName("input")[0].setAttribute("type", "text");完整代碼：
<html><title>項(xiàng)目</title><body style="background-color: aqua;"><p>單擊按鈕可將輸入按鈕更改為輸入字段:</p><input type="button" onclick="myFunc(this)" value="Click me"><script>function myFunc(x) {x.setAttribute("type", "text");}</script></body></html>
2. 從元素中刪除屬性
removeAttribute()方法用于從指定元素中刪除屬性。
本示例從錨元素中移除href屬性：
document.getElementsByTagName("a")[0].removeAttribute("href");
七、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了Html元素，從最基本的通過(guò)標(biāo)簽名找Html元素，通過(guò)類(lèi)名找Html元素。通過(guò)CSS選擇器找Html元。最后擴(kuò)展如何設(shè)置元素屬性，如何去刪除元素屬性。通過(guò)豐富的效果圖展示，能夠幫助讀者更好的了解Html元素。
代碼很簡(jiǎn)單了，希望能夠幫助你。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行