getAttribute()获取属性
Js:getAttribute[转]
一份文档就是一棵节点树。
●节点分为不同的类型:元素节点、属性节点和文本节点等。
●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点。
●getElementsByTagName()方法将返回一个对象数组,它们分别对应着文档里的一个特定的元素节点。
●这些节点中的每个都是一个对象。
接下来,我们将向大家介绍几个与这些对象相关联的属性和方法。
3.4.1 getAttribute()方法
至此,我们已经向大家介绍了两种检索特定元素节点的办法:一种是使用getElementById()方法,另一种是使用getElementsByTagName()方法。在找到那个元素后,我们就可以利用getAttribute()方法把它的各种属性的值查询出来。
getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字:
object.getAttribute(attribute)
不过,getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。
例如,你可以把它与getElementsByTagName()方法结合起来,去查询每个<p>元素的title属性,如下所示:
var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));
}
如果把上面这段代码插入到前面给出的“购物清单”示例文档的末尾,并在Web浏览器里重新加载这个页面,屏幕上将弹出一个显示着文本消息“a gentle reminder”的alter对话框。
在“购物清单”文档里只有一个带有title属性的<p>元素。假如这份文档还有一个或更多个不带title属性的<p>元素,则相应的getAttribute("title")调用将返回null。null是JavaScript语言中的空值,其含义是“你说的这个东西不存在”。如果你们想亲自验证一下这件事,请先把下面这段文本插入到“购物清单”文档中的现有文本段落之后:
<p>This is just test</p>
然后重新加载这个页面。这一次,你们将看到两个alter对话框,而第二个对话框将是一片空白或者是只显示着单词“null”——具体情况要取决于你的Web浏览器将如何显示null值。
可以修改我们的脚本,让它只在title属性存在时才弹出一条消息。我们将增加一条if语句来检查getAttribute()方法的返回值是不是null。趁着这个机会,我们还增加了几个变量以提高脚本的可读性:
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text!=null)
{
alert(text)
}
}
现在,如果重新加载这个页面,你们将只会看到一个显示着“a gentle reminder”消息的alter对话框,如下所示。
我们甚至可以把这段代码缩得更短一些。当检查某项数据是否是null值时,我们其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用做if语句的条件。if (something)与if (something != null)完全等价,但前者显然更为简明。此时,如果something存在,则if语句的条件将为真;如果something不存在,则if语句的条件将为假。
具体到这个例子,只要我们把if (title_text != null)替换为if (title_text),我们就可以得到更简明的代码。此外,为了进一步增加代码的可读性,我们还可以趁此机会把alter语句与if语句写在同一行上,这可以让它们更接近于我们日常生活中的英语句子:
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text) alert(text)
}
3.4.2 setAttribute()方法
我们此前介绍给大家的所有方法都只能用来检索信息。setAttribute()方法与它们有一个本质上的区别:它允许我们对属性节点的值做出修改。
类似于getAttribute()方法,setAttribute()方法也是一个只能通过元素节点对象调用的函数,但setAttribute()方法需要我们向它传递两个参数:
obiect.setAttribute(attribute,value)
在下面的例子里,第一条语句将把id属性值是purchase的元素检索出来,第二条语句将把这个元素的title属性值设置为a list of goods:
var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")
我们可以利用getAttribute()方法来证明这个元素的title属性值确实发生了变化:
var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
上面这些语句将在屏幕上弹出两个alert对话框:第一个alter对话框出现在setAttribute()方法被调用之前,它将是一片空白或显示着单词“null”;第二个出现在title属性值被设置之后,它将显示着“a list of goods”消息。
在上例中,我们设置了一个现有节点的title属性,但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作:先把这个属性创建出来,然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上,这个属性的当前值将被覆盖。
在“购物清单”示例文档里,<p>元素已经有了一个title属性,这个属性的值是a gentle reminder。我们可以用setAttribute()方法来改变它的当前值:
<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我会成功!")
alert(ts[i].getAttribute("title"))
}
}
上面这段代码将先从文档里把已经带有title属性的<p>元素全部检索出来,然后把它们的title属性值全部修改为brand new title text。具体到“购物清单”文档,属性值a gentle reminder将被覆盖。
这里有一个非常值得关注的细节:通过setAttribute()方法对文档做出的修改,将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化,但我们在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说,setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处:对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。
getAttribute()获取属性的更多相关文章
- JS之获取属性总结
嗨,我是沐晴,今天来说说JS中关于获取属性的一些方法和区别.闲话不说,来正题. 首先什么是属性呢,比如input标签,标签中的value id type style等,这些就是属性.我们JS获取属性一 ...
- HTMLParser获取属性名
HTMLParser获取属性名方式: 原始网页文本: <a title="美军被曝虐尸" href="http://www.sogou.com/web?query= ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- 通过JS给HTML元素增加、删除和获取属性内容
1.通过ID或者其他元素找到要处理的HTML对象:(举例通过ID) var obj=document.getElementById('id');12.操作此对象 添加属性:obj.setAttribu ...
- Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...
- 定义通用的可通过lambda表达式树来获取属性信息
我们一般获取某个类型或对象的属性信息均采用以下几种方法: 一.通过类型来获取属性信息 var p= typeof(People).GetProperty("Age");//获取指定 ...
- js中attr 与find 获取属性值,
一.attr的用法 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 und ...
- jquery 获取属性的值
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr( 属 ...
- 获取属性名:PropertyNameHelper
获取属性名:PropertyNameHelper namespace NCS.Infrastructure.Querying { public static class PropertyNameHel ...
随机推荐
- Qt学习 之 数据库(支持10种数据库)
Qt 提供了 QtSql 模块来提供平台独立的基于 SQL 的数据库操作.这里我们所说的“平台独立”,既包括操作系统平台,有包括各个数据库平台.另外,我们强调了“基于 SQL”,因为 NoSQL 数据 ...
- Debian下Apache配置多域名访问
请见Github博客:http://wuxichen.github.io/Myblog/php/2014/10/10/DebianApacheSetting.html
- jsp小商城
一个小商城,当然,没淘宝那么厉害,只是那时学完j2ee后,发现java原来也可以做网站,学了数据库,servlet,jsp,当时是很惊喜的,可以直接做个这样的东西.而放到今天,学了更多之后,发现可以用 ...
- 关于PCA算法的一点学习总结
本文出处:http://blog.csdn.net/xizhibei ============================= PCA,也就是PrincipalComponents Analysis ...
- Ubuntu15.04上为火狐浏览器安装Adobe Flash Player插件
前言:最新版的ubuntu好像没有flashplayer,而且更新源也无法更新成功,找些资料终于发现 这个需要自己手动配置.由于flashplayer无法安装,导致视频,百度上传等功能都无法使用: 安 ...
- [Swust OJ 247]--皇帝的新衣(组合数+Lucas定理)
题目链接:http://acm.swust.edu.cn/problem/0247/ Time limit(ms): 1000 Memory limit(kb): 65535 Descriptio ...
- Android 中 ListView Adapter getView 被多次调用问题 解决方法
执行多次原因是因为每显示一个VIew,它都去测量view的高度,执行measure方法,导致getView执行多次. 解决方法是将 ListView 的 layout_width 设置为 fill_p ...
- shell的wc命令统计 head tail命令详解
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...
- 作为Qt 合作伙伴的V-Play,比大家都领先了一步 planet.qt.io
今天发布博客,将Flappy Bird和其它的小游戏移植到Respberry PI了 http://planet.qt.io/ planet.qt.io 的repo: https://coderevi ...
- QT全平台设置图标,全平台静态编译 good
1. 概述 当我们用QT写好了一个软件,要把你的程序分享出去的时候,不可能把编译的目录拷贝给别人去运行.编译好的程序应该是一个主程序,加一些资源文件,再加一些动态链接库,高大上一些的还可以做一个安装 ...