js 中的 DOM 和 BOM

BOM瀏覽器對象模型

  概念：Browser Object Model

  組成：

  •   Window:瀏覽器窗口對象

  •   Navigator:瀏覽器對象

  •   screen:顯示器螢幕對象

  •   History:歷史記錄對象

  •   Location:地址欄對象

Window：瀏覽器窗口對象

 1.創建

  不用創建，直接使用Window對象中的屬性和方法

 2.方法的使用

  • 與彈出框有關的方法

  •   alert() :顯示帶有一段消息和確認按鈕的警告框。

  •   confirm() :重點關注 顯示帶有一段消息以及確認按鈕!取消按鈕的對話框。
      如果點擊確認，那麼該方法返回一個true值；如果點擊取消，那麼該方法返回一個false值

  •   prompt():顯示可提示用戶輸入的對話框。
      如果點擊確認，那麼該方法返回輸入框中輸入的值;如果點擊取消,那麼該方法就不返回輸入框輸入的值

  • 與打開與關閉瀏覽器窗口的方法

  •   close() :關閉瀏覽器窗口。

  •   open():打開一個新的瀏覽器窗口或查找一個己命名的窗口。

  • 與定時器相關的方法

  •   - setlnterval()按照指定的周期(以毫秒計）來調用函數或計算表達式。

  •   setTimeout()在指定的毫秒數後調用函數或計算表達式。

  •   clearInterval()取消由setInterval()設置的 timeout。

  •   clearTimeout()取消由setTimeout()方法設置的timeout。

 3.屬性的使用

  1.獲取其他的BOM對象

  • history
  • location
  • Navigator
  • Screen

  2.獲取DOM對象

  • document：文檔對象

 4.對象的特點

  •   window對象不需要創建，直接使用，window.屬性名/方法名，前面的window還可以省略不寫

  •   可以通過window對象獲取其他的BOM對象和DOM對象

Location地址欄對象

 Location對象包含有關當前URL的資訊。

 1.創建:通過window對象來獲取 window.location,前面的window可以省略不寫

 ⒉屬性:href設置或返回完整的URL。

 3.方法:

  1. reload0重新載入當前文檔。刷新動作

  2. replace()：用新的文檔替換當前文檔。

History歷史記錄對象

1.創建：通過window對象來換器歷史記錄對象 window.history,前面的window可以省略不寫

2.方法：

  • forward()載入history列表中的下一個 URL。

  • back()載入 history 列表中的前一個URL。

  • go()載入 history列表中的某個具體頁面。

3.屬性

length返回瀏覽器歷史列表中的URL數量。

DOM對象

  • Document—文檔對象

  • Element—元素對象

  • Attribute—-屬性對象

  • Text—-文本對象

  • Comment—注釋對象- Node—-節點對象

XML DOM內容–針對XML文檔的標準模型
HTML DOM-針對HTML文檔的標準模型
Document文檔對象

1.創建

 通過window對象獲取文檔對象 window.document, windom可以省略不寫。

2.方法

  • 通過Element元素對象：

 1.getElementById()通過id名稱獲取id名稱對應的元素對象。ID屬性值一般唯一

 2.getElementByTagName()通過標籤名稱獲取對應的元素對象。返回的是一個對象數組

 3.getElementsByClassName() 通過class屬性值獲取對應的元素對象數組

 4.getElementsByName() 通過name屬性值換器對應的元素對象。返回的是一個對象數組

  • 創建其他DOM對象

 1.createComment() 創建注釋節點。

 2.createElement()創建元素節點。

 3.createTextNode()創建文本節點。

 4.createAttribute(name)創建擁有指定名稱的屬性節點，並返回新的Attry對象。

3.屬性

 title 返回當前文檔的標題。

 URL 返回當前文檔的 URL。

4.特點

Comment注釋對象

Element元素對象

1.創建

 有兩種方式創建

  • 通過文檔document的獲取元素對象的方法來獲取元素對象
  • 通過document.createElement() 來創建元素對象

2.方法

3.屬性

4.特點

Node節點對象

 節點對象可以是元素節點，屬性節點，文本節點，任何節點都有父節點和子節點，但是文本節點沒有子節點

方法：

 CRUD操作 添加節點 刪除節點 查找節點 修改節點(替換節點)

  • ​添加節點 appendChild() 向父節點中添加子節點
  • 刪除節點 removeChild() 從父節點中刪除子節點
  • ​替換節點 replaceChild() 用一個新節點替換原來的節點

屬性：

 parentNode：獲取子節點的父節點

 childNodes: 獲取父節點的所有的子節點

 firstChild：獲取父節點中的第一個子節點

 lastChild: 獲取父節點中的最後一個子節點

Event 事件對象

 概念：某些組件被執行了一些操作，會觸發一些功能效果。

 事件有幾個因素：

  事件：某些操作(功能、方法)。如 點擊、雙擊、鍵盤按下、鍵盤彈起…….

  事件源：組件 被操作的對象 元素/標籤 輸入框、超鏈接、按鈕…..

  監聽器：Listener Filter Servlet(服務中間件，橋樑) HTML CSS JS，執行事件的程式碼

  註冊監聽：將事件、事件源、監聽器三者綁定到一起。當事件源上發生了某個事件，則會觸發執行某個監聽器程式碼。

常見的事件：

  1. 點擊事件

 點擊事件： onclick

 雙擊事件： ondblclick

  1. 焦點事件

 獲取焦點： onfocus

 失去焦點 onblur

  1. 載入事件

    ​ onload 一個頁面或者一張影像完成載入

  2. 滑鼠事件

 滑鼠按鍵按下： onmousedown

 滑鼠按鍵鬆開： onmouseup

 滑鼠離開： onmouseout

 滑鼠移動： onmousemove

 滑鼠懸浮到某元素上：onmouseover

  1. 鍵盤事件

 鍵盤按下： onkeydown

  鍵盤鬆開： onkeyup

  鍵盤按下並鬆開： onkeypress

  1. 表單事件

 表單提交：onsubmit

 表單重置：onreset

  1. 選擇和改變事件

  onchange 文本內容發生改變觸發

  onselect 文本被選中觸發

HTML DOM 標籤對象

  1. 標籤體內容獲取和設置 屬性： innerHTML(可以插入文本內容和標籤以及組合標籤) innerText(插入文本內容)

  2. 使用html標籤對象擁有的屬性

  3. 通過標籤對象更改標籤的樣式： style 通過style屬性設置css樣式

    div.style.border = “1px solid black”;

    div.style.background = “red”;

    div.style.backgroundImage = “url(影像路徑)”

    一般不推薦 使用css程式碼提前設置

    通過className屬性給該標籤設置對應的class值

VirMach 便宜 VPS

QNews

QNews