查找
JS方法1
查找節(jié)點(diǎn)1
// JS : 返回id為'test'的節(jié)點(diǎn)：
var test = document.getElementById('test');
// JQuery : 返回id為'test'的節(jié)點(diǎn)：
var test = $('#test');
查找節(jié)點(diǎn)組1
// JS : 返回類(lèi)名為'test'的節(jié)點(diǎn)組：
var arrTest = document.getElementsByClassName("test");
// JS : 返回tag為'p'的節(jié)點(diǎn)組：
var arrP = document.getElementsByTagName("p");
// JQuery : 返回類(lèi)名為'test'的節(jié)點(diǎn)組：
var arrtest = $(".test");
JS方法2
查找節(jié)點(diǎn)2
// JS : 返回id為'test'的節(jié)點(diǎn)：
var test = document.querySelector('#test');
// JQuery : 返回id為'test'的節(jié)點(diǎn)：
var test = $('#test');
查找節(jié)點(diǎn)組2
// JS : 返回id為'test'的節(jié)點(diǎn)組
var arrTest = document.queryAllSelector('.test');
JQuery : 返回id為'test'的節(jié)點(diǎn)：
var arrTest = $('.test');
小結(jié)
根據(jù)JS和JQuery的對(duì)比可看出缸逃，它們的共同點(diǎn)在于方法2的選擇器（Selector）穗慕，所以掌握了選擇器的方法，便可以兩者切換使用。由于Mui框架不建議使用JQuery框架，但如果熟悉了方法2，一樣能熟練使用原生的對(duì)DOM的查找坯屿。
所以，如果使用原生方法巍扛，建議使用 querySelector(), queryAllSelector()领跛。且在選擇器方面方面多加訓(xùn)練，畢竟CSS也用得到
添加
| 對(duì)比 |
JS |
JQuery |
| 創(chuàng)建節(jié)點(diǎn) |
createElement() |
$('<p></p>') |
| 首部插入 |
無(wú) |
prepend() |
| 末尾插入 |
appendChild() |
append() |
| 元素前插入 |
insertBefore(newElement, referenceElement) |
before() |
| 元素后插入 |
insertAfter(newElement, referenceElement) |
after() |
創(chuàng)建節(jié)點(diǎn)
// JS : 創(chuàng)建節(jié)點(diǎn)
var para = document.createElement("p");
// JQuery : 創(chuàng)建節(jié)點(diǎn)
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
//創(chuàng)建節(jié)點(diǎn)
var para = document.createElement("p");
// 元素節(jié)點(diǎn)列表
var list = document.querySelector("#list");
// 參考元素
var ref = document.querySelector("#ref");
// 元素前插入
list.insertBefore(para, ref);
// JQuery
// 創(chuàng)建節(jié)點(diǎn)
var para = $("<p></p>");
// 元素節(jié)點(diǎn)列表
var list = $("#list");
// 參考元素
var ref = $("#ref");
// 元素前插入
ref.befor(para);
元素后插入
// JS
//創(chuàng)建節(jié)點(diǎn)
var para = document.createElement("p");
// 元素節(jié)點(diǎn)列表
var list = document.querySelector("#list");
// 參考元素
var ref = document.querySelector("#ref");
// 元素前插入
list.insertAfter(para, ref);
// JQuery
// 創(chuàng)建節(jié)點(diǎn)
var para = $("<p></p>");
// 元素節(jié)點(diǎn)列表
var list = $("#list");
// 參考元素
var ref = $("#ref");
// 元素前插入
ref.after(para);
刪除
刪除節(jié)點(diǎn)
// JS
// 父元素節(jié)點(diǎn)
var list = document.querySelector("#list");
// 子元素
var child = document.querySelector("#child");
// 刪除元素
list.removeChild(child);
// JQuery
// 元素節(jié)點(diǎn)
var node = $("#node");
// 刪除元素撤奸，包括它的子節(jié)點(diǎn)
child.remove();
修改
| 對(duì)比 |
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('哈哈');
例子效果圖
預(yù)覽
DOM預(yù)覽
代碼預(yù)覽（參考網(wǎng)上）
