DOM元素的獲得
| 原生中獲取的方法 | jQuery |
|---|---|
| getElementById（“”） IE6 | $(“#box p span” ) |
| getElementsByTagName（“”） IE6 | |
| getElementsByName（“”） IE8 | |
| getElementsByClassName（“”） IE8 | |
| querySelector（） | |
| querySelectorAll（） |
注意：原生中的方法不是document的方法，而是所有nodeType為1的節點都有的方法。
jQuery3使用querySelectorAll（）得到所有元素節省了空間,使用正則和遞迴獲得所有節點。
- 特別注意：對於form表單，加油name屬性的，裡面所有控制元件都加name屬性，可以直接document打點獲得。 document.myForm可以得到屬性值為myform的表單，其中的控制元件，可以通過document.myForm.age方式獲得。
DOM元素的節點關係
| 原生中節點關係屬性（不是方法） | jQuery中豐富了節點關係 |
|---|---|
| childNodes | parent() |
| parentNode | parents() |
| firstChlid | closest() |
| lastChild | parentUntil() |
| previousSibling | children() |
| nextSibling | find() |
| siblings() | |
| prev() | |
| prevAll() | |
| next() | |
| nextAll() |
DOM元素的建立
| 原生 | jQuery中節點建立 |
|---|---|
| createElement() | $( ) |
| innerHTML（） | parents() |
$( ) 如果函式中沒有< >就認為傳入的是選擇器；如果有< >則命令$建立孤兒節點。
原生中建立節點之後，必須新增到已有節點上才能生效，新增方法有
- appendChild()
- insertBefore()
insertBefore第二個引數是標杆，通常是第一個元素。insertBefore實際上要選擇一個標杆，插入到這個標杆的前面，但是所有程式設計師都習慣把標杆設為第一個子元素。在第一個子元素之前插入，不就是插入到現有兒子之前。 jQuery中建立節點之後同樣也要新增到已有節點上，新增方法有：
-
append（）
-
appendTo（）
-
prepend（）
-
prependTo（）
-
after（）
-
insertAfter（）
-
before（）
-
insertBefore（）
-
$("p").wrap("<div></div>”);
-
$("p").wrapAll("<div></div>");
原生中建立三步走：
- 建立節點 ： var nli = document.createElement(“li”);
- 新增內容 ： nli.innerHTML = “something”;
- 新增到DOM樹上 ： 兩種方法：父元素.appendChild() 或者 父元素.insertBefore(nli , 標杆)
原生中的innerHTML可以實現新增的功能，只要將複雜DOM結構變為join字串形式，放到innerHTML中作為新增部分。
DOM元素的刪除
- 原生方法
removeChild（） 必須是父節點刪除子節點，不能自己刪除自己
replaceChild（孤兒節點，被替換節點）
- jQuery中元素的刪除
remove（） 表示刪除自己
empty（） 表示清空，等價於innerHTML = “”
replaceAll（），replaceWith（）
DOM元素位置的變化
原理很簡單：一個DOM元素只能在DOM樹有一個位置，如果它再次上樹，則會移動位置。
appendChild( )原理是先將元素從自己的父級上刪除，再加到新的父節點上去。
DOM元素的克隆
- 原生是cloneNode()方法，jQuery叫做clone()。
原生如果要克隆元素的所有內部元素，要加true引數（深克隆）。 oDiv.cloneNode(true)，得到的是孤兒節點，繼續上樹。
- jQuery中不能更改是否要克隆內部元素，一定是克隆的。 $().clone().appendTo();