getAttribute()用法

一份文档就是一棵节点树。

●节点分为不同的类型：元素节点、属性节点和文本节点等。

●getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。

●getElementsByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。

●这些节点中的每个都是一个对象。

接下来，我们将向大家介绍几个与这些对象相关联的属性和方法。

3.4.1　getAttribute()方法

至此，我们已经向大家介绍了两种检索特定元素节点的办法：一种是使用getElementById()方法，另一种是使

用getElementsByTagName()方法。在找到那个元素后，我们就可以利用getAttribute()方法把它的各种属性的

值查询出来。

getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字：

object.getAttribute(attribute)
不过，getAttribute()方法不能通过document对象调用，这与我们此前介绍过的其他方法不同。我们只能通过

一个元素节点对象调用它。

例如，你可以把它与getElementsByTagName()方法结合起来，去查询每个元素的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属性的元素。假如这份文档还有一个或更多个不带title属性的

元素，则相应的getAttribute("title")调用将返回null。null是JavaScript语言中的空值，其含义是“你

说的这个东西不存在”。如果你们想亲自验证一下这件事，请先把下面这段文本插入到“购物清单”文档中的

现有文本段落之后：
This is just test
然后重新加载这个页面。这一次，你们将看到两个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()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。

在“购物清单”示例文档里，元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可

以用setAttribute()方法来改变它的当前值：

改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。

这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的

显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档

的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的

源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行

刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用

户在他们的浏览器里执行页面刷新操作就可以实现。

getAttribute()用法相关推荐

setAttribute() 与 getAttribute() 用法剖析及选项卡操作的实例展示，这一篇就够了
Ⅰ.在 MDN 上 setAttribute() 与 getAttribute() 函数的用法解释(很详细): 1.Element.setAttribute(): 其一.摘要: 设置指定元素上的某个属 ...
php domdocument getattribute,PHP DOMElement getAttribute()用法及代码示例
DOMElement::getAttribute()函数是PHP中的内置函数,用于获取带有当前节点名称的属性值. 用法: string DOMElement::getAttribute( string ...
php xml getattribute,PHP XMLReader getAttribute()用法及代码示例
XMLReader::getAttribute()函数是PHP中的一个内置函数,用于获取命名属性的值. 用法: string XMLReader::getAttribute( string $name ...
setAttribute()和setProperty()
setAttribute()和setProperty() 学习笔记初学习完setAttribute()和setProperty()后,在项目中使用时不太清楚原理,总是一知半解,最近又遇到关于这两个属 ...
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C: ...
Dorado用法与示例
Dorado用法与示例 dorado用后总结一.dorado概念 dorado的产品全名是"dorado展现中间件".从产品形态上dorado由两部分组成,第一部分是一个具有AJ ...
python的继承用法_Python 中的继承之Super用法
以下Copy自官方文档说明,可点击查看官网源文翻译内容属于德德自译,有不当之处请指正,勿喷... 翻译括弧中是德德自己理解,通过代码验证的,勿喷... super(type[, object-or- ...
Spring MVC中Session的正确用法之我见02
Spring MVC中Session的正确用法之我见 Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置 ...
WEB Struts2 中OGNL的用法
2019独角兽企业重金招聘Python工程师标准>>> User对象属性获取如User中有username和password字段获取username属性<s:propert ...

getAttribute()用法

getAttribute()用法相关推荐

最新文章

热门文章