溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript中htmldom 元素的作用是什么

發(fā)布時間：2021-07-06 16:45:19 來源：億速云 閱讀：132 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)JavaScript中htmldom 元素的作用是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一、找到HTML元素

通常，使用JavaScript，想操作HTML元素。要做到這一點(diǎn)，必須先找到元素。有幾種方法可以做到這一點(diǎn)。

找到DOM中的HTML元素的最簡單的方法，是利用元素的id。

使用id="intro"找到元素 :

var myElement = document.getElementById("intro");

如果找到元素，則該方法將返回元素作為對象 (賦值給myElement)。

元素沒有被發(fā)現(xiàn)，myElement將是空的。

二、通過標(biāo)簽名稱找到HTML元素

找到所有<p>元素:

var x = document.getElementsByTagName("p");

這個例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:

var x = document.getElementById("main"); var y = x.getElementsByTagName("p");

三、通過類名稱找到HTML元素

如果想找到同一類名稱的所有HTML元素，使用getElementsByClassName()。

例：

返回所有class="intro"的元素列表.

var x = document.getElementsByClassName("intro");

在Internet Explorer 8和早期版本中，按類名查找元素不起作用。

四、通過CSS選擇器找到HTML元素

如果想找到所有的HTML元素，匹配指定的CSS選擇器 (id, 類名, 類型, 屬性, 屬性值, 等等), 使用querySelectorAll()  方法。

此示例返回所有class="intro"的

元素列表。

var x = document.querySelectorAll("p.intro");

querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。

五、通過HTML對象集合找到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對象(或?qū)ο蟮募?也可訪問:

1. document.anchors

<!DOCTYPE html> <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>

JavaScript中htmldom 元素的作用是什么

2. document.body

<script>  alert(document.body.innerHTML); </script>

JavaScript中htmldom 元素的作用是什么


3. document.embeds

<script>     document.getElementById("demo").innerHTML =     "Number of embeds: " + document.embeds.length; </script>

JavaScript中htmldom 元素的作用是什么

4. document.head

<script>     document.getElementById("demo").innerHTML = document.head; </script>

JavaScript中htmldom 元素的作用是什么

5. document.images

<!DOCTYPE html> <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>

JavaScript中htmldom 元素的作用是什么

6. document.title

<!DOCTYPE html> <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>

JavaScript中htmldom 元素的作用是什么

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)存在，則更新值;否則，將添加具有指定名稱和值的新屬性，將href屬性的值設(shè)置為錨元素：

例

var x = document.getElementsByTagName("a")[0]; x.setAttribute("href", "https://www.baidu.com/css3/");

JavaScript中htmldom 元素的作用是什么

同樣，可以使用setAttribute( )方法來更新或更改HTML元素上現(xiàn)有屬性的值。

例

document.getElementsByTagName("input")[0].setAttribute("type", "text");

完整代碼：

<!DOCTYPE html> <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>

JavaScript中htmldom 元素的作用是什么

2. 從元素中刪除屬性

removeAttribute()方法用于從指定元素中刪除屬性。

本示例從錨元素中移除href屬性：

document.getElementsByTagName("a")[0].removeAttribute("href");

JavaScript中htmldom 元素的作用是什么

看完上述內(nèi)容，你們對JavaScript中htmldom 元素的作用是什么有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手