溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關JavaScript中htmldom 元素的作用是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
一、找到HTML元素
通常，使用JavaScript，想操作HTML元素。要做到這一點，必須先找到元素。有幾種方法可以做到這一點。
找到DOM中的HTML元素的最簡單的方法，是利用元素的id。
使用id="intro"找到元素 :
var myElement = document.getElementById("intro");如果找到元素，則該方法將返回元素作為對象 (賦值給myElement)。
元素沒有被發現，myElement將是空的。
找到所有<p>元素:
var x = document.getElementsByTagName("p");這個例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:
var x = document.getElementById("main"); var y = x.getElementsByTagName("p");如果想找到同一類名稱的所有HTML元素，使用getElementsByClassName()。
例：
返回所有class="intro"的元素列表.
var x = document.getElementsByClassName("intro");在Internet Explorer 8和早期版本中，按類名查找元素不起作用。
如果想找到所有的HTML元素，匹配指定的CSS選擇器 (id, 類名, 類型, 屬性, 屬性值, 等等), 使用querySelectorAll() 方法。
此示例返回所有class="intro"的
元素列表。
var x = document.querySelectorAll("p.intro");querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。
此示例查找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對象(或對象的集合)也可訪問:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>項目</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>
<script> alert(document.body.innerHTML); </script>
<script> document.getElementById("demo").innerHTML = "Number of embeds: " + document.embeds.length; </script>
<script> document.getElementById("demo").innerHTML = document.head; </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>項目</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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>項目</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元素的屬性。
getAttribute()方法用于獲取元素上指定屬性的當前值。
以下示例獲取錨元素的href和title屬性的值。
var link = document.getElementById("demo"); var href = link.getAttribute("href"); var title = link.getAttribute("title");setAttribute()方法用于設置指定元素上的屬性的值。
如果屬性已經存在，則更新值;否則，將添加具有指定名稱和值的新屬性，將href屬性的值設置為錨元素：
例
var x = document.getElementsByTagName("a")[0]; x.setAttribute("href", "https://www.baidu.com/css3/");
同樣，可以使用setAttribute( )方法來更新或更改HTML元素上現有屬性的值。
例
document.getElementsByTagName("input")[0].setAttribute("type", "text");完整代碼：
<!DOCTYPE html> <html> <title>項目</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>
removeAttribute()方法用于從指定元素中刪除屬性。
本示例從錨元素中移除href屬性：
document.getElementsByTagName("a")[0].removeAttribute("href");
看完上述內容，你們對JavaScript中htmldom 元素的作用是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
