常見的dom操作----原生JavaScript與jQuery

標籤：hello   --   類型   ace   文檔   val   clone   父節點   eva   

1.建立元素 文本節點

 

JavaScript：

document.createElement(),只接收一個參數，建立後需要手動將其添加到文檔樹中，例如：

var newDiv = document.createElement("div");
if(document.body){　　document.body.appendChild(newDiv);
}else{
　　document.documentElement.appendChild(newDiv);
}

document.createTextNode(),只接收一個參數，即要插入節點的文本；

jquery：直接$("<div></div>),或者下面：

• wrap()   // $A.wrap(‘B‘)即元素A外層添加B類型的HTML結果

<div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>
$(‘.inner‘).wrap(‘<div class = "new"/>‘);

結果：

　　<div class="container"> 　　　　<div class="new"> 　　　　　 <div class="inner">Hello</div> 　　　　</div> 　　　　<div class="new"> 　　　　　　<div class="inner">Goodbye</div> 　　　　</div> 　　</div>

• wrapAll()  //所建立的new <div>包裹了所有匹配的元素：

<div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(‘.inner‘).wrapAll(‘<div class="new" />‘);

　結果：　 　　<div class="container"> 　　　<div class="new"> 　　　　<div class="inner">Hello</div> 　　　　<div class="inner">Goodbye</div> 　　 </div>    </div>

• wrappInner() // $A.wrapInner(‘B‘)即元素A內層添加B類型的HTML結果

<div class="container">  <div class="inner">Hello</div>  <div class="inner">Goodbye</div></div>$(‘.inner‘).wrapInner(‘<div class="new" />‘);

　結果： 　　<div class="container"> 　　　　<div class="inner"> 　　　　　　<div class="new">Hello</div> 　　　　</div> 　　　　<div class="inner"> 　　　　　　<div class="new">Goodbye</div> 　　　　</div> 　　</div>

 

2.節點關係及操作 

JavaScript：

父節點：parentNode

子節點：childNodes

兄弟節點：nextSibling,previousSibling

相關操作：

• appendChild()  向子節點列表的末尾添加新的子節點
• insetBefore()    已有子節點之前插入一個新的子節點
• replaceChild()  替換節點
• removeChild()  刪除節點
• cloneNode(true/false)  複製節點

jquery:(比較多選擇，詳情看http://www.css88.com/jqapi-1.9/手冊)

父元素：parent()  parents()

子項目：children()

兄弟節點：next()  nextAll()  prev()  prevAll()  siblings()......

相關操作：

　　節點內部插入，插入的內容變子節點

• append()  appendTo()  向子節點列表的末尾添加新的子節點,注意這兩個內容和目標的位置不同，剛好相反
• prepend() prependTo() 已有子節點之前插入一個新的子節點,注意這兩個內容和目標的位置不同，剛好相反

　　節點外部插入,插入的內容變兄弟節點

• after()  before()　
• insertAfter() insertBefore()

• replaceAll() replaceWith()  功能類似，但是目標和源相反

• remove() detach() 這兩個相似，都是移除元素，後者不會移除綁定的事件及與該元素相關的jQuery資料
• empty() 　不接受任何參數。不僅移除子項目（和其他後代元素），同樣移除元素裡的文本

• clone(flase/true) 深度複製所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文位元組點。和原生JavaScript不同，這裡的false/true表示是否會複製元素上的事件處理函數，而原生的表示深複製還是淺複製

常見的dom操作----原生JavaScript與jQuery