DOM剩餘的兩個操作一併帶來！

1.刪除操作

removeChild

這個方法依然是父級呼叫的，引數就是要刪除的子節點，其實實際上是剪下，這個方法會把我們刪除掉的元素給返回，我們可以用一個變數去儲存這個被刪除的元素。

  var div = document.body.remove(div); 

這樣我們的div變數就可以儲存剛才被刪除的div這個元素。

2.替換操作

replaceChild(new, origin)

這個方法同樣是父級呼叫，用新的元素new來替換原來的origin元素，原來的被替換掉的元素可以被返回，我們可以像刪除操作那樣用一個變數來儲存。

現在我們就可以通過以上這些方法來動態建立一棵DOM樹了喲~

下面介紹一些Element節點的屬性和方法。

屬性

1.innerHTML

這個屬性可以用字面意思來理解，元素裡面的HTML結構。

 1 div.innerHML = ‘<div>123</div>’;    

我們可以直接通過這個屬性來改變元素內部的結構和內容，不過注意它會直接刪除掉以前的所有結構，如果以前內容還有其他的節點的話，使用的時候就要小心了。

2.innerText/textContent

innerText老版本的火狐瀏覽器不相容，textContent老版本的IE瀏覽器不相容。

這個屬性可以直接調出來元素內部的文字資訊，若果這個元素還有很多的子元素的話，那麼會把子元素裡面的文字資訊一起返回。

不過需要注意的是，如果我們要改寫innerText或者textContent的話，它會像innerHTML一樣，先把內部的所有html結構先刪除掉，然後再寫入text文字，因此裡面有html結構的時候寫入也要小心。

• 這裡提一下，如果我們有很多字串要新增到一個元素的內部的話，雖然用innerHTML或者innerText方法，但是卻不是用innerHML += str的方法，因為+=操作符的效率極低，當字串很多的時候會非常非常消耗效能。

遇到這種情況我們一般是用陣列的join方法將字串全部連線成一個字串，然後一次性寫入innerHTML。

方法

1.ele.setAttribute();

這個方法可以設定元素的屬性（特性），比如class、id等一些行間屬性。

 1 div.setAttribute(‘id’, ‘demo’);    

這個操作就可以給div這個元素設定一個叫做demo的id。

2.ele.getAttribute();

這個方法是獲取元素的行間屬性。

• 同樣這裡需要提一下，每個元素自帶的行間屬性都有自己特殊的功能，而我們通過自己給他們設定的屬性並沒有任何功能，因此我們可以來賦予他們功能和用處。

• 還有一點，我們在後面改變元素的樣式的時候，通常不是直接修改他的css樣式，而是事先寫好它應該變成的樣式，然後裝進一個class裡面，我們直接修改他的類名而不是css樣式。

到這裡，所有的DOM基本操作就都教給大家了，關於DOM大家是不是完全理解了呢？當然還要加強練習哦！