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

时间:2021-07-21 03:30:25

这篇文章将教会大家如何查找和访问网页中的HTML元素

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

一、找到HTML元素

 

通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。

找到DOM中的HTML元素的最简单的方法,是利用元素的id。

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

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

如果找到元素,则该方法将返回元素作为对象 (赋值给myElement)。

元素没有被发现,myElement将是空的。

二、通过标签名称找到HTML元素

 

找到所有<p>元素:

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

这个例子使用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. document.getElementById("demo").innerHTML = text; 

下面的HTML对象(或对象的集合)也可访问:

1. document.anchors

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</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> 

 

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

2. document.body

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

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

 

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

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

4. document.head

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

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

5. document.images

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.   <meta charset="UTF-8"
  5.   <title>项目</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> 

 

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

6. document.title

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.   <head> 
  4.     <meta charset="UTF-8"
  5.     <title>项目</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> 

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

HTML DOM允许JavaScript获取和更改HTML元素的属性。

六、扩展

 

获取元素的属性值

getAttribute()方法用于获取元素上指定属性的当前值。

以下示例获取锚元素的href和title属性的值。

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

1. 在元素上设置属性

setAttribute()方法用于设置指定元素上的属性的值。

如果属性已经存在,则更新值;否则,将添加具有指定名称和值的新属性,将href属性的值设置为锚元素:

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

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

同样,可以使用setAttribute( )方法来更新或更改HTML元素上现有属性的值。

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

完整代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <title>项目</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> 

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

2. 从元素中删除属性

removeAttribute()方法用于从指定元素中删除属性。

本示例从锚元素中移除href属性:

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

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

七、总结

 

本文基于JavaScript基础,介绍了Html元素,从最基本的通过标签名找Html元素,通过类名找Html元素。通过CSS选择器找Html元。最后扩展如何设置元素属性,如何去删除元素属性。通过丰富的效果图展示,能够帮助读者更好的了解Html元素。

代码很简单了,希望能够帮助你。

原文地址:https://mp.weixin.qq.com/s?__biz=MzA4Njg4MDgwNQ==&mid=2247484836&idx=1&sn=ff46f5b61d288d4fb9cea64eab68865c&chksm=9fc0a2eea8b72bf847e3e0eb88873e238097c8c7625c7985e77136fb70fbe8c0fa48515ca38c&mpshare=1&