明凯博客

关注网站技术,一个特立独行的程序员

Js中getAttribute()和setAttribute()的详解

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

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

getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点。
getElementsByTagName()方法将返回一个对象数组,它们分别对应着文档里的一个特定的元素节点。
这些节点中的每个都是一个对象。

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

一、getAttribute()方法:

至此,我们已经向大家介绍了两种检索特定元素节点的办法:
一种是使用getElementById()方法,另一种是使用getElementsByTagName()方法。
在找到那个元素后,我们就可以利用getAttribute()方法把它的各种属性的值查询出来。

getAttribute()方法是一个函数。

它只有一个参数——你打算查询的属性的名字:

object.getAttribute(attribute)

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

我们只能通过一个元素节点对象调用它。

例如,你可以把它与getElementsByTagName()方法结合起来,去查询每个

元素的title属性,如下所示:

1
2
3
4
5
6
var text=document.getElementsByTagName("p");
for (var i=0;i<text .length;i++)
{
alert(text[i].getAttribute("title"));
 
}

如果要不现实空值,可以修改我们的脚本,让它只在title属性存在时才弹出一条消息。
我们将增加一条if语句来检查getAttribute()方法的返回值是不是null。

趁着这个机会,我们还增加了几个变量以提高脚本的可读性:

1
2
3
4
5
6
7
8
9
10
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts .length;i++)
{text=ts[i].getAttribute("title");
 
 
if(text!=null)
{
alert(text)
}
}

二、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()方法用在元素节点的某个现有属性上,这个属性的当前值将被覆盖。

三、有一个非常值得关注的细节:

通过setAttribute()方法对文档做出的修改,将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化,但我们在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说,setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处:对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

, , ,

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注