當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端学习笔记之DOM（一）

發布時間：2024/9/27 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习笔记之DOM（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

DOM介紹

1.DOM簡介
- 1.1 什么是DOM
- 1.2 DOM樹
2. 獲取元素
- 2.1 如何獲取頁面元素
- 2.2 根據ID獲取
- 2.3 根據標簽名獲取
- 2.4 通過 HTML5 新增的方法獲取
- 2.5 獲取特殊元素（body、html）
- - 2.5.1 獲取body元素
  - 2.5.2 獲取html元素對象
3. 事件基礎
- 3.1 事件概述
- 3.2 事件三要素
- - 3.2.1 案例
- 3.3 執行事件的步驟
- 3.4 常見的鼠標事件
- 3.5 分析事件三要素
4. 操作元素
- 4.1 改變元素內容
- 4.2 常用元素的屬性操作
- 4.3 表單元素的屬性操作
- 4.4 樣式屬性的操作
- 4.5 案例
- - 4.5.1 案例一：點擊關閉二維碼
  - 4.5.2 案例二：精靈圖背景
  - 4.5.3 案例三：顯示/隱藏搜索框文字
  - 4.5.4 案例四：密碼框格式提示錯誤信息
- 4.6 自定義屬性的操作
- - 4.6.1 獲取屬性值
  - 4.6.2 設置屬性值
  - 4.6.3 移除屬性
- 4.7 H5自定義屬性
- - 4.7.1 設置H5自定義屬性
  - 4.7.2 獲取H5自定義屬性
5.節點操作
- 5.1 為什么學節點操作
- 5.2 節點概述
- 5.3 節點層級
- - 5.3.1. 父級節點
  - 5.3.2 子節點
  - 5.3.3 兄弟節點
- 5.4 創建節點
- 5.5 刪除節點
- - 5.5.1 案例：動態生成表格
- 5.6 復制（克隆）節點
- 5.7 動態創建元素的區別
6 DOM操作總結

1.DOM簡介

1.1 什么是DOM

文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。
W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。

1.2 DOM樹

文檔：一個頁面即一個文檔，用 document 表示；
元素：頁面中的所有標簽都是元素，用 element 表示；
節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），用 node 表示。
——而文檔、元素、節點在DOM中看做對象。

2. 獲取元素

2.1 如何獲取頁面元素

在實際開發中，DOM主要用來操作元素，獲取頁面元素主要有以下幾種方式：

根據 ID 獲取；
根據標簽名獲取；
通過 HTML5 新增的方法獲取；
特殊元素獲取。

2.2 根據ID獲取

getElementById() 方法：獲取帶有 ID 的元素對象；

document.getElementById('id');

console.dir()打印出獲取的元素對象，以查看對象的屬性和方法。

2.3 根據標簽名獲取

getElementsByTagName() 方法可返回帶有指定標簽名的對象的集合。

document.getElementsByTagName('標簽名');

注：
1). 得到的是對象的集合，所以在操作里面的元素前需要遍歷；
2). 得到元素對象是動態的；
3). 如果獲取不到元素,則返回空的偽數組(獲取不到對象)。

同樣，也可以獲取某個元素(父元素)內部所有指定標簽名的子元素：

element.getElementsByTagName('標簽名')

注：父元素必須是單個對象(必須指明是哪一個元素對象). 獲取的時候不包括父元素自己。

2.4 通過 HTML5 新增的方法獲取

// 1、根據類名返回元素對象集合：document.getElementsByClassName('類名');// 2、根據指定選擇器返回第一個元素對象：document.querySelector('選擇器');// 3、根據指定選擇器返回所有元素對象：document.querySelectorAll('選擇器');

注意：
querySelector 和 querySelectorAll 里面的選擇器需要加符號，示例如下：

document.querySelector('#nav');

2.5 獲取特殊元素（body、html）

2.5.1 獲取body元素

document.body // 返回body元素對象。

2.5.2 獲取html元素對象

document.documentElement // 返回html元素對象。

3. 事件基礎

3.1 事件概述

JavaScript 能創建動態頁面，而事件是能被（JavaScript ）偵測的行為。
即：觸發— 響應機制。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，當用戶點擊按鈕時產生一個事件，然后執行某些操作。

3.2 事件三要素

事件源（誰）；

事件類型（什么事件）；

事件處理程序（做啥）；

3.2.1 案例

要求：點擊按鈕彈出警示框，彈出“你好”警示框。

4. 實現步驟：
1).獲取事件源；
2)綁定事件，onclick ；
3.)編寫事件處理程序，寫一個函數彈出 alert 警示框。
5. 實現代碼

