js中元素节点的属性与方法的DOM和jquery的异同

Jquery与DOM的区别（一：元素节点的属性与方法）

学习了几天的jquery，体验到了这个函数库的强大与便捷，于此同时也会将之与传统的DOM模型产生一定程度上的混淆，虽然对jquery知之不多但自己觉得还是有必要将自己知道的jquery与DOM模型加以区别，从网上看过几篇帖子，讲的是DOM模型和jquery的区别，大多数的都讲得很宏观，看完之后只是对概念更清晰了些，但对每个节点的查找与设置其属性还不能达到熟练，因此本文既是对DOM与jquery的区分也是对DOM模型的小小总结。

在DOM树中，每个节点可以有零到多个节点，所有类型的节点都有一些共同的属性和方法：

? nodeName 节点的名字（文本节点的nodeName总是#text）→→→jquery中通过get()将jQuery对象转化为DOM的HTML对象在使用nodeName属性（以下空白均为转换）；

?nodeValue 节点的值（通常适用于文本节点，因为元素节点的该值为null）→→→

?nodeType 节点的类型常量值→→→

?firstChild 指向childNodes列表的第一个节点→→→jquery中用$（”

Node1>Node2 : first）或$（”Node1 Node2 : first-child）访问Node1的第一个子节点Node2（">"是直属的父子级关系）；

?lastChild 指向childNodes列表的第一个节点→→→jquery中用$（”

Node1>Node2 : last）或$（”Node1 Node2 :last-child）访问Node1的最后一个子节点Node2;

?childNodes 所有子节点的列表→→→ jquery中用 children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合（参数用以过滤子元素的表达式，如（"#div1"））;

?previousSibling 指向前一个兄弟节点→→→jquery用prev ~ siblings 指向prev 元素的所有同辈siblings 元素（＄（”.div1~div“）找到类别为div1的所有兄弟div）；

?nextSibling 指向后一个兄弟元素→→→jquery用prev ~ siblings 指向prev 元素的所有同辈siblings 元素；

?hasChildNodes( ) 当childNodes存在元素时返回真→→→

?attributes 包含了代表一个元素Attr对象（属性对象）→→→

?removeChild（node）从childnodes列表中删除node →→→ jquery用remove([expr])删除匹配的元素（这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素）；

?appendChild（node）将node添加childnodes列表最后→→→jquery用append （）达到相同效果，另外还有appendTo( ),例如：$("p").appendTo("div")将段落加到div中;

?replaceChild(newnode,oldnode) 将childnodes列表中的oldnode替换成newnode →→→jquery用replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素，例如：$("p").replaceWith("CSDN");

?insertBefore（newnode,refnode）在childNodes中的refnode前插入newnode →→→jquery用insertBefore(content)达到相同效果；