DOM:文檔對象模型（document object module）
用於操作頁面元素
jquery 1.version 方式 無兼容性問題 凡是使用jquery1.version 無論是事件操作還是獲取元素等操作都無兼容性問題
獲取元素（element）
通過id獲取元素
<div id = "dv"></div>
document.getElementById('dv') // javascript方式獲取id元素
$('#dv') // jquery方式獲取id元素
通過標籤名獲取元素(返回一個數組，需要遍歷)無兼容性問題
<div></div>
document.getElementsByTagName('div') // javascript方式獲取標籤元素
$('div') // jquery方式獲取標籤元素
通過name屬性值獲取元素(返回一個數組，需要遍歷)無兼容性問題
<input type = "text" name = "user"/>
document.getElementsByName("user") // javascript方式獲取name屬性值元素
$('input[name="user"]') // jquery方式獲取name屬性值元素
通過類樣式名字獲取元素(返回一個數組，需要遍歷)IE8及以下瀏覽器兼容性問題
<div class = "dv"></div>
document.getElementsByClassName("dv") // javascript方式獲取類樣式元素
$('.dv') // jquery方式獲取類樣式元素
通過選擇器獲取元素（類似於jquery獲取選擇器）HTML5 新增 IE7及以下瀏覽器兼容性問題
<ul>
<li>其實</li>
<li>我</li>
<li>是你</li>
<li class = 'active'>爸爸</li>
</ul>
document.querySelector("li.active"); /*獲取li中帶有class爲active的元素*/
document.querySelectorAll("li"); /*獲取所有的li*/
節點（node）
| nodeType(節點類型) | ===1:標籤 | ===2：屬性 | ===3：文本 |
|
nodeName(節點名字) |
大寫的標籤：標籤 | 小寫的屬性名：屬性 | #text:文本 |
| nodeValue(節點的值) | 標籤：null | 屬性：shux屬性的值 | 文本：文本內容 |
JavaScript方式獲取節點 （幾乎沒什麼用處）
獲取父節點 ： .parentNode
獲取父元素 ： .parentElement
獲取子節點 : .childNodes
獲取子元素 : .children
獲取第一個子節點 : .firstChild
獲取第一個 子元素 ： .firstElementChild
獲取最後一個子節點 : .lastChild
獲取最後一個子元素 : .lastElementChild
獲取前一個節點 : .previousSibling
獲取前一個元素 : .previousElementSibling
獲取後一個節點 : .nextSibling
獲取後一個元素 : .nextElementSibling
jQuery方式獲取節點操作
獲取下一個兄弟節點 ： .next()
獲取上一個兄弟節點 ： .prev()
獲取子類選擇器 ： .children()
獲取後代選擇器 ： .find()
查找兄弟節點（排他功能） ：.siblings()
獲取父級元素 ： .parent()
事件
特別提醒 ： 在IE8及以下瀏覽器中沒有事件參數 e，需要使用window.event代替
鼠標事件
鼠標按下事件 ：
.onmousedown = function(){
}
鼠標鬆開事件:
.onmouseup = function(){
}
鼠標進入事件
.onmouseover = function(){ // javascript方式鼠標進入事件
}
.on('mouseenter',function(){ // jquery方式鼠標進入事件
}) // 優點：只觸發一次；若使用mouseover觸發次數不限
鼠標離開事件
.onmouseout = function(){ //javascript 方式鼠標離開事件
}
.on('mouseleave',function(){ //jquery 方式鼠標離開事件
})
鼠標移動事件
.onmousemove = function(){
}
焦點事件
獲取焦點事件：
.onfocus = function(){
}
失去焦點事件：
.onblur = function(){
}
表單事件
提交事件
.submit()
重置事件
.reset()
文本框值發生改變事件
.onchange = function(){
}
點擊事件
點擊事件：
.onclick = function(){
}
雙擊事件：
.ondblclick = function(){
}
鍵盤事件
鍵盤按下事件
document.onkeydown = function(e){
var key = e.keyCode;
}
鍵盤擡起事件
document.onkeyup = function(e){
}
阻止事件冒泡
e.stopPropagation();
window.event.cancelBubble = true // ===== IE8及以下
阻止默認事件
e.preventDefault();
阻止事件冒泡和默認事件
return false;
自定義屬性（IE7及以下瀏覽器兼容性問題）
.setAttribute('data-id',1); /*javascript 設置自定義屬性 data-id*/
$().attr('data-id',1) /*jquery 設置屬性 data-id*/
.getAttribute('data-id'); /*javascript 獲取自定義屬性 data-id*/
$().attr('data-id') /*jquery 獲取屬性 data-id*/
.removeAttribute('data-id'); /*javascript 移除自定義屬性 data-id*/
$().removeAttr('data-id') /*jquery 移除標籤屬性 data-id */
JavaScript的DOM增刪改插、克隆 與 jquery的DOM增刪插、克隆
JavaScript ：
<style>
div {
height: 200px;
width: 200px;
border: 1px solid #ccc;
margin: 100px auto;
}
</style>
<body>
<input type="button" value="追加" id="add">
<input type="button" value="插入" id="insert">
<input type="button" value="移除" id="remove">
<input type="button" value="替換" id="replace">
<input type="button" value="克隆" id="clone">
<a href="javascript:void(0);" id="a"></a>
<div>
<ul></ul>
www.kanglang.xyz<span>事件</span>
</div>
</body>
<!-- 創建元素 -->
<script>
document.querySelector('span').onclick = function(){
alert(1)
}
window.onload = function () {
/* 創建元素的第一種方式: (缺陷：當頁面被加載完畢之後,使用write方法創建元素，那麼頁面上原有存在的內容全部消失)
使用情況：幾乎不使用 */
// document.write('<span>直接寫被創建的元素及內容</span>')
/* 創建元素的第二種方式: innerHTML 使用情況：適中 */
// document.querySelector('a').innerHTML = "<h1>這是使用innerHTML創建的H1元素，無缺陷</h1>"
/* 創建元素的第三種方式及操作: createElement 使用情況：普遍使用 */
// 追加 元素
document.getElementById('add').onclick = function () {
var p = document.createElement('p') // 創建元素
p.innerHTML = "創建了一個p元素"
p.style.color = "red"
document.querySelector('div').appendChild(p) // 將創建的元素追加到div中
}
// 插入 元素
document.getElementById('insert').onclick = function () {
var p = document.createElement('p')
p.innerHTML = "創建了一個p元素"
p.style.color = "red"
document.querySelector('div').insertBefore(p, document.querySelector('ul')) // 將創建的元素插入到div和ul之間
}
// 移除 元素
document.getElementById('remove').onclick = function () {
var p = document.querySelector('p')
if (p) {
document.querySelector('div').removeChild(document.querySelector('p')) // 刪除元素節點
}
}
// 替換 元素
document.getElementById('replace').onclick = function () {
var p = document.querySelector('p')
var h6 = document.createElement('h6')
h6.innerHTML = "現在是h6標籤"
if(p){
document.querySelector('div').replaceChild(h6, p) // 從第一個開始將p元素替換成h6元素
}
}
// 克隆 節點
document.getElementById('clone').onclick = function(){
var cloneN = document.querySelector('div').cloneNode(true) /* 克隆div節點 不會複製事件，參數可選，true：複製當前節點中所有的子節點, false:複製當前節點(默認false) */
document.getElementById('a').appendChild(cloneN)
}
}
</script>
jquery：
<style>
div {
height: 200px;
width: 200px;
border: 1px solid #ccc;
margin: 100px auto;
}
</style>
<body>
<input type="button" value="追加" id="add">
<input type="button" value="插入" id="insert">
<input type="button" value="移除" id="remove">
<input type="button" value="替換" id="replace">
<input type="button" value="克隆" id="clone">
<a href="javascript:void(0);" id="a"></a>
<div>
<ul></ul>
www.kanglang.xyz<span>事件</span>
</div>
</body>
<script>
$('span').on('click',function(){
alert(1)
})
$(function () {
/* 創建元素的方式$('元素標籤及內容') */
// 添加元素
$('#add').on('click',function(){
// append appendTo : 在父級元素中最後添加元素
$('div').append($('<p>子元素被追加到父元素中</p>')) // 父元素.append(子元素)
$('<p>把子元素放在父元素中</p>').appendTo($('div')) // 子元素.appendTo(父元素)
// prepend prependTo :在父級元素中最前面添加元素
})
// 插入元素
$('#insert').on('click',function(){
$('div').before('<p>插入到div元素的前面</p>')
$('div').after('<p>插入到div元素的後面</p>')
})
// 移除元素 移除掉所有選中的元素
$('#remove').on('click',function(){
if($('p')){
// $('p').html('') /*方式1: 移除所有的P元素 缺點：內存泄漏，只是將文本內容設置爲空，標籤元素還在*/
// $('p').empty() /*方式2: 清理門戶：將自身元素中所有的子元素清空,只保留自身標籤 */
$('p').remove() /*方式3： 移除掉所有的P標籤元素(使用) */
}
})
// 克隆節點 參數可選，
/* 與原生JavaScript的區別：無論是false還是true都會複製當前元素及所有子元素，
false：潛複製（不會複製事件）
true: 深度複製（會複製事件）
*/
$('#clone').on('click',function(){
var cloneN = $('div').clone(true)
$('a').append(cloneN)
})
})
</script>
二者之間的區別：
1.刪除元素節點操作：JavaScript原生方式從第一個開始刪除；jquery庫方式找到所有所選中的元素節點全部刪除
2.克隆元素節點操作：JavaScript原生方式根據參數爲true進行復制當前元素的所有子節點，不會複製事件，參數爲false只複製當前元素； jquery庫方式直接複製當前元素的所有子節點，根據參數爲true進行復制事件，爲false不復制事件