原生js與jquery針對dom的操作的不同之處整理
摘要：
通過兩段程式碼（相同功能效果）來表示其不同：
html部分：
<div class="wrapper">
<ul>
<li>111</li>
<li>222</li...
通過兩段程式碼（相同功能效果）來表示其不同：
html部分：
<div class="wrapper"> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li id="last">555</li> </ul> <button id="add">新增</button> <button id="remove">刪除</button> <button id="replace">替換</button> <input type="text"> <input type="checkbox"> </div>
首先是原生js的程式碼:
//獲取元素
var _ul = document.getElementsByTagName('ul');
var addBtn = document.getElementById('add');
var removeBtn = document.getElementById('remove');
var replaceBtn = document.getElementById('replace');
var _input = document.getElementsByTagName('input');
//事件操作
addBtn.onclick =function () {
//建立元素節點
var node = document.createElement('li');
//建立文字節點
var textNode = document.createTextNode('666');
//新增文字
node.appendChild(textNode);
//新增元素
_ul[0].appendChild(node)
};
removeBtn.onclick =function () {
//移除元素
_ul[0].removeChild(_ul[0].lastChild)
}
//替換元素
replaceBtn.onclick = function () {
var newNode = document.createElement('li');
var newText = document.createTextNode('hello');
var last = document.getElementById('last');
newNode.appendChild(newText);
_ul[0].replaceChild(newNode,_ul[0].lastChild);//父元素.replaceChild(新的節點，舊的節點)
}
//設定屬性
_input[0].setAttribute('placeholder','測試')
//獲取屬性
console.log(_input[0].getAttribute('placeholder'))
//
_input[1].setAttribute('checked','false');
console.log(_input[1].getAttribute('checked'));
//設定樣式
_input[0].style.backgroundColor = 'red';
下面是jquery的程式碼（與上面實現效果相同）：
/獲取元素
var $ul = $('ul');
var $li = $('li');
var $addBtn = $('#add');
var $deleteBtn = $('#remove');
var $replaceBtn = $('#replace');
var $input1 = $('.one');
var $input2 = $('.two');
//事件操作
$addBtn.click(function () {
//建立元素和文字節點
var $li = $('<li>666</li>');//也可不加$，var $li = '<li>666</li>';效果一樣
//新增元素
$ul.append($li);
})
$deleteBtn.click(function () {
//刪除元素
$ul.remove();//刪除被選元素和其子元素
$ul.empty();//刪除被選元素的子元素，此元素本身不會被刪除
});
$replaceBtn.click(function () {
var $newNode = $('<li>hello</li>');//建立節點
var $newNodeq = $('<li>helloq</li>');
//替換元素節點
$('li:first-child').replaceWith($newNodeq);//選擇要被替換的元素.relaceWith(新的節點元素)
$($newNode).replaceAll($('li:last-child'))//新的節點元素.replaceAll(選擇需要被替換的元素)
})
$input1.prop('placeholder','新增');
$input2.attr('checked','true');
console.log($input1.attr('placeholder'));
console.log($input1.prop('placeholder'));
console.log($input2.prop('checked'));//對checked 返回true或false
console.log($input2.attr('checked'))//對checked返回具體的值
//設定樣式
$input1.css('background-color','red')
另外，特此說明一下jquery中prop和attr的不同：
jquery的版本不同，使用attr獲得的結果會不同，比如在在 1.9.0 的版本中：
<input type="checkbox" />
<script>
$(function() {
$('input').click(function()
{ $(this).attr('checked');
});
});
</script>
點選 checkbox，結果都是 undefined！
在 jQuery 1.6 之前，使用 attr() 有時候會出現不一致的行為，所以在jQuery 1.6 開始新增了一個方法 prop()，也是獲取屬性的方法；
使用$(this).prop('checked');結果就為true;
所以，具有true和false兩個屬性的屬性，如checked,selected或者disabled使用prop()，其他的使用attr()。
看網上還有其他解釋（參考連結：https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html）：
- 對於HTML元素本身就帶有的固有屬性（如標籤<a>中的屬性“href、target和class"），在處理時，使用prop方法。
- 對於HTML元素我們自己自定義的DOM屬性（如標籤<a>中的屬性action），在處理時，使用attr方法。
有不正確的地方，歡迎批評指正~~~