DOM基礎操作(三)
DOM剩餘的兩個操作一併帶來!
1.刪除操作
removeChild
這個方法依然是父級呼叫的,引數就是要刪除的子節點,其實實際上是剪下,這個方法會把我們刪除掉的元素給返回,我們可以用一個變數去儲存這個被刪除的元素。
var div = document.body.remove(div);
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
這樣我們的div變數就可以儲存剛才被刪除的div這個元素。
2.替換操作
replaceChild(new, origin)
這個方法同樣是父級呼叫,用新的元素new來替換原來的origin元素,原來的被替換掉的元素可以被返回,我們可以像刪除操作那樣用一個變數來儲存。
現在我們就可以通過以上這些方法來動態建立一棵DOM樹了喲~
下面介紹一些Element節點的屬性和方法。
屬性
1.innerHTML
這個屬性可以用字面意思來理解,元素裡面的HTML結構。
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
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等一些行間屬性。
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
1 div.setAttribute(‘id’, ‘demo’);
這個操作就可以給div這個元素設定一個叫做demo的id。
2.ele.getAttribute();
這個方法是獲取元素的行間屬性。
• 同樣這裡需要提一下,每個元素自帶的行間屬性都有自己特殊的功能,而我們通過自己給他們設定的屬性並沒有任何功能,因此我們可以來賦予他們功能和用處。
• 還有一點,我們在後面改變元素的樣式的時候,通常不是直接修改他的css樣式,而是事先寫好它應該變成的樣式,然後裝進一個class裡面,我們直接修改他的類名而不是css樣式。
到這裡,所有的DOM基本操作就都教給大家了,關於DOM大家是不是完全理解了呢?當然還要加強練習哦!