JS 基础 —— JS 与 jQuery 操作DOM 对比

对于新手，学的东西多了、杂了，难免混淆，例如PHP 中数据类型数字对应有int与float，而JS 中只有number，故在此记录笔记对比JS 与jQUery操作DOM 的区别。

一、设置/获取内容

JS：

innerHTML属性

document.getElementById('test').innerHTML='<strong>新</strong>内容';//内容中可包含标签，标签将以样式显示

jQuery：

1、html()：作用同JS 的innerHTML。

$('#test').html("<strong>新</strong>内容");

2、text()：只能对于文本。（若有标签，标签将原样显示）

$('#test').text("<strong>新</strong>内容");//内容将设置为：<strong>新</strong>内容

3、val()：只能对于表单的value。

$('#myInput').val("表单value");

html()、text()、val()拥有回调函数，回调函数形式相同，拥有两个参数：被选元素中当前元素的下标及当前元素的原来值。函数以返回形式设置新值。例：

$('#test').html(function(index,originValue){
//被选元素只有#test一个，所以index为0，当使用eq()等过滤时，index则可不为0；originValue为旧的html()返回值。
return "<strong>新</strong>内容";//设置新内容
});

附加：

若要获取html dom 的字符串，可用原生JS 的outerHTML 属性，对应 jQuery 中也可用 prop()方法获取：

JS：

var eleCode = document.getElementById("eleID").outerHTML;

jQuery ：

var eleCode = $("#eleID").prop("outerHTML");

特别说明：

jQuery 获取属性有两个方法，prop()与attr()方法，前者获取的是固有属性（property：固有属性），attr()可获取自定义属性，如：

var value = $("#eleID").attr("data-my-attribute");

回顾下，JS 获取自定义属性（data-*）的方式：

var value = document.getElementById("eleID").dataset.myAttribute;

自定义属性集合保存在dataset 属性（注意大小写）中的，属性名为去掉data 与短线后以驼峰命名法命名。查看笔记： http://blog.csdn.net/qq_19865749/article/details/52494929

二、添加新节点

JS：

JS中节点的内容单独为文本节点。注意创建元素与添加元素的函数名！

1、创建元素：document.createElement()

2、创建文本节点：document.createTextNode()

3、添加文本节点与子节点：element.appendChild(childNode)

例：

var newNode=document.createElement("p");
var textNode=document.createTextNode("新段落");
newNode.appendChild(textNode);
document.getElementById("myDiv").appendChild(newNode);//将新元素节点添加到某个div里面

jQuery：

1、append()：在被选元素的后面追加文本或添加节点。例：

$("p").append("包含内联元素，<i>追加的内容</i>");//对于添加字符串或内联元素，则是追加内容
$("p").append("<p>添加的新段落</p>");//对于块元素，则相当于在元素后面添加块元素

2、prepend()：与append()位置相反，在前面加文本或节点。

3、还有与上面两个作用对应相同的一对：after()与before()，用于分别在被选元素前面与后面插入内容（可包含标签）。

说明：上面jQuery 的四个函数都可有多个字符串参数，用于顺序添加该参数的内容。如：

ar txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素

三、删除子节点

JS：

方式一：分别使用getElementById等方法找到需删除的节点与其父节点，然后使用parentElementNode.removeChild(childElementNode)删除节点。

方式二：找到需删除的元素，通过属性parentNode找到其父元素，再删除。例：

var child=document.getElementById("test");//需删除的节点
child.parentNode.removeChild(child);

jQuery：

remove()：删除被选元素及其子元素。可提供一个参数对被选元素进行过滤，如：$("p").remove(".del");删除具有类del的p元素及其子元素。
empty()：从被选元素中删除子元素。

附加：XML DOM 相关：

在下面的例子中，我们使用 DOM 引用从 <to> 元素中获取文本：

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

xmlDoc -由解析器创建的 XML 文档
getElementsByTagName("to")[0] - 第一个 <to> 元素
childNodes[0] - <to> 元素的第一个子元素（文本节点）
nodeValue - 节点的值（文本本身）