getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字,下面为大家介绍下其具体的使用
 

getAttribute()方法

至此,我们已经向大家介绍了两种检索特定元素节点的办法:一种是使用getElementById()方法,另一种是使用getElementsByTagName()方法。在找到那个元素后,我们就可以利用getAttribute()方法把它的各种属性的值查询出来。
getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字:
object.getAttribute(attribute)
不过,getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。
例如,你可以把它与getElementsByTagName()方法结合起来,去查询每个<p>元素的title属性,如下所示:

1
2
3
4
5
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。趁着这个机会,我们还增加了几个变量以提高脚本的可读性:

1
2
3
4
5
6
7
8
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语句写在同一行
上,这可以让它们更接近于我们日常生活中的英语句子:

1
2
3
4
5
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:

1
2
var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")

我们可以利用getAttribute()方法来证明这个元素的title属性值确实发生了变化:

1
2
3
4
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()方法来改变它的当前值:

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

js中的getAttribute方法使用示例的更多相关文章

  1. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...

  2. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  3. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  4. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  5. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  6. ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题

    当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...

  7. JS与OC交互,JS中调用OC方法(获取JSContext的方式)

    最近用到JS和OC原生方法调用的问题,查了许多资料都语焉不详,自己记录一下吧,如果有误欢迎联系我指出. JS中调用OC方法有三种方式: 1.通过获取JSContext的方式直接调用OC方法 2.通过继 ...

  8. JS中split使用方法和数组中元素的删除

    JS中split使用方法和数组中元素的删除 JS中split使用方法 <script language="javascript"> function spli(){ d ...

  9. JS中的splice方法

    JS中的splice方法 定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组(集合). 语法 arrayObject.splice(ind ...

随机推荐

  1. [CareerCup] 11.8 The Rank of Number 数的排行

    11.8 Imagine you are reading in a stream of integers. Periodically, you wish to be able to look up t ...

  2. POJ2289-Jamie's Contact Groups-二分图多重匹配-ISAP

    注意POJ数组越界可能返回TLE!!! 网络流的maxn大小要注意 其他没什么了 裸二分答案+isap乱搞 不过复杂度没搞懂 V=1e3 E = 1e5 那ISAP的O(V^2E)怎么算都不行啊 /* ...

  3. 【转载】UVa 11464 Even Parity 偶数矩阵

    题意:给你一个n*n的01矩阵,让你把这个矩阵中尽量少的0转换成1,使得矩阵每个位置的上下左右四个相邻的数加起来能被2整除,求最少的转换数 首先,n 的规模并不大,最大只有15.但是完全枚举整个矩阵显 ...

  4. CUDA编程学习(四)

    利用Block和Thread进行并行加速 _global_ void add(int *a, int *b, int *c) { int index = threadIdx.x + blockIdx. ...

  5. #Linux学习笔记# Linux在线帮助文档man page

    man是manual的简称,表示手册页.Linux系统的帮助手册页是按照章节(SECTION)来存储了.man手册页分为下面几个章节. 1 普通命令 2 内核提供的系统调用 3 库调用(C库函数) 4 ...

  6. HTML5+NodeJs实现WebSocket即时通讯

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可 ...

  7. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  8. websocket在.net4.5中实现的简单demo

    以下代码环境要求:win8或win10, .net4.5+IIS8 win7上是IIS7,win7上.net本身不直接支持websocket, win7可以用superwebsocket, 或自己根据 ...

  9. [转]Oracle中存储过程和函数的区别

    原文地址:http://blog.csdn.net/tender001/article/details/8066203 存储过程和函数: 例子: //创建过程 create or replace pr ...

  10. WPF小知识,MessageBox的多种用法

    我们在程序中经常会用到MessageBox. 现将其常见用法总结如下: 1.MessageBox.Show("Hello~~~~"); 最简单的,只显示提示信息. 2.Messag ...