DOM与jquery的区别（二：元素属性与CSS样式表）

元素属性：
DOM:
即便每个节点对象都有attribute方法，然而只有元素节点才能有特性。元素节点的attributes属性其实是NameNodeMap（NamedNodeMap 接口），它提供了一些用于访问和处理内容的方法，包括：

• getNamedItem(name) ———— 返回 nodeName 属性值等于name的节点；（要获取该节点属性的值可以用” .value”)
• removeNamedItem(name) ———— 删除nodeNamedItem 属性值等于 name 的节点；
• setNamedItme（node） ———— 将 node 添加到列表中，按其 nodeName属性进行索引；
• item（pos） ———— 返回在位置 pos 的节点；
  因为Attr节点也有一个完全等同于nodeValue属性的value属性，并且有name属性和nodeName属性保持同步，因此我们可以随意使用这些属性来修改节点特性，对此，DOM又定义了三个元素方法帮助访问特性：
• getAttribute(name) ———— 等同于 attributes.getNamedItem(name).value;
• setAttribute(name,newValue) ————等同于 attributes.getNamedItem(name).value=newValue；（还可以用于添加新的属性与属性值，不足是两个参数必须写完，比如disabled就必须写 setAttribute（“disabled“，“disabled”））；
• removeAttribute(name) ———— 等同于attributes.removeNamedItem(name) 。
  通过这些方法就可以直接处理特性值，接下来我们在来看看通过jquery来控制节点特性吧：
  jquery：
  就属性而言jquery可以通过属性选择器来定位到元素，通过attr( )方法设置指定节点的属性值；
  $( "[attribute] "),$(” [attribute=’value’] “),在之前也可以指定所在的元素，例如：$(“input[name=’newsletter’]”)； 修改节点属性jquery的attr（）更为便捷，直接通过：所在节点.attr(name|pro,val|fn)它不仅可以直接设置属性名为name或者作为属性的“名/值对”对象pro的属性值，还可以返回一个函数的返回值作为属性，例如：$("img").attr("title", function() { return this.src })，把src属性的值设置为title属性的值。另外如果设置多个属性圆弧中间要使用花括号并用逗号分隔，例如： $(“img”).attr({ src: “test.jpg”, alt: “Test Image” });
  值得注意的是在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，使用prop()方法，使用与attr()方法完全一致。

单从元素属性来讲，DOM与jquery的获取与设置属性值只是使用的方法不同，但在元素属性名称及值的获取略有不同，在DOM在class属性是className而jquery就是class，DOM通过getNamedItem(name) .value而jquery要通过val( )方法获取值，例如： $(“input[value=’666’]”).val()；接下来我们在来看看对CSS样式表的控制吧： CSS样式表： DOM： 在DOM中，采用了IE4.0的方法对每个元素引入了Style对象，用这个对象来管理元素的CSS样式，对于每个CSS样式，Style对象都包含一个相应的属性，但是在写法上略有不同，对于两个词的样式采用了驼峰命名法，去掉了中短线，例如：background-color对应style对象的属性是：style.backgroundColor，这样来我们就可以改变css样式了，例如更改一个div的css边框属性更改为“1px solid black”：var oDiv = document.getElementById(“div1”); oDiv.style.border = “1px solid black”;这样的缺陷是我们得一个一个的去设置样式，当然我们也可以在js外面写好样式表，在通过setAttribute（”className”,”newName”）改变当前样式的class;通过style的属性我们还可以去设置：hover 伪类来实现移入样式的效果（这得使用onmouseover和onmouseup事件的配合）； jquery： 在jquery中操作样式表就变得极为简单了，jquery提供了css( )方法操作样式，使用方法和attr( )十分类似，例如上例修改div：$(“#div1”).css(“border”,”1px solid black”);这个方法就可以同时设置样式了，同样的间要使用花括号并用逗号分隔。
与DOM不同的是css样式的名称就和css完全一致了而不是DOM的驼峰命名法。