一篇文章带你了解JavaScripthtmldom元素

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

一、找到HTML元素

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

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

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

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

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

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

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

找到所有

元素:

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

这个例子使用id="main"找到元素 , 并且在"main"里面找到所有的

元素:

 
 
 
 
  
  
  
  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 + "
";   
  
  
  }   
  
  
  document.getElementById("demo").innerHTML = text;

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

1. document.anchors

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  项目   
  
  
     
  
  
     
  
  
     
  
  
  HTML Tutorial
   
  
  
  CSS Tutorial
   
  
  
  XML Tutorial

2. document.body

3. document.embeds

4. document.head

5. document.images

6. document.title

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

六、扩展

获取元素的属性值

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

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

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

1. 在元素上设置属性

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

完整代码：

 
 
 
 
  
  
  
     
  
  
     
  
  
    项目   
  
  
     
  
  
       
  
  
     
  
  
      单击按钮可将输入按钮更改为输入字段:

2. 从元素中删除属性

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

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

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

七、总结

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

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

分享名称：一篇文章带你了解JavaScripthtmldom元素
文章网址：http://www.shufengxianlan.com/qtweb/news21/347971.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容