JS加強學習-DOM學習05

標籤：

7.6 移除節點   removeChild()

是將父元素中的某個子節點移除掉；這個為徹底移除。

7.7 插入節點   insertBefore

不同於appendChild()，appendChild()為將指定的元素剪下至對象所有子項目的最後。而insertBefore(,)是將指定的元素插入到某個位置之前，第一個參數為指定的元素，第二個參數為父元素中某個子項目的位置，指定元素會插入到第二個參數位置之前。

8. JS設定樣式8.1 JS設定樣式的兩種方式

style：逐條擷取樣式屬性，逐條改變對應樣式。

className：只能擷取頁面通過style設定的類名，無法擷取外聯式引入的。

當然我們需要改變的樣式較少時可以直接通過style的方式改變，可是如果樣式較多就可以先在頁面style標籤中取個類名將所有的樣式放在這個類名下，然後使用className的方法來調用這個類名。

8.2 JS設定樣式時常有的style屬性：

backgroundColor：設定背景顏色

backgroundImage：設定背景圖片

color：設定字型顏色

width：設定元素寬度

height：設定元素高度

border：設定元素邊框

opacity：透明度設定取值範圍為0-1，IE8及以前版本的只支援filter：alpha(opacity=XX);XX為0-100之間的值。

總結：由於JS中不識別“-”，原標籤style中的屬性名稱在JS中都需要將“-”去掉後使用。

9. 動態建立元素9.1 document.write()

document文檔流中，瀏覽器預設的載入順序是從上往下依次載入，等將頁面載入完畢後就會將文檔流關閉。

而當觸發了函數中document.write()時會重新開啟文檔流，這樣就會將文檔中原有載入完的元素全部清除後再進行載入新的文檔流內容。所以document.write()盡量少用或者不用。

9.2 innerHTML

innerHTML是通過賦值的方式給元素建立內容的，內容中如果有其他元素的話會完全按照HTML中的形式展現出來。

但是如果是將字串賦值的話要注意字串的特性，字串具有不可變性，再遇到重複賦值的時候字串也會在記憶體空間重複賦值，極大的影響了程式的運行速度。 

以上問題如果通過數組形式就可以很好的解決，具體實現方式：在重複字串建立時，就通過將新建立的字串放在一個數組中，最後將整個數組重新轉換為字串來賦值給innerHTML。

9.3 document.createElement

var ul = document.createElement("ul"); //建立一對標籤，但是這對標籤還是儲存在記憶體中，需要通過追加或者其他方式來將建立的標準放在目標元素中。

JS加強學習-DOM學習05