一個元素可以修改它的內容、屬性和樣式。

目錄

一、DOM修改元素

1. 修改屬性

2. 修改樣式

二、添加/刪除元素

1. 添加一個新元素

2. 優化

3. 刪除元素

一、DOM修改元素

1. 修改屬性

（1）字符串類型的 HTML 標準屬性（上篇）

（2）bool 類型的 HTML 標準屬性（上篇）

（3）自定義擴展屬性

HTML 標準中沒有規定，程序員根據自身的需要自發添加的屬性就是自定義屬性。

a：自定義屬性經常用于代替 id、class 或元素選擇器，作為查找觸發事件的元素的條件；CSS 的各種選擇器均有不足之處：

i. id 選擇器，只能選1個；

ii. class 選擇器，本職工作是定義樣式，而樣式的修改極其頻繁！如果用class選擇器查找元素綁定事件，一旦樣式類發生變化，程序必然出錯；

iii. 元素選擇器，因為實現同一種效果，可選的標簽名優很多，沒有統一規定。如果用元素選擇器查找觸發事件的元素，綁定事件，則元素一改，功能又立刻出錯。

為了解決以上問題，就可以為元素添加自定義屬性，當查找觸發事件的元素時，用屬性選擇器[自定義屬性]來查找即可。

b：在 js 中訪問自定義擴展屬性

要注意自定義屬性不能用?.?訪問，因為自定義屬性是后天程序員自發添加的，在 HTML 標準中沒有規定。所有在內存中的元素對象上，不包含自定義擴展屬性！可以用舊核心DOM：

元素.getAttribute("自定義屬性名")

元素.setAttribute("自定義屬性名", "屬性值")

在新版的HTML5標準中，有新的規定：

① HTML 中，所有自定義屬性名必須以 data- 開頭：<元素 ??data-自定義屬性名="屬性值">

② 如果在 html 中以 data- 開頭了，則 js 中: 元素.dataset.自定義屬性名。

舉例：點擊按鈕，記錄次數；

click me

2. 修改樣式

（1）修改內聯樣式

格式：元素.style.css屬性="屬性值"

由于有些 css 屬性名中帶-，這樣會和減法的 - 號沖突；所以所有帶 - 的 css 屬性名必須去掉 - 變駝峰命名，比如：font-size ->? fontSize、background-color -> backgroundColor、list-style-type -> listStyeType。

（2）獲取樣式

使用元素 .style.css 屬性的方式，只能獲取內聯樣式，無法獲得內部或外部樣式表中層疊或繼承來的 css 屬性值。所以今后要想獲得元素任意 css 屬性值，都要獲得計算后的樣式。計算后的樣式就是最終應用到一個元素上的所有 css 屬性的總和。獲取方法分為兩步：

i. 先獲得計算后的樣式對象：var style=getComputedStyle(元素對象);

ii. 從完整的樣式對象中只提取個別css屬性：style.css屬性;

舉例：獲取 h1 元素計算后的樣式；

Welcome

Welcome to my web site

在實際的項目中，很多效果都需要批量修改一個元素的多個 css 屬性，而 .style 一句話只能修改一個 css 屬性，如果修改多個 css 屬性時代碼會很繁瑣；所以只要批量設置一個元素的多個 css 屬性，都用?class 代替 .style。

二、添加/刪除元素

1. 添加一個新元素

（1）創建一個新的空元素對象：

var 新元素對象=document.createElement("標簽名") //eg： var a=document.createElement("a");//

（2）為新元素添加必要屬性：

元素對象.屬性名=新值 //eg： a.innerHTML="go to tmooc"; a.href="http://tmooc.cn"; // go to tmooc

（3）將新元素添加到 DOM 樹的指定父元素下：

//在父元素下末尾追加新元素 父元素.appendChild(新元素) //在父元素下插入到一個現有子元素之前 父元素.insertBefore(新元素，現有子元素) //替換父元素下的一個現有的子元素 父元素.replaceChild(新元素，現有子元素)

舉例：創建一個a元素和一個文本框；

2. 優化

修改 DOM 樹的內容會導致重排重繪，但頻繁重排重繪會降低頁面加載的效率，如果父元素已經在頁面上了，要添加多個平級子元素，就要借助于文檔片段對象來實現。

文檔片段是指內存中臨時保存多個平級子元素的虛擬父元素，使用方法：

（1）先創建文檔片段對象:

var 文檔片段對象=document.createDocumentFragment();

（2）將子元素先添加到文檔片段對象中

文檔片段對象.appendChild(子元素)

（3）將文檔片段對象一次性添加到頁面上

父元素.appendChild(文檔片段對象);

3. 刪除元素

父元素.removeChild(子元素)

舉例：動態生成表格；

CSS HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。