JavaScript-DOM（BOM）操作

核心知識

獲取頁面元素

事件

設置樣式

學習目標

能夠使用id名,標簽名等方式獲取頁面中元素

能夠給標簽注冊點擊事件,并實現對應效果

能夠給標簽通過js方式設置樣式

JavaScript組成

ECMASCRIPT (基礎語法)

DOM（文檔對象模型）

BOM（瀏覽器對象模型）

DOM+BOM

• 為啥要學DOM和BOM?

總結： 通過js中的DOM和BOM操作實現頁面中的一些用戶點擊效果等 注意：不要盲目的認為JS就是用來做網頁特效的。

• 到底什么是DOM和BOM？

DOM： Document Object Model (文檔對象模型) 操作頁面元素 BOM： Browser Object Model (瀏覽器器對象模型) 操作瀏覽器

什么是文檔對象模型（DOM）？

概念部分理解

文檔：HTML文件（document） 對象：對具體事務的抽象【屬性+值】，將HTML抽象成對象總結：通過js操作html文檔中的標簽

文檔樹

將html文件中的標簽，屬性 等轉化為對象，按照標簽的關系以樹狀結構保存到內存中? 文檔樹中的元素: HTML標簽 + 屬性 + 內容信息 ? 文檔樹中的節點： 所有的內容都叫節點（文本節點，標簽節點，屬性節點）

• 如何學習DOM和BOM？

掌握大量的方法（api），屬性。

• 什么是API?

是一些預先定義的函數,目的是提供應用程序與開發人員基于某軟件或硬件得以訪問一組例程的能力例如: Math.max() ...

3.獲取頁面中的元素

• document.getElementById（元素ID）

• document.getElementsByTagName（標簽名）

• document.querySelector（css選擇器）

• document.querySelectorAll（css選擇器）

• 課堂練習

  1. 在如下代碼結構中將第一個列表中所有的文字輸出到控制臺中 2. 在如下代碼結構中將第二個列表中第3個li標簽輸出到控制臺中

4.事件

什么是事件？

事件指的是一種行為動作： 比如 單擊，雙擊，手指按壓，滑動，移動，懸停。。。

事件三要素

事件源： 頁面中的一個具體的標簽事件類型： 行為動作（單擊，雙擊，懸停，滑動。。。） 事件處理程序： 事件發生后的一個結果

事件語法

事件源.事件類型 = 事件處理程序注意：事件處理程序的本質就是一個函數。

事件類型：

• 單擊onclick
• 雙擊ondblclick

事件處理程序中的this關鍵字

函數中的this指向的是外部構造函數指向的對象。事件處理程序中的this指向的是當前事件源

5.操作元素中的屬性

• src屬性【案例:換圖片】

dom.src : 獲取圖片路徑 ----> 絕對路徑 dom.alt: 獲取圖片描述信息備注：dom 指的是通過js獲取的頁面中元素

• className【案例：動畫效果】

//獲取對象的類名 dom.className//給對象添加類名 dom.className = '類名'注意： 1.通過className給元素添加類名會將原來的類名覆蓋掉 2.如果要保證原來的類名依然存在，可以使用拼接字符串的方式 3.去掉類名，賦值為空字符串即可

• innerText 和 innerHTML【案例：設置文字】

//獲取方式 通過innerText獲取,僅僅包含文本 通過innerHTML獲取，若有子標簽時，會包含文本和子標簽備注：1. 在老版本火狐瀏覽器中不支持innerText2. 在老版本火狐瀏覽器中使用textContent設置獲取標簽內容信息3. 2016年將innerText正式納入標準屬性//設置結果 通過innerText設置,若設置中包含了子標簽，該標簽不會被渲染而是當做普通文本顯示 通過innerHTML設置,若設置中包含了子標簽，該標簽會被渲染顯示

• textContent和 innerText

相同點：相同點：獲取的都是文本，將html標簽過濾掉不同點： textContent在獲取內容的時候，將空格和換行效果都顯示 innerText 在獲取內容的時候，沒有空格和換行效果處理兼容性問題： 1.如果元素支持某個屬性，那么會返回該屬性的類型 2.如果元素不支持某個屬性，那么會返回undefined類型 例如：<div id="one"></div>console.log(typeof div.a); //undefinedconsole.log(typeof div.id); //string

• 取消a標簽默認跳轉行為[擴展]

方式1：事件處理程序中最后設置return false; <a id="link" href="https://www.baidu.com">點擊</a> <script> var link = document.getElementById('link'); link.onclick = function(){ alert('你好'); // 方式1：取消a點擊后的默認跳轉行為 return false; return false; }; </script>方式2：設置a標簽的href屬性值為：javascript: <a href="javascript:">點擊2</a> 備注：給a標簽的herf值設置javascript: ,表示將來點擊a時，會阻止默認跳轉行為，并且僅僅會執行js代碼

1：取消a點擊后的默認跳轉行為 return false;

return false;
};

方式2：設置a標簽的href屬性值為：javascript:
點擊2
備注：
給a標簽的herf值設置javascript: ,表示將來點擊a時，會阻止默認跳轉行為，并且僅僅會執行js代碼

總結

以上是生活随笔為你收集整理的js(Dom+Bom)第一天（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

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