js中的getAttribute方法使用示例

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

时间: 2024-10-03 14:00:58

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

JS中通过call方法实现继承

讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS通过call方法实现继承</title> </head> <body> <script type="text/javascript"> /* js中的继承有多种实现方式,今天我们讨论下通过call方法实现的继承. 此

php学习笔记(JS中的常见方法)

JS中的常见方法: 1.日期时间函数(需要用变量调用): var b = new Date(); //获取当前时间 b.getTime() //获取时间戳 b.getFullYear() //获取年份 b.getMonth()+1; //获取月份 b.getDate() //获取天 b.getHours() //获取小时 b.getMinutes() //获取分钟 b.getSeconds() //获取秒数 b.getDay() //获取星期几 b.getMilliseconds() //获取毫

js中使用eval()方法将字符串转换成日期格式、并获取指定时间的日期

1.在js中eval()方法将字符串格式数据转换成日期格式 function getDate(strDate) {         //strDate为需要转换成日期格式的字符串         var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,                 function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');    

Js中sort(sortfun)方法

1 <meta charset="utf-8" /> 2 3 <script language="javascript"> 4 5 /** 6 * @date 2014-10-23 11:17:04 7 * @via http://www.jb51.net/article/4168.htm 8 * @topic Js中sort(sortfun)方法 9 * @return 一个元素已经进行了排序的 Array 对象. 10 * @sortfu

笔记-[6]-js中事件绑定方法的总结

js中的两种对象事件绑定方法: 1:常用的如:div.onclick=function(){...}; 2:通过系统方法绑定事件: 非IE:addEventListener('事件名[不加on]',function(){},false[或者true]) IE:attachEvent('事件名[加on]',function(){}); 通过系统方法绑定事件可以让对象可以绑定相同的事件并且执行不同的操作,如果使用第一种方法绑定多个相同的事件,最后一个事件会覆盖前面所有的事件. 在addEventLi

JavaScript开发之旅(2):JS中的tostring()方法

看到一个toString()方法,在JS中,定义的所有对象都具有toString()方法. 定义和用法 toString() 方法可把一个逻辑值转换为字符串,并返回结果. 语法 booleanObject.toString(); 返回值 根据原始布尔值或者 booleanObject 对象的值返回字符串 "true" 或 "false". 抛出 如果调用该方法的对象不是 Boolean,则抛出异常 TypeError. 创建一个 Boolean 对象,并把它转换成字

字符串方法,js中的数组方法,ES5新增的数组方法,以及jQuery中的数组方法

说明:本片主要对比介绍与数组操作相关的方法 (一)字符串方法(String对象方法) indexOf() //检索字符串 lastIndexOf() //从后向前搜索字符串 match() //找到一个或多个正则表达式的匹配 replace() //替换与正则表达式匹配的子串 search() //检索与正则表达式相匹配的值 slice() //提取字符串的片断,并在新的字符串中返回被提取的部分 split() //把字符串分割为字符串数组 substr() //从起始索引号提取字符串中指定数目

JS中函数调用的方法

JavaScript 函数有 4 种调用方式.每种方式的不同方式在于 this 的初始值. 1.作为一个函数调用 function myFunction(a, b) { return a* b; } myFunction(10, 2); // myFunction(10, 2) 返回 20 或 function myFunction() { return this; } myFunction(); // 返回 window对象 this为window对象. 2.作为方法调用 var myObje

js中setTimeout/setInterval定时器用法示例

js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 function timedMsg() { setTimeout("alert('7 seconds!')",5000)//5秒后弹出信息 } setTimeout("timedMsg()",2000);//2秒后执行方法 timedMsg setInterval:在指定的时间间隔内