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

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

object.getAttribute(attribute)

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

获取每个

元素的class属性，如下所示：

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




2.setAttribute

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

object.setAttribute(attribute,value)

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

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

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

然后我们试着用setAttribute方法来改变div的class值：
刷新浏览器会发现，div从红色变成了蓝色，并且getAttribute("class")返回的结果也是 "two"

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




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