setAttribute（）
●节点分为不同的类型：元素节点、属性节点和⽂本节点等。
●getElementById()⽅法将返回⼀个对象，该对象对应着⽂档⾥的⼀个特定的元素节点。
●getElementsByTagName()⽅法将返回⼀个对象数组，它们分别对应着⽂档⾥的⼀个特定的元素节点。
●这些节点中的每个都是⼀个对象。
接下来，我们将向⼤家介绍⼏个与这些对象相关联的属性和⽅法。
3.4.1　getAttribute()⽅法
⾄此，我们已经向⼤家介绍了两种检索特定元素节点的办法：⼀种是使⽤getElementById()⽅法，另⼀种是使⽤getElementsByTagName()⽅法。在到那个元素后，我们就可以利⽤getAttribute()⽅法把它的各种属性的值查询出来。
getAttribute()⽅法是⼀个函数。它只有⼀个参数——你打算查询的属性的名字：
不过，getAttribute()⽅法不能通过document对象调⽤，这与我们此前介绍过的其他⽅法不同。我们只能通过⼀个元素节点对象调⽤它。
例如，你可以把它与getElementsByTagName()⽅法结合起来，去查询每个<p>元素的title属性，如下所⽰：
var ElementsByTagName("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 ElementsByTagName("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 ElementsByTagName("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 ElementById("purchases")
shopping.setAttribute("title","a list of goods")
我们可以利⽤getAttribute()⽅法来证明这个元素的title属性值确实发⽣了变化：
var ElementById("purchases");
Attribute("title"));
shopping.setAttribute("title","a list of goods");
Attribute("title"));
上⾯这些语句将在屏幕上弹出两个alert对话框：第⼀个alter对话框出现在setAttribute()⽅法被调⽤之前，它将是⼀⽚空⽩或显⽰着单
词“null”；第⼆个出现在title属性值被设置之后，它将显⽰着“a list of goods”消息。
在上例中，我们设置了⼀个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调⽤实际完成了两项操作：先把这个属性创建出来，然后再对其值进⾏设置。如果我们把setAttribute()⽅法⽤在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”⽰例⽂档⾥，<p>元素已经有了⼀个title属性，这个属性的值是a gentle reminder。我们可以⽤setAttribute()⽅法来改变它的当前值：
<script type="text/javascript">
var ElementsByTagName("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"))
}
}getattribute方法返回类型
上⾯这段代码将先从⽂档⾥把已经带有title属性的<p>元素全部检索出来，然后把它们的title属性值全部修改为brand new title text。具体
到“购物清单”⽂档，属性值a gentle reminder将被覆盖。
这⾥有⼀个⾮常值得关注的细节：通过setAttribute()⽅法对⽂档做出的修改，将使得⽂档在浏览器窗⼝⾥的显⽰效果和/或⾏为动作发⽣相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看⽂档的源代码时看到的仍将是原来的属性值——也就是
说，setAttribute()⽅法做出的修改不会反映在⽂档本⾝的源代码⾥。这种“表⾥不⼀”的现象源⾃DOM的⼯作模式：先加载⽂档的静态内容、再以动态⽅式对它们进⾏刷新，动态刷新不影响⽂档的静态内容。这正是DOM的真正威⼒和诱⼈之处：对页⾯内容的刷新不需要最终⽤户在他们的浏览器⾥执⾏页⾯刷新操作就可以实现。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。