自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解JavaScript htmldom 元素

作者：前端進(jìn)階者
開發(fā) 前端
本文基于JavaScript基礎(chǔ)，介紹了Html元素，從最基本的通過標(biāo)簽名找Html元素，通過類名找Html元素。通過CSS選擇器找Html元。最后擴(kuò)展如何設(shè)置元素屬性，如何去刪除元素屬性。通過豐富的效果圖展示，能夠幫助讀者更好的了解Html元素。

 這篇文章將教會(huì)大家如何查找和訪問網(wǎng)頁中的HTML元素。

[[397857]]

一、找到HTML元素

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

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

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

 

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

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

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

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

找到所有<p>元素:

 

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

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

 

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

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

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

例：

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

 

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

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

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

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

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

元素列表。

 

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

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

五、通過HTML對象集合找到HTML元素

此示例查找id="frm1"的表單元素,在表單集合里,并顯示所有的顏色值。

 

  1. var x = document.forms["frm1"]; 
  2. var text = ""; 
  3. var i; 
  4. for (i = 0; i < x.length; i++) { 
  5.    text += x.elements[i].value + "<br>"; 
  6. } 
  7. document.getElementById("demo").innerHTML = text; 

下面的HTML對象(或?qū)ο蟮募?也可訪問:

1. document.anchors

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>項(xiàng)目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"> 
  8.  
  9. <a name="html">HTML Tutorial</a><br> 
  10. <a name="css">CSS Tutorial</a><br> 
  11. <a name="xml">XML Tutorial</a><br> 
  12.  
  13. <p id="demo"></p> 
  14.  
  15. <script> 
  16. document.getElementById("demo").innerHTML = 
  17. "Number of anchors are: " + document.anchors.length; 
  18. </script> 
  19.  
  20. </body> 
  21. </html> 

 

 

 

 

 

 

2. document.body

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


3. document.embeds

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

4. document.head

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

5. document.images

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>項(xiàng)目</title> 
  6. </head> 
  7. <body> 
  8.  
  9.   <img src="pic_htmltree.gif"> 
  10.   <img src="pic_navigate.gif"> 
  11.  
  12.   <p id="demo"></p> 
  13.  
  14.   <script> 
  15.   document.getElementById("demo").innerHTML = 
  16.   "Number of images: " + document.images.length; 
  17. </script> 
  18.  
  19. </body> 
  20. </html> 

 

 

 

 

 

 

6. document.title

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.   <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>項(xiàng)目</title> 
  6.   </head> 
  7.   <body style="background-color: aqua;"> 
  8.  
  9.     <p id="demo"></p> 
  10.  
  11.     <script> 
  12.       document.getElementById("demo").innerHTML = "The title of this document is: " + document.title; 
  13. </script> 
  14.  
  15.   </body> 
  16. </html> 

HTML DOM允許JavaScript獲取和更改HTML元素的屬性。

六、擴(kuò)展

獲取元素的屬性值

getAttribute()方法用于獲取元素上指定屬性的當(dāng)前值。

以下示例獲取錨元素的href和title屬性的值。

 

  1. var link = document.getElementById("demo"); 
  2. var href = link.getAttribute("href"); 
  3. var title = link.getAttribute("title"); 

1. 在元素上設(shè)置屬性

setAttribute()方法用于設(shè)置指定元素上的屬性的值。

如果屬性已經(jīng)存在，則更新值;否則，將添加具有指定名稱和值的新屬性，將href屬性的值設(shè)置為錨元素：

例

 

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

 

 

 

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

例

 

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

完整代碼：

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <title>項(xiàng)目</title> 
  4.  
  5.   <body style="background-color: aqua;"> 
  6.  
  7.     <p>單擊按鈕可將輸入按鈕更改為輸入字段:</p> 
  8.  
  9.     <input type="button" onclick="myFunc(this)" value="Click me"> 
  10.  
  11.     <script> 
  12.       function myFunc(x) { 
  13.         x.setAttribute("type", "text"); 
  14.       } 
  15. </script> 
  16.  
  17.   </body> 
  18. </html> 

 

2. 從元素中刪除屬性

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

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

 

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

 

 

 

七、總結(jié)

本文基于JavaScript基礎(chǔ)，介紹了Html元素，從最基本的通過標(biāo)簽名找Html元素，通過類名找Html元素。通過CSS選擇器找Html元。最后擴(kuò)展如何設(shè)置元素屬性，如何去刪除元素屬性。通過豐富的效果圖展示，能夠幫助讀者更好的了解Html元素。

代碼很簡單了，希望能夠幫助你。

責(zé)任編輯：華軒 來源： 前端進(jìn)階學(xué)習(xí)交流
JavaScript元素網(wǎng)頁
相關(guān)推薦

2025-02-25 11:12:53

JavaScriptHTML元素CSS

2025-03-21 12:54:01

2021-11-26 11:10:07

JavaScript 節(jié)點(diǎn)導(dǎo)航

2023-06-01 17:10:12

HTMLJavaScript

2020-10-20 15:37:48

了解JavaScrip

2021-11-16 07:54:33

JavaScript導(dǎo)航HTML

2020-11-10 10:48:10

JavaScript屬性對象

2021-01-29 18:41:16

JavaScript函數(shù)語法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2023-07-30 15:18:54

JavaScript屬性

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2023-09-06 14:57:46

JavaScript編程語言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開發(fā)

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2021-05-18 08:30:42

JavaScript 前端JavaScript時(shí)

2020-12-25 09:42:51

SVGtspanSVG基礎(chǔ)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)