var btn = document.getElementById('btn'); btn.onclick = function() { alert('你好嗎'); };

3.3 執行事件的步驟

1、獲取事件源- 注冊事件（綁定事件）- 添加事件處理程序（采取函數賦值形式）

3.4 常見的鼠標事件

鼠標事件觸發條件

onclick	鼠標單擊（左鍵）
onmouseover	鼠標經過
onmouseout	鼠標離開
onfocus	獲得鼠標焦點
onblur	失去鼠標焦點
onmousemove	鼠標移動
onmouseup	鼠標彈起
onmousedown	鼠標按下

3.5 分析事件三要素

下拉菜單三要素
關閉廣告三要素

4. 操作元素

JavaScript 的 DOM操作可以改變網頁內容、結構和樣式。開發中，可利用 DOM 操作元素來改變元素里面的內容、屬性等。注意以下都是屬性：

4.1 改變元素內容

element.innerText // 從起始位置到終止位置的內容, 但它去除 html 標簽，同時空格和換行也會去掉 element.innerHTML // 起始位置到終止位置的全部內容，包括 html 標簽，同時保留空格和換行

4.2 常用元素的屬性操作

innerText、innerHTML 改變元素內容src、hrefid、alt、title

4.3 表單元素的屬性操作

利用 DOM 可以操作如下表單元素的屬性：

type、value、checked、selected、disabled

案例：密碼框顯示/隱藏密碼；
要求：點擊按鈕將密碼框切換為文本框，并可以查看密碼明文。
實現思路：
1）圖標切換：點擊眼睛按鈕圖標，把密碼框類型修改為文本框（此時可以看見里面的密碼）；
2）狀態切換：一個按鈕兩個狀態，點擊一次，切換為文本框，繼續點擊一次切換為密碼框；
3）算法：利用一個flag變量，來判斷flag的值，如果是1 就切換為文本框，flag 設置為0，如果是0 就切換為密碼框，flag設置為1
實現代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;} .box input {width: 370px;height: 30px;border: 0;outline: none;} .box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style> </head><body><div class="box"><label for=""><img src="images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 獲取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注冊事件var flag = 0;eye.onclick = function() {// 點擊之后， flag 的值發生變化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 賦值} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script> </body> </html>

4.4 樣式屬性的操作

通過 JavaScript 修改元素的大小、顏色、位置等樣式。

element.style // 行內樣式操作 element.className // 類名樣式操作

注：

JavaScript樣式名稱采用駝峰命名法 ，如 fontSize、 backgroundColor；
JavaScript 修改style 樣式的操作，產生的是行內樣式，CSS 權重高。
如果樣式修改較多，可以采取操作類名方式更改元素樣式；
class是保留字，因此使用className來操作元素類名屬性；
className 會直接更改、覆蓋元素的類名。

4.5 案例

4.5.1 案例一：點擊關閉二維碼

當鼠標點擊二維碼關閉按鈕的時候，則關閉整個二維碼。

實現思路：

1）利用樣式的顯示和隱藏：display:none 隱藏元素 display:block 顯示元素；
2）點擊按鈕，二維碼盒子隱藏。

實現代碼：

// 1、獲取元素 var btn = document.querySelector('.close-btn'); var box = document.querySelector('.box'); // 2.注冊事件程序處理 btn.onclick = function(){box.style.display = 'none'; }

4.5.2 案例二：精靈圖背景

核心思路：
1）利用for循環修改精靈圖片的背景位置 background-position；
2）讓循環里面的索引號 i × 44 即為每個li（圖片）的index（y坐標）。

實現代碼：

