dom元素節點：1）文件節點；2）元素節點；3）屬性節點；4）文字節點；5）注釋節點
1）建立節點
2）選擇（訪問）節點
3）操作：
1）節點操作
1）新增節點
2）刪除節點
3）替換節點
4）修改內容：
1）文字【text】
2）html
3）表單val
4）改變事件
2）css操作
3）動畫
下文**：
一、建立元素節點
1.1 原生js建立元素節點
document.createelement("p");
var text= document.createtextnode("hello");//
建立文字節點
1.2 jquery建立元素節點
$('
');
二、建立並新增文字節點
2.1 原生js建立文字節點
document.createtextnode("text content");
通常建立文字節點和建立元素節點配合使用，比如：
var textel = document.createtextnode("hello world.");
var pel = document.createelement("p");
2.2 jquery建立並新增文字節點：
var $p = $('hello world.
');
三、複製節點
3.1 原生js複製節點:
var newel = pel.clonenode(true);
true和false的區別：
3.2 jquery複製節點
$newel = $('#pel').clone(true);
注意：轉殖節點要避免`id重複
四、 插入節點
4.1 原生js向子節點列表的末尾新增新的子節點
原生js在節點的已有子節點之前插入乙個新的子節點：
el.insertbefore(newnode, targetnode);
4.2 在jquery中，插入節點的方法比原生js多的多
在匹配元素子節點列表結尾新增內容
把匹配元素新增到目標元素子節點列表結尾
在匹配元素子節點列表開頭新增內容
$('#el').prepend('hello world.
');
把匹配元素新增到目標元素子節點列表開頭
$('hello world.
').prependto('#el');
在匹配元素之前新增目標內容
$('#el').before('hello world.
');
把匹配元素新增到目標元素之前
$('hello world.
').insertbefore('#el');
在匹配元素之後新增目標內容
$('#el').after('hello world.
');
把匹配元素新增到目標元素之後
$('hello world.
').insertafter('#el');
五、刪除節點
5.1 原生js刪除節點
el.parentnode.removechild(el);
el.parentnode.remove();
5.2 jquery刪除節點
$('#el').remove();
六、替換節點
6.1 原生js替換節點
el.repalcechild(newnode, oldnode);
注意：oldnode必須是parentel真實存在的乙個子節點
6.2 jquery替換節點
$('p').replacewith('hello world.
');
七、設定屬性/獲取屬性
7.1 原生js設定屬性/獲取屬性
imgel.setattribute("title", "logo");
imgel.getattribute("title");
checkboxel.checked = true
;checkboxel.checked;
7.2 jquery設定屬性/獲取屬性:
$("#logo").attr();
$("#logo").attr("title");
$("#checkbox").prop();
$("#checkbox").prop("checked");
八、訪問節點
8.1原生js訪問節點方法
node.getelementbyid("id");//
通過使用 getelementbyid() 方法
node.getelementsbytagname("tagname");//
通過使用 getelementsbytagname() 方法
document.getelementsbyclassname("intro");//
通過使用 getelementsbyclassname() 方法
8.2原生js訪問父，子，兄弟節點
//訪問兄弟節點
element.nextsibling //
返回位於相同節點樹層級的下乙個節點。
element.previoussibling //
返回位於相同節點樹層級的前乙個元素。
//訪問父節點
element.parentnode //
返回元素的父節點。
8.3jquery訪問節點方法是通過選擇器訪問，這裡不詳細敘述
原生js和jquery對照
選擇元素 jq el js document.queryselector div div.queryselectorall el mui mui el 0 父 兄弟元素 jq el parent el prev el next el last el first js document.queryse...
原生JS與jQuery操作DOM對比
1.1 原生js建立元素節點 1 document.createelement p 1.2jquery建立元素節點 1 2.1 原生js建立文字節點 1 document.createtextnode text content 1 2 3 var textel document.createtext...
原生JS與jQuery操作DOM對比
1.1 原生js建立元素節點 document.createelement p 1.2jquery建立元素節點 2.1 原生js建立文字節點 document.createtextnode text content 通常建立文字節點和建立元素節點配合使用，比如 var textel document...