DOM中获取和设置元素的属性（getAttribute、setAttribute）
- getAttribute
- setAttribute
至此，我们已经介绍了3种获取特定元素的方法:分别是getElementById、getElementsByTagName和getElemetByCIassName。得到需要的元素以后，我们就可以设法获取它的各个属性。getAttribute方法就是用来做这件事的。相应地，setAttribute方法则可以更改属性节点的值。
getAttribute
getAttribute是一个函数。它只有一个参数你打算查询的属性的名字 :
object. getAttribute(attribute)getAttribute 方法不属于document 对象，所以不能通过document对象调用。它只能通过元素节点对象调用。例如，可以与getElementsSyagName方法合用，获取每个
元素的title属性，如下所示:
var paras = document.getElementsByTagName('p');
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute('title'));
}把上面这段代码放到前面给出的“购物清单”文件的末尾，然后在Web浏览器里重新加载这个页面，屏幕上将弹出一个显示着文本消息“a gentle reminder"的alert对话框。
在“购物清单”文件里只有一个<p>元素，并且它有title属性。假如这份文档有更多个中元素，并且它们没有title属性，则getAttribute(“title”)方法会返回null值。在JavaScript里，null的含义是“没有值”。 把下面代码添加到“购物清单”文件中的现有<p>标签之后:
<p>This is just a test</p>重新加载这个页面。这一次，你将看到两个alert对话框，而第二个对话框将是片空白或者是只显示着单词“null”， 这取决于你使用是哪种Web浏览器。
我们可以修改脚本，让它只在title属性有值时才弹出消息。我们将增加一条if语句来检查getAttribute的返回值是不是null。
var paras = document. getElementsByTagName("p");
for (var i=0; i< paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if (title_text != null) {
alert(title_text);
}
}现在重新加载这个页面，你会看到一个显示着“a gentle reminder"消息的alert对话框，如图所示。
setAttribute
此前介绍的所有方法都是用来获取信息，setAttribute(有点有不同:它允许我们对属性节点的值做出修改。与getAttribute一样，setAttribute也只能用于元素节点:
object.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对话框:第一个alert对话框出现在setAttribute被调用之前，它将是一片空白或显示单词 “null”; 第二个出现在设置title属性值之后，它将显示“a list of goods"消息。
在上例中，我们设置了一个节点的title属性，这个属性原先并不存在。这表明setAttribute实际完成了两项操作:先创建这个属性，然后设置它的值。如果setAttribute 用在一个本身就有这个属性的元素节点上，这个属性的值就会被覆盖掉。
在“购物清单”示例文档里，
元素已经有了一个title属性，这个属性的值是a gentle reminder。可以用setAttribute来改变它的值:
var paras = document . getElementsByTagName("p");
for (var i=0; i< paras.length; i++)｛
var title_ text = paras[i]. getAttribute("title");
if (title_ text)｛
paras[i]. setAttribute("title"，"brand new title text");
alert(paras[i]. getAttribute("title"));
｝｝上面这段代码将先丛文档里获取全部带有title属性的<p>元素，然后把它们的title属性值都修改为brand new title text。 对“购物清单”文件来说，属性值a gentle reminder 会被覆盖。
这里有一个非常值得关注的细节:通过setAttribute 对文档做出修改后，在通过浏览器的view source (查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。
