原生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
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()：替换元素