var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) {var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px'; }

4.5.3 案例三：顯示/隱藏搜索框文字

**實現效果：**鼠標單擊時，默認文字隱藏；當鼠標離開時，文字顯示。

實現思路：
1）兩個事件：獲得焦點 onfocus 失去焦點 onblur；
2）獲得焦點，判斷表單里面內容是否為默認文字，如果是，就清空表單內容；
3）如果失去焦點，判斷表單內容是否為空，如果為空，則表單內容改為默認文字。

實現代碼：

<body><input type="text" value="手機"><script>// 1.獲取元素var text = document.querySelector('input');// 2.注冊事件獲得焦點事件text.onfocus = function() {if (this.value === '手機') {this.value = '';}// 獲得焦點時，文字顏色變深this.style.color = '#333';}// 3. 注冊事件失去焦點事件text.onblur = function() {if (this.value === '') {this.value = '手機';}// 失去焦點，文字顏色變淺this.style.color = '#999';}</script> </body>

4.5.4 案例四：密碼框格式提示錯誤信息

實現效果：用戶如果離開密碼框，判斷輸入個數，不符合則提示錯誤信息。

** 實現思路：**
1）首先對表單失去焦點事件進行判斷 onblur
2）如果輸入正確則提示正確的信息，顏色為綠色小圖標
3）如果輸入位數不符，則提示錯誤信息，顏色為紅色小圖標；
考慮里面變化樣式較多，采取className修改樣式。

實現代碼：

<body><div class="register"><input type="password" class="ipt"><p class="message">請輸入6~16位密碼</p></div><script>// 1.獲取元素var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');//2. 注冊事件失去焦點ipt.onblur = function() {// 根據表單內值的長度 ipt.value.lengthif (this.value.length < 6 || this.value.length > 16) {// console.log('錯誤');message.className = 'message wrong';message.innerHTML = '您輸入的位數不對要求6~16位';} else {message.className = 'message right';message.innerHTML = '您輸入的正確';}}</script> </body>

4.6 自定義屬性的操作

4.6.1 獲取屬性值

element.屬性 // 獲取屬性值。element.getAttribute('屬性');

區別：

element.屬性：獲取內置屬性值（元素本身自帶的屬性）；
element.getAttribute(‘屬性’)：主要獲得自定義的屬性（標準），程序員自定義的屬性

4.6.2 設置屬性值

element.屬性 = '值' // 設置內置屬性值。 element.setAttribute('屬性', '值');

區別：

element.屬性：設置內置屬性值
element.setAttribute(‘屬性’)：主要設置自定義的屬性（標準）

4.6.3 移除屬性

element.removeAttribute('屬性');

4.7 H5自定義屬性

自定義屬性目的*：保存并使用數據。有些數據可以保存到頁面中而無需保存到數據庫；
自定義屬性獲取是通過 getAttribute(‘屬性’) 。
由于個別自定義屬性，不易判斷是元素的內置還是自定義屬性。因此 H5新增了自定義屬性：

4.7.1 設置H5自定義屬性

H5規定，自定義屬性以 data- 開頭做為屬性名并賦值。
例如：

<div data-index="1"></div> // 或者// 使用 JavaScript 設置： element.setAttribute('data-index',2)

4.7.2 獲取H5自定義屬性

element.getAttribute('data-index'); // 兼容性獲取; element.dataset.index // 或者 element.dataset['index'] // H5新增，IE 11才開始支持.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

5.節點操作

5.1 為什么學節點操作

獲取元素通常使用的兩種方式：

一、利用DOM提供的方法獲取元素二、利用節點層級關系獲取元素

document.getElementById()	利用父子兄節點關系獲取元素
document.getElementsByTagName()	邏輯性強，但是兼容性稍差
document.querySelector 等
邏輯性不強、繁瑣

這兩種方式都可以獲取元素節點，但是節點操作更簡單！

5.2 節點概述

網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在DOM 中，節點用 node 表示。
HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或刪除。

一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。

元素節點 nodeType 為 1
屬性節點 nodeType 為 2
文本節點 nodeType 為 3 （文本節點包含文字、空格、換行等）

在實際開發中，主要操作的是元素節點。

5.3 節點層級

利用 DOM 樹可以把節點劃分為不同的層級關系，常見的是父子兄層級關系。

5.3.1. 父級節點

node.parentNode

parentNode 屬性可返回某節點的父節點，注意是最近的一個父節點；
如果指定的節點沒有父節點則返回 null

5.3.2 子節點

parentNode.childNodes // 標準 parentNode.children // 非標準（各瀏覽器均支持，可放心使用） parentNode.firstChild // 返回第一個子節點，找不到則返回null(所有的節點)。 parentNode.lastChild // 返回最后一個子節點，找不到則返回null(所有的節點) parentNode.firstElementChild // 返回第一個子元素節點，找不到則返回null。 parentNode.lastElementChild // 返回最后一個子元素節點，找不到則返回null

注：

parentNode.childNodes返回包含指定節點的子節點的集合，該集合是實時更新的。返回值里包含所有的子節點（包括元素節點，文本節點等）。一般不提倡使用childNodes，如果只想要獲得里面的元素節點，需要做如下處理：

var ul = document. querySelector('ul'); for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i].nodeType == 1) { // ul.childNodes[i] 是元素節點console.log(ul.childNodes[i]); } }

parentNode.children是只讀屬性，返回所有的子元素節點。它只返回子元素節點，其余節點不返回（重點掌握）。children 雖然是非標準，各瀏覽器均支持，可放心使用。
parentNode.firstElementChild 和 parentNode.lastElementChild 這兩個方法有兼容性問題，IE9 以上才支持。

實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么該如何去獲取第一個子元素節點或最后一個子元素節點？

解決方案：

如果想要第一個子元素節點，可以使用 parentNode.chilren[0]
如果想要最后一個子元素節點，可以使用 parentNode.chilren[parentNode.chilren.length - 1]來獲取。

5.3.3 兄弟節點

1. node.nextSibling

nextSibling 返回當前元素的下一個兄弟元素節點，找不到則返回null。同樣，也是包含所有的節點。

2. node.previousSibling

previousSibling 返回當前元素上一個兄弟元素節點，找不到則返回null。同樣，也是包含所有的節點。

3. node.nextElementSibling

nextElementSibling 返回當前元素下一個兄弟元素節點，找不到則返回null。

4. node.previousElementSibling

previousElementSibling 返回當前元素上一個兄弟節點，找不到則返回null。

注意：3、4這兩個方法有兼容性問題， IE9 以上才支持。

解決方案：

封裝一個函數解決兼容性問題

function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null; }

5.4 創建節點

document.createElement('tagName')

document.createElement() 方法創建由 tagName 指定的 HTML 元素。這些元素根據我們的需求動態生成，所以也稱為動態創建元素節點。

1. node.appendChild(child)

node.appendChild() 方法將一個節點添加到指定父節點的子節點列表末尾。類似于 CSS 里面的 after 偽元素。

2. node.insertBefore(child,指定元素)

node.insertBefore() 方法將一個節點添加到父節點的指定子節點前面。類似于 CSS 里面的 before 偽元素

案例（應用場景）：發布留言功能

實現思路：
1）每單擊按鈕，就動態創建一個li添加到ul 里面。
2）創建li 的同時，把文本域里面的值通過li.innerHTML 賦值給 li
3）如果設定新留言在最后面顯示，就用 appendChild ；反之，如果想要始終在前面顯示，就用insertBefore。
實現代碼

<body><textarea name="" id=""></textarea><button>發布</button><ul></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊事件btn.onclick = function() {if (text.value == '') {alert('您沒有輸入內容');return false;} else {// console.log(text.value);// (1) 創建元素var li = document.createElement('li');// 先有li 才能賦值li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);}}</script> </body>

5.5 刪除節點

node.removeChild(child)

node.removeChild() 方法從 DOM 中刪除一個子節點，返回刪除的節點。

結合上面的留言發布案例，做為本節的刪除案例予以實現

案例：刪除留言案例

實現思路：
1）當把文本域內的值賦值給li 時，同時添加一個刪除的鏈接（a標簽）；
2）獲取所有的鏈接，當點擊當前鏈接時，刪除當前鏈接所在的li；
3）由于a標簽被單擊時，地址欄尾部會出現#，故需阻止鏈接跳轉，相應的就要添加 javascript:void(0); 或者 javascript:;（推薦后者，在使用上更簡單方便）。

5.5.1 案例：動態生成表格

案例分析：
1）由于學生數據是動態的，因此需要用JavaScript 動態生成。這里采用模擬數據，采取對象形式存儲；
2）所有的數據都放到tbody里面的行里面；
3）因為行比較多，需要循環創建多行（對應人數）；
4）每行面又有很多單元格（對應里面的數據），還需繼續使用循環創建多個單元格，并且把數據存入里面（雙重for循環）；
5）最后一列單元格是刪除，需要單獨創建單元格；
6）添加刪除程序，單擊刪除，可以刪除當前行。
實現代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;} td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style> </head><body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成績</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 1.準備數據(在數組中創建模擬數據替代數據庫)var datas = [{name: '周潤發',subject: '影視表演',score: 99}, {name: '李小龍',subject: '影視表演',score: 99}, {name: '劉德華',subject: '流行歌曲',score: 95}, {name: '馬云',subject: '商業運營',score: 95}, {name: '劉強東',subject: '商業運營',score: 90}];// 2. 在tbody 內創建行：通過數組長度取得人數，從而得到動態的要創建的行數。var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) { // 外層for循環決定行數，即tr// 1. 創建 tr行var tr = document.createElement('tr');tbody.appendChild(tr);// 2. 行內創建單元格(跟數據有關的單元格) td；// 單元格的數量取決于每個對象里屬性的個數，for循環遍歷對象 datas[i]for (var k in datas[i]) { // 內層for循環決定列td// k 得到屬性名// object[k] 得到屬性值// 創建單元格 var td = document.createElement('td');// 把對象的屬性值 datas[i][k] 賦給tdtd.innerHTML = datas[i][k];tr.appendChild(td);}// 3. 創建存放“刪除”a標簽的單元格 var td = document.createElement('td');td.innerHTML = '<a href="javascript:;"> 刪除 </a>';tr.appendChild(td);}// 4. 刪除 var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// 語法：node.removeChild(child) // 單擊a標簽刪除當前 a 所在的行(a鏈接的父級的父級) tbody.removeChild(this.parentNode.parentNode)}}</script> </body> </html>

5.6 復制（克隆）節點

node.cloneNode()

node.cloneNode() 方法返回調用該方法的節點的一個副本。也稱為克隆節點/拷貝節點

注：

如果括號參數為空或者為 false ，則是淺拷貝（只克隆復制節點本身，不克隆里面的子節點）。
如果括號參數為 true ，則是深度拷貝（會復制節點本身以及里面所有的子節點）。

5.7 動態創建元素的區別

document.write()
element.innerHTML
document.createElement()

方法特點

document.write()	是直接將內容寫入頁面的內容流，但是文檔流執行完畢，則它會導致頁面全部重繪
innerHTML	是將內容寫入某個 DOM 節點，不會導致頁面全部重繪。
	創建多個元素效率更高（數組形式拼接，不要拼接字符串），結構稍微復雜
createElement()	創建多個元素時，比innerHTML數組法的效率稍低一點點，但結構更清晰。

備注：不同瀏覽器下，innerHTML 效率比 creatElement 要高。

6 DOM操作總結

關于dom操作，我們主要針對于元素的操作。主要有創建、增、刪、改、查、屬性操作、事件操作；
改：主要修改dom的元素屬性，dom元素的內容、屬性, 表單的值等；
查：主要獲取查詢dom的元素；
屬性操作：主要針對于自定義屬性；

序號創建增刪改查屬性操作

1	document.write	appendChild	removeChild	修改元素屬性： src、href、title等	DOM提供的API 方法： getElementById、getElementsByTagName (不推薦）	setAttribute：設置dom的屬性值
2	innerHTML	nsertBefore		修改普通元素內容： innerHTML 、innerText	H5提供的新方法： querySelector、querySelectorAll 提倡	getAttribute：得到dom的屬性值
3	createElement			修改表單元素： value、type、disabled等	利用節點操作獲取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡	removeAttribute移除屬性
4				修改元素樣式： style、className

事件操作：給元素注冊事件，采取事件源.事件類型 = 事件處理程序

鼠標事件觸發條件

onclick	鼠標單擊（左鍵）
onmouseover	鼠標經過
onmouseout	鼠標離開
onfocus	獲得鼠標焦點
onblur	失去鼠標焦點
onmousemove	鼠標移動
onmouseup	鼠標彈起
onmousedown	鼠標按下

總結

以上是生活随笔為你收集整理的前端学习笔记之DOM（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Node.js 入门详解（四）
下一篇： 2017年html5行业报告,云适配发布

HTML

前端学习笔记之DOM（一）

DOM介紹

1.DOM簡介

1.1 什么是DOM

1.2 DOM樹

2. 獲取元素

2.1 如何獲取頁面元素

2.2 根據ID獲取

2.3 根據標簽名獲取

2.4 通過 HTML5 新增的方法獲取

2.5 獲取特殊元素（body、html）

2.5.1 獲取body元素

2.5.2 獲取html元素對象

3. 事件基礎

3.1 事件概述

3.2 事件三要素

3.2.1 案例

3.3 執行事件的步驟

3.4 常見的鼠標事件

3.5 分析事件三要素

4. 操作元素

4.1 改變元素內容

4.2 常用元素的屬性操作

4.3 表單元素的屬性操作

4.4 樣式屬性的操作

4.5 案例

4.5.1 案例一：點擊關閉二維碼

4.5.2 案例二：精靈圖背景

4.5.3 案例三：顯示/隱藏 搜索框文字

4.5.4 案例四：密碼框格式提示錯誤信息

4.6 自定義屬性的操作

4.6.1 獲取屬性值

4.6.2 設置屬性值

4.6.3 移除屬性

4.7 H5自定義屬性

4.7.1 設置H5自定義屬性

4.7.2 獲取H5自定義屬性

5.節點操作

5.1 為什么學節點操作

5.2 節點概述

5.3 節點層級

5.3.1. 父級節點

5.3.2 子節點

5.3.3 兄弟節點

5.4 創建節點

5.5 刪除節點

5.5.1 案例：動態生成表格

5.6 復制（克隆）節點

5.7 動態創建元素的區別

6 DOM操作總結

總結

4.5.3 案例三：顯示/隱藏搜索框文字