原生JavaScript和jQuery操作DOM元素总结

        DOM(Document Object Model)即文档对象模型。通常，浏览器将HTML或XML文档转化成一个对象模型的集合（即DOM树），JavaScript便可以对DOM节点进行操作以达到预期效果，以下总结了原生JS与Jq操作DOM节点的方法。

①原生JS对DOM节点

• Node类型（基类）

nodeType：节点类型，若为元素则值为1；

nodeName,nodeValue：对于元素节点，nodeName为标签名，nodeValue为null；

firstChild,lastChild：选取元素节点的第一个子节点或最后一个子节点；

appendChild(a),insertBefore(a)：在元素节点最后或起始插入子节点a；

removeChild(a)：移除子节点a；

replaceChild(a,b)：将元素节点下的子节点b替换为新节点a；

• document类型（document_node）

document.documentElement属性指向html标签元素

document.body属性指向body标签元素

getElementById( )：通过id获取元素；

getElementsByTagName( )：通过标签名获取元素；

getElementsByName( )：通过name获取元素；

getElementsByClassName( )：通过class名称获取元素；

• element类型（element_node）
  

tagName：元素标签名；

id：ID名；

className：class名；

getAttribute(a)：获得a属性的值；

setAttribute(a)：设置a属性的值；

removeAttribute(a)：清除a属性的值；

createElement(tag)：创建标签名为tag的元素；

• text类型（text_node）

createTextNode(text)：创建内容为text的文本节点；

• documentfragment类型（document_fragment_node）

createDocumentFragment()：创建虚拟节点，该虚拟节点中构建一个离散DOM块，最后添加到需要位置；

示例：点击按钮生成一个div，并显示第n个段落，n跟随个数变化

            html

                <div id='btntake'>
<button οnclick="divAdd()">点击添加</button>

</div>

           js

             var p = 1;

              var btn = document.getElementById('btntake');

              function divAdd(){

                  var oFragment = document.createDocumentFragment();

                     var odiv = document.createElement('div');

                     var otext = document.createTextNode('第'+ p +'个段落');

                     odiv.className = 'blue background';

                     odiv.appendChild(otext);

                     oFragment.appendChild(odiv);

                  btn.appendChild(oFragment);

                  p++;

              };

②Jq对DOM节点

• 在元素内部插入节点

append()：元素内部追加内容，如$(‘#B’).append(‘< p >A< /p >’); //向id为B的元素中追加一个段落；

prepend()：元素内部前置内容，如$(‘#B’).prepend(‘< p>A< /p>’);向id为B的元素内容前添加一个段落；

• 在元素外部插入节点

after()：在元素后边插入内容，如$(‘#B’).after(‘< p >A< /p >’); //向id为B的元素后面添加一个段落；

before()：在元素之前插入内容，如$(‘#B’).before(‘< p >A< /p >’); //向id为B的元素前面添加一个段落；

• 删除、复制和替换节点

empty()：删除元素中的子节点，并不删除该元素；

remove()：删除整个元素；

clone(true/false)：克隆匹配元素，true时复制所有元素及其事件处理，false时仅复制匹配元素不复制事件；

replaceWith()：替换元素