您的位置：首页 > Web前端 > JavaScript

【JavaScript】DOM（二）获取元素+设置属性的六种方法

2016-12-18 16:28 645 查看

前言

      上篇博客讲了DOM的基本组成，也介绍了节点的概念，这一篇博客，就带大家了解DOM常用的6种方法。一起来看看吧~ 

获取元素

有3种DOM方法可以获取元素节点，分别是通过元素ID，通过标签名字和通过类名字。 

1.getElementById 

      这个方法将返回一个与给定id属性值的元素节点对应的对象，是对象哦。大家需要注意的是JavaScript语言是区分字母大小写的，所以在拼写“getElementById”的时候，千千万万不要把大小写写错。      此方法是document对象特有的函数。在脚本代码里，函数名后面必须要有一对圆括号，用来包含函数的参数。而getElementById方法的参数只有一个，那就是你想获得的那个元素的id属性的值，id的值必须放在单引号或双引号里。      来一句例子代码： document.getElementById("purchases").这个调用将返回一个对象，这个对象对应着document对象里一个独一无二的元素，那个元素的html id属性值 是purchases，我们可以用 前面提到过的操作符 typeof来验证一下，它的数据类型。      下面是把一些JavaScript代码插入上篇博客“购物清单”文档之后的代码，新增的代码进行了加粗，在</body>结束之前。在这里要PS说一句，我们不太赞成把JavaScript的代码直接就嵌入文档里，但是这是一种比较简单快捷的测试手段，所以大家要理解下。下面看代码         <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shopping list</title>
<link rel="stylesheet" href ="DOM.css" media="screen" />
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id ="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
<ul>
<script>
alert(typeof document.getElementById("purchases"));
</script>
</body>
<html>      动手实践上面的代码，记得保存为html文件的格式，然后再浏览器里运行，你会看到如图的一个alert弹框，它告诉你 document.getElementById("purchases")的类型是Object对象。         

      事实上，文档中每一个元素都是一个对象。利用DOM提供的方法可以得到任何一个对象，一般来说，用不着为文档里的每一个元素都定义一个独一无二的id值，DOM提供了另一个方法来获取那些没有id属性的对象。

2.getElementsByTagName

      getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById ,这个方法是只有一个参数的函数，就是标签的名字。      下面是个简单的例子：document.getElementsByTagName("li")      但是当你总是重复敲上面的代码的时候，你会觉得长长的字符串一点也不利于阅读还费事。有一个简单的办法可以减少不必要的代码量，并且可以改善代码的可读性，你想到是什么了吗。把document.getElementsByTagName("li")赋值给一个变量就可以啦。      下面的代码替换掉上面代码中<script>标签间的代码，试试看      var items=document.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
alert(typeof items[i]);
}      显示出来的结果就是三个 alert对话框，弹出的消息都是“object”      PS：getElementsByTagName允许把一个通配符作为它的参数。

3.getElementsByClassName

      从方法的名字里，你也许嗅到了什么线索吧，这个方法能够让我们通过class属性中的类名来访问元素。和上面的getElementsByTagName老兄类似，这个方法也只接受一个参数，就是类名。返回值呢，就是具有相同类名的元素的数组。看看下面的例子：          document.getElementsByClassName("sale")      使用这个方法还可以查找那些带有多个类名的元素，想要指定多个类名，只要在字符串参数中用空格分隔类名即可。我们在<script>标签中加入下面的代码：       alert（document.getElementsByClassName("important sale").length）;
      显示效果就是警告框里显示1，表示只有一个元素匹配，因为只有一个元素同时带有“important”和“sale”类名。另外，你在参数所写的类名的顺序和类名顺序不一致也照样可以匹配，而且更厉害的是就算元素还带有更多的类名也没有关系，照样可以匹配该元素。      和上面的getElementsByTagName一样，也可以组合使用getElementsByClassName和getElementById。假如你想知道在 id 为“purchase”的元素中，有多少类名包含“sale”的列表项，可以先找到那个特定的对象，然后再调用getElementsByClassName。看看下面的栗子：     var shopping=document.getElementById("purchase");
var sales=shopping.getElementsByClassName("sale");


获取和设置属性

       上面，我们介绍了3种获取特定元素的方法，我们在得到元素之后，还可以设法获取它的各个属性，getAttribute方法就是干这个的，另外setAttribute方法可以更改属性节点的值，removeAttribute方法可以移除HTML属性。

     1.getAttribute

      这个函数，它也只有一个参数——你打算查询的属性的名字。但与之前的那些方法不同，getAttribute方法不属于document对象，所以我们不能通过document对象来调用。它只能通过元素节点对象调用。比如，你就可以和getElementsByTagName方法合用，获取每个<p>元素的title属性，如下： var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
Alert(paras[i].getAttribute("title"));
}      把上面的代码放到上面给出的“购物清单”文件的末尾，在浏览器里重新加载，屏幕会弹出带有 a gentle reminder 的alert对话框。      假如文档里有很多个<p>元素，并且它们没有title属性，那么getAttribute("title")方法会返回null值。我们也可以稍微修改一下，让它只在title属性有值的时候才弹出消息。那就增加一条if语句来检查getAttribute返回值是不是null，同时我们可以增加几个变量来提高脚本的可读性。    var paras =document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
If (title_text !=null){
alert(title_text);
}
}      我们其实还可以把代码浓缩的更短一些，if(something)和if(something!=null)完全等价，if(title_text)和if(title_text !=null)也等价。我们还可以把alert语句和if语句写在同一行上，这可以让它们更接近于我们日常生活中的英语句子。 var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
If(title_text) alert(title_text);
}

2.setAttribute

      之前我们介绍的方法都是用来获取信息的，setAttribute()就有所不同了，它允许我们对属性节点的值直接做出修改。它也用于元素节点。      下面的栗子，第一条语句得到id是purchase的元素，第二条语句把这个元素的title属性值设置为 a list of goods。 var shopping =document.getElementsById("purchase");
shopping.setAttribute("title","a list of goods"); 你想要验证是否真的修改了属性，可以再使用 getAttribute方法。 var shopping =document.getElementsById("purchase");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));      浏览器上加载之后，将弹出两个alert对话框，第一个出现在setAttribute调用之前，它显示 null 或者空白。第二个对话框，出现在设置setAttribute之后，它显示了"a list of goods"。      你有没有发现，上面的例子中，我们设置了一个节点的title属性，这个属性原先是并不存在的。这表示了，setAttribute实际上完成了两件事：先创建了这个属性，然后设置了它的值。如果setAttribute用在本身就有这个属性的元素节点上，这个属性值就会被覆盖掉。        PS：这里有一个细节需要我们关注，通过setAttribute对文档做出修改后，在通过浏览器的view source 选项去查看文档本身的源代码的时候，我们看到的仍将是改变前的属性值，也就是说setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源于DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面的内容进行刷新却不需要在浏览器里刷新页面。 

3.removeAttribute

removeAttribute()可以帮你移除html中的属性。看一个简单的例子： document.getElementById('box').removeAttribute('style');

小结

       本篇博客带大家认识了3种获取元素的方法，和3种获取和设置属性的方法，希望可以给读者带来一些收获。以后关于JavaScript的博客会不定期的更新，下次见啦~ 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航