getAttribute()用法

2024-04-04 13:58
文章标签 用法 getattribute

本文主要是介绍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()用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/875962

相关文章

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言:为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文

解读GC日志中的各项指标用法

《解读GC日志中的各项指标用法》:本文主要介绍GC日志中的各项指标用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、基础 GC 日志格式(以 G1 为例)1. Minor GC 日志2. Full GC 日志二、关键指标解析1. GC 类型与触发原因2. 堆

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面:本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

Mysql中isnull,ifnull,nullif的用法及语义详解

《Mysql中isnull,ifnull,nullif的用法及语义详解》MySQL中ISNULL判断表达式是否为NULL,IFNULL替换NULL值为指定值,NULLIF在表达式相等时返回NULL,用... 目录mysql中isnull,ifnull,nullif的用法1. ISNULL(expr) → 判

Java中的for循环高级用法

《Java中的for循环高级用法》本文系统解析Java中传统、增强型for循环、StreamAPI及并行流的实现原理与性能差异,并通过大量代码示例展示实际开发中的最佳实践,感兴趣的朋友一起看看吧... 目录前言一、基础篇:传统for循环1.1 标准语法结构1.2 典型应用场景二、进阶篇:增强型for循环2.