js中的getAttribute方法使用示例


Posted in Javascript onAugust 01, 2014

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的真正威力和诱人之处:对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

Javascript 相关文章推荐
javascript代码加载优化方法
Jan 30 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
微信小程序自动客服功能
Nov 02 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
js中的数组对象排序分析
Dec 11 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 #Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 #Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 #Javascript
批量修改标签css样式以input标签为例
Jul 31 #Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 #Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 #Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 #Javascript
You might like
PHP 字符串分割和比较
2009/10/06 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
python多进程操作实例
2014/11/21 Python
详解python多线程之间的同步(一)
2019/04/03 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
新闻编辑自荐书范文
2014/02/12 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server