js和JQuery对DOM增删改查的对比

查找

JS方法1

对比	JS	JQuery
节点	getElementById()	$('')
节点组	getElementByClassName()	$('')
节点组	getElementByTagName()	$('')

查找节点1

// JS : 返回id为'test'的节点：
var test = document.getElementById('test');

// JQuery : 返回id为'test'的节点：
var test = $('#test');

查找节点组1

// JS : 返回类名为'test'的节点组：
var arrTest = document.getElementsByClassName("test");

// JS : 返回tag为'p'的节点组：
var arrP = document.getElementsByTagName("p");

// JQuery : 返回类名为'test'的节点组：
var arrtest = $(".test");

JS方法2

对比	JS	JQuery
节点	querySelector()	$('')
节点组	queryAllSelector()	$('')

查找节点2

// JS : 返回id为'test'的节点：
var test = document.querySelector('#test');

// JQuery : 返回id为'test'的节点：
var test = $('#test');

查找节点组2

// JS : 返回id为'test'的节点组
var arrTest = document.queryAllSelector('.test');

JQuery : 返回id为'test'的节点：
var arrTest = $('.test');

小结

根据JS和JQuery的对比可看出，它们的共同点在于方法2的选择器（Selector），所以掌握了选择器的方法，便可以两者切换使用。由于Mui框架不建议使用JQuery框架，但如果熟悉了方法2，一样能熟练使用原生的对DOM的查找。

所以，如果使用原生方法，建议使用 querySelector(), queryAllSelector()。且在选择器方面方面多加训练，毕竟CSS也用得到

---

添加

对比	JS	JQuery
创建节点	createElement()	$('<p></p>')
首部插入	无	prepend()
末尾插入	appendChild()	append()
元素前插入	insertBefore(newElement, referenceElement)	before()
元素后插入	insertAfter(newElement, referenceElement)	after()

创建节点

// JS : 创建节点
var para = document.createElement("p");

// JQuery : 创建节点
var para = $("<p></p>");

首部插入

// JQuery : 首部插入
var para = $("<p></p>");
var list = $("#list");
list.prepend(para);

末尾插入

// JS : 末尾插入
var para = document.createElement("p");
var list = document.querySelector("#list");
list.appendChild(para);

// JQuery : 末尾插入
var para = $("<p></p>");
var list = $("#list");
list.append(para);

元素前插入

// JS
//创建节点
var para = document.createElement("p");
// 元素节点列表
var list = document.querySelector("#list");
// 参考元素
var ref = document.querySelector("#ref");
// 元素前插入
list.insertBefore(para, ref);


// JQuery
// 创建节点
var para = $("<p></p>");
// 元素节点列表
var list = $("#list");
// 参考元素
var ref = $("#ref");
// 元素前插入
ref.befor(para);

元素后插入

// JS
//创建节点
var para = document.createElement("p");
// 元素节点列表
var list = document.querySelector("#list");
// 参考元素
var ref = document.querySelector("#ref");
// 元素前插入
list.insertAfter(para, ref);


// JQuery
// 创建节点
var para = $("<p></p>");
// 元素节点列表
var list = $("#list");
// 参考元素
var ref = $("#ref");
// 元素前插入
ref.after(para);

删除

对比	JS	JQuery
删除节点	removeChild()	remove()

删除节点

// JS
// 父元素节点
var list = document.querySelector("#list");
// 子元素
var child = document.querySelector("#child");
// 删除元素
list.removeChild(child);


// JQuery
// 元素节点
var node = $("#node");
// 删除元素，包括它的子节点
child.remove();

修改

对比	JS	JQuery
修改html	innerHtml	html()
修改文本	innerText	text()

修改html

// JS
var p = document.getElementById('test');
p.innerHtml = '<span style="color:red">RED</span>';

// JQuery
var p = document.getElementById('#test');
p.html('<span style="color:red">RED</span>');

修改文本

// JS
var p = document.getElementById('test');
p.innerText = '哈哈';

// JQuery
var p = $('#test');
p.text('哈哈');

例子效果图

DOM增删改查

预览

DOM预览
代码预览（参考网上）