JavaScript学习——DOM获取和设置属性

1.getAttribute是一个函数。它只有一个参数——你打算查询的属性的名字：

object.getAttribute(attribute)

getAttribute方法不属于document对象，所以不能通过document对象进行调用。例如，可以与getElementsByTagName方法合用。

获取每个<ul>元素的class属性，如下所示：

<script>var paras = document.getElementsByTagName("ul");for(var i=0;i < document.getElementsByTagName("ul").length;i++){if(paras[i].getAttribute("class")){alert(paras[i].getAttribute("class"));}}</script>

在这里已经对程序做了处理，如果文档中有多个<ul>元素，并且其中几个<ul>元素没有class属性值，那么getAttribute("class")方法会返回"null"。所以加了一个if判断，如果非null就alert。

2.setAttribute

之前的方法都是用来获取信息的，这个方法有点不同：它允许我们对属性节点的值做出修改。与getAttribute一样，setAttribute也只能用于元素节点：

object.setAttribute(attribute,value)

例如我们先写一个div并且设置它的class属性：

<div  class="one" id="zc_1"></div>

然后去css文件中分别写两个不同类型的样式：

.one{width: 100%;height: 200px;background-color: red;}.two{width: 100%;height: 200px;background-color: blue;}

然后我们试着用setAttribute方法来改变div的class值：

<script>var shopping = document.getElementById("zc_1");shopping.setAttribute("class","two");alert(shopping.getAttribute("class"));</script>

刷新浏览器会发现，div从红色变成了蓝色，并且getAttribute("class")返回的结果也是 "two"

还有一个非常值得关注的细节：通过setAttribute对文档做出修改后，在通过浏览器查看HTML的时候会发现class仍然是改变前的属性值。也就是说setAttribute做出的修改并不会直接反应在文档本身的源码里。

这种表里不一的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。