游客发表

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

发帖时间：2025-11-04 23:54:36

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

一、章带找到HTML元素

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

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

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

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

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

元素没有被发现，篇文myElement将是章带空的。

二、元素通过标签名称找到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对象(或对象的集合)也可访问:

1. document.anchors

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

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

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

6. document.title

<!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"); 

1. 在元素上设置属性

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

如果属性已经存在，则更新值;否则，将添加具有指定名称和值的新属性，将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> 

2. 从元素中删除属性

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

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

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

七、总结

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

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

高防服务器

    码上建站

    益强编程舍

    相关内容

    随机阅读

    热门排行

    友情链接