5.5 读写元素属性

5.5  读写元素属性

HTML元素最为常用的部分就是它的属性，例如id、class、href、title或者其他各种属性。JavaScript不仅能够读取这些属性值，而且还能写回新值。

 方 法

有两个函数被用于读写元素属性。getAttribute可以用于读取一个属性的值，而setAttribute则可以用于写入新值。

考虑下面的HTML：

File: read_write_attributes.html (excerpt)

<a id="antares" href="antares.html" title="A far away place">Antares</a>

可以这样读取属性：

File: read_write_attributes.js (excerpt)

var anchor = document.getElementByIdx("antares");

var anchorId = anchor.getAttribute("id");

var anchorTitle = anchor.getAttribute("title");

变量anchorId的值变成“antares”，而anchorTitle的值变成“A far away place”。

为了改变超链接的属性，我们使用setAttribute，并提供了两个参数，一个是想要改变的属性的名字，另一个是我们希望的新值：

File: read_write_attributes2.js (excerpt)

var anchor = document.getElementByIdx("antares");

anchor.setAttribute("title", "Not that far away");

var newTitle = anchor.getAttribute("title");

变量newTitle的值现在是“Not that far away”。

 讨 论

从最初的Netscape时代的随意散漫，发展到现在的严格、全面、规范的标准，DOM标准为处理HTML文档提供了一系列特别的语法。这些特别语法中最为常用的部分就是将DOM属性和HTML属性一一映射的语法。

当文档被解析成DOM形式，一些特殊的属性节点就被创建出来。这些节点并不像子节点那样只能由上面提到的getAttribute和setAttribute来访问。作为一种对早期DOM实现的兼容，现在的DOM规范对HTML做了不少额外的妥协。例如，元素属性可以被直接访问。所以，超链接的href属性既可以通过Link.getAttribute('href')访问，也可以直接通过Link.href来访问。

这种简单的语法不仅清楚，而且易读：在某些情况下，甚至可以说是非常必要的。在Internet Explorer 6以及更低的版本中，通过setAttribute所做的改变不能造成到该元素的实际显示发生变化。所以，通过setAttribute对class、id或style等的改变对该元素的显示完全没有影响，如果想看到变化，则必须使用直接访问属性的方式。

还有一些比较困扰的问题。这种直接访问属性的方式在不同的浏览器中也有一些不同，最典型的例子是Konqueror浏览器。如果某属性不存在，Konqueror返回null，不过所有其他浏览器都会返回一个空字符串。另外，对于link.getAttribute("href")的调用，一些浏览器返回绝对URL（例如，http://www.example.com/ant-ares.html），而其他浏览器则返回实际的属性值，可能是相对URL（例如可能是antares.html）。在这种情况下，直接访问属性可能会更加安全一点，因为它肯定会返回实际的属性值。

那么，应该怎么解决这一类问题呢？

基本的原则是：如果确定某属性已经被赋值，那么直接访问该属性是安全的。如果不确定，应该先使用DOM函数来确保它有值，然后再使用直接访问属性的方法。

例如下面代码可用于读取不确定的属性：

var anchor = document.getElementByIdx("sirius");

if (anchor.getAttribute("title") &&

     anchor.title == "Not the satellite radio")

{

 

}

这样可以在读取属性之前，确定该属性存在，而且不是null。

下面代码则是向一个不确定的属性写入新值：

var anchor = document.getElementByIdx("sirius");

anchor.setAttribute("title", "");

anchor.title = "Yes, the satellite radio";

这段代码确保属性首先被正确地创建出来，然后再用直接访问属性的方式赋值，这样，即使在Internet Explorer中也不会出什么乱子。

不过如果对某些属性的存在非常确定，则这条原则也可以不遵守。例如，所有元素都一定有的属性style和class，对于任何元素，这两个属性都是有效的，因此可以直接访问其值（element.style以及element.className）。

class是两个属性中比较特殊的一个，因为class是JavaScript中的保留字。作为属性，它应该被写作element.className，不过在使用getAttribute/setAttribute时，却应该写作element.getAttribute('class')，但是还有例外，在Internet Explorer中，又写作element.getAttribute ("className")。

还有一个要当心的属性：label。它遵循的原则和class一样。它的属性形式是element. htmlFor。使用getAttribute/setAttribute时，则要写成element.getAttribute("for")，在Internet Explorer中，却写成element.getAttribute("htmlFor")。