前端学习笔记之DOM（一）
生活随笔
收集整理的這篇文章主要介紹了
前端学习笔记之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 的元素對象；
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 里面的選擇器需要加符號，示例如下：
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. 實現代碼
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、title4.3 表單元素的屬性操作
利用 DOM 可以操作如下表單元素的屬性：
type、value、checked、selected、disabled- 案例：密碼框顯示/隱藏密碼；
- 要求：點擊按鈕將密碼框切換為文本框，并可以查看密碼明文。
- 實現思路：
1）圖標切換：點擊眼睛按鈕圖標，把密碼框類型修改為文本框（此時可以看見里面的密碼）；
2）狀態切換：一個按鈕兩個狀態，點擊一次，切換為文本框，繼續點擊一次切換為密碼框；
3）算法：利用一個flag變量，來判斷flag的值，如果是1 就切換為文本框，flag 設置為0，如果是0 就切換為密碼框，flag設置為1 - 實現代碼：
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）點擊按鈕，二維碼盒子隱藏。
- 實現代碼：
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- 開頭做為屬性名并賦值。
例如：
4.7.2 獲取H5自定義屬性
element.getAttribute('data-index'); // 兼容性獲取; element.dataset.index // 或者 element.dataset['index'] // H5新增，IE 11才開始支持.+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
5.節點操作
5.1 為什么學節點操作
獲取元素通常使用的兩種方式：
| 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，如果只想要獲得里面的元素節點，需要做如下處理：
- 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.nextSiblingnextSibling 返回當前元素的下一個兄弟元素節點，找不到則返回null。同樣，也是包含所有的節點。
2. node.previousSiblingpreviousSibling 返回當前元素上一個兄弟元素節點，找不到則返回null。同樣，也是包含所有的節點。
3. node.nextElementSiblingnextElementSibling 返回當前元素下一個兄弟元素節點，找不到則返回null。
4. node.previousElementSiblingpreviousElementSibling 返回當前元素上一個兄弟節點，找不到則返回null。
注意：3、4這兩個方法有兼容性問題， IE9 以上才支持。
解決方案：
- 封裝一個函數解決兼容性問題
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。 - 實現代碼
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）添加刪除程序，單擊刪除，可以刪除當前行。 -
實現代碼
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 入门详解（四）
- 下一篇： 重温前端基础（二） 移动WEB开发