Python12/25--前端之BOM/DOM
-
文件物件模型 Document Object Model
-
文件物件模型 是表示和操作 HTML和XML文件內容的基礎API
-
文件物件模型，是W3C組織推薦的處理可擴充套件標記語言的標準程式設計介面
2. DOM分類
-
核心 DOM - 針對任何結構化文件的標準模型
-
XML DOM - 針對 XML 文件的標準模型
-
HTML DOM - 針對 HTML 文件的標準模型
文件中的每一個部分都是節點,包括document 元素 屬性 文字...
2.2 節點的分類
-
Doctype 文件型別
-
Document 文件 Element 元素 Attr 屬性
-
Text 文字
-
Comment 註釋
2.3 節點屬性
-
nodeName 節點名字
-
nodeValue 節點值
-
nodeType 節點型別
三、獲取元素物件
3.1 通過js選擇器
-
getElement系列
-
querySelector系列
四、 文件結構和遍歷文件
4.1 節點關係
-
父節點 父元素
-
子節點 子元素
-
同輩節點 同輩元素
-
祖先節點 祖先元素
-
後代節點 後代元素
4.2 作為節點樹的文件
-
parentNode 父節點childNodes 所有子節點的集合 firstChild 第一個子節點 lastChild 最後一個子節點 nextSibling 下一個兄弟節點 previousSibling 上一個兄弟節點
4.3 作為元素樹的文件
-
parentElement 父元素（大部分情況下 parentElement 等同於 parentNode）children 所有子元素的集合
-
firstElementChild 第一個子元素lastElementChild 最後一個子元素 nextElementSibling 下一個兄弟元素 previousElementSibling 上一個兄弟元素
五、 屬性
5.1 HTML標籤的屬性和元素物件的屬性
HTMLElement物件映射了元素的HTML屬性
5.2 獲取和設定非標準的HTML屬性
-
getAttribute(attrname) 獲取自定義或內建屬性的值setAttribute(attrnane, value) 設定自定義或內建屬性 hasAttribute(attrname) 判斷是否存在該屬性 removeAttribute() 移出自定義或內建的屬性
5.3 作為Attr節點的
-
setAttributeNode()
-
getAttributeNode()document.createAttribute() 建立屬性節點
var attr = document.createAttribute('class');
attr.value = 'active';
box.setAttributeNode(attr);
六、 元素的內容
6.1 作為HTML的元素內容
-
innerHTML
-
outerHTML
6.2 作為純文字的元素內容
-
innerText 會忽略多餘空白
6.3 作為Text節點的元素內容
文字節點的方法
appendData() 向文字節點追加內容
deleteData() 刪除文字節點的一部分內容
insertData() 向文字節點中插入內容
replaceData() 替換內容
substringData() 擷取內容
建立文字節點
document.createTextNode()
七、 建立、插入、刪除 元素節點
7.1 建立節點
document.createElement()
7.2 插入節點
appendChild() 在元素的最後追加一個子元素
insertBefore() 在元素指定的位置插入一個子元素
7.3 刪除節點
removeChild()
7.4 替換節點
replaceChild(new_node, old_node)
7.5 克隆節點
cloneNode()
引數
true 克隆元素以及所有的厚點節點
false 僅僅克隆節點本身
八、Document物件
每個載入瀏覽器的 HTML 文件都會成為 Document 物件。Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
8.1 屬性
URL 獲取當前頁面的url 只讀
domain 獲取域名
referrer 獲取上一個頁面的地址 只讀
title 標籤標題
location 網站地址資訊
lastModified 最後一次修改事件
cookie
8.2 方法
write()
writeln()
1. 瀏覽器物件模型介紹
BOM(Browser Object Model) 是指瀏覽器物件模型，是用於描述這種物件與物件之間層次關係的模型，瀏覽器物件模型提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構。BOM由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件都是該物件的子物件。
BOM的左右
-
彈出新瀏覽器視窗的能力；
-
移動、關閉和更改瀏覽器視窗大小的能力；
-
可提供WEB瀏覽器詳細資訊的導航物件；
-
可提供瀏覽器載入頁面詳細資訊的本地物件；
-
可提供使用者螢幕解析度詳細資訊的螢幕物件；
-
支援Cookies；
2. 各物件詳解
3.1 window
window物件是客戶端JavaScript的全域性物件是所有客戶端JavaScript特性和API的主要接入點它表示Web瀏覽器的一個視窗或窗體,並且用識別符號window來引用它
window 物件屬性
| 屬性 | 描述 |
|---|---|
| document | 對 Document 物件的只讀引用。 |
| history | 對 History 物件的只讀引用。 |
| location | 用於視窗或框架的 Location 物件。 |
| navigator | 對 Navigator 物件的只讀引用。 |
| screen | 對 Screen 物件的只讀引用。 |
| frames | 返回視窗中所有命名的框架。該集合是 Window 物件的陣列，每個 Window 物件在視窗中含有一個框架。 |
| length | 設定或返回視窗中的框架數量。 |
| parent | 返回父視窗。 |
| top | 返回最頂層的父視窗。 |
| name | 設定或返回視窗的名稱。 |
| opener | 返回對建立此視窗的視窗的引用。 |
| closed | 返回視窗是否已被關閉。 |
| defaultStatus | 設定或返回視窗狀態列中的預設文字。 |
| status | 設定視窗狀態列的文字。 |
| self | 返回對當前視窗的引用。等價於 Window 屬性。 |
| innerHeight | 返回視窗的文件顯示區的高度。 |
| innerWidth | 返回視窗的文件顯示區的寬度。 |
| outerHeight | 返回視窗的外部高度，包含工具條與滾動條。 |
| outerWidth | 返回視窗的外部寬度，包含工具條與滾動條。 |
| pageXOffset | 設定或返回當前頁面相對於視窗顯示區左上角的 X 位置。 |
| pageYOffset | 設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置。 |
| screenLeft | 返回相對於螢幕視窗的x座標 |
| screenTop | 返回相對於螢幕視窗的y座標 |
| screenX | 返回相對於螢幕視窗的x座標 |
| screenY | 返回相對於螢幕視窗的y座標 |
| scrollX | 返回視窗水平滑動的距離 |
| scrollY | 返回視窗垂直滑動的距離 |
window物件方法
| 方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段訊息和一個確認按鈕的警告框。 |
| confirm() | 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。 |
| prompt() | 顯示可提示使用者輸入的對話方塊。 |
| focus() | 把鍵盤焦點給予一個視窗。 |
| blur() | 把鍵盤焦點從頂層視窗移開。 |
| open() | 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。 |
| close() | 關閉瀏覽器視窗。 |
| print() | 列印當前視窗的內容。 |
| createPopup() | 建立一個 pop-up 視窗。 |
| setInterval() | 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。 |
| setTimeout() | 在指定的毫秒數後呼叫函式或計算表示式。 |
| clearInterval() | 取消由 setInterval() 設定的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設定的 timeout。 |
| moveBy() | 可相對視窗的當前座標把它移動指定的畫素。(僅IE) |
| moveTo() | 把視窗的左上角移動到一個指定的座標。（僅IE） |
| resizeBy() | 按照指定的畫素調整視窗的大小。(僅IE) |
| resizeTo() | 把視窗的大小調整到指定的寬度和高度。(僅IE) |
| scrollBy() | 按照指定的畫素值來滾動內容。 |
| scrollTo() | 把內容滾動到指定的座標。 |
3.2 Localtion
Location 物件包含有關當前 URL 的資訊。
Location 物件是 window 物件的一部分，可通過 window.Location 屬性對其進行訪問。
Location 物件屬性
| 屬性 | 描述 |
|---|---|
| href | 返回完整的URL |
| protocol | 返回一個URL協議 |
| host | 返回一個URL的主機名和埠 |
| hostname | 返回URL的主機名 |
| port | 返回一個URL伺服器使用的埠號 |
| pathname | 返回的URL路徑名。 |
| search | 返回一個URL的查詢部分 |
| hash | 返回一個URL的錨部分 |
Location 物件方法
| 方法 | 說明 |
|---|---|
| assign() | 載入一個新的文件 |
| reload() | 重新載入當前文件 |
| replace() | 用新的文件替換當前文件 |
3.3 History
History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。
History 物件是 window 物件的一部分，可通過 window.history 屬性對其進行訪問。
History 物件屬性
| 屬性 | 說明 |
|---|---|
| length | 返回歷史列表中的網址數 |
History 物件方法
| 方法 | 說明 |
|---|---|
| back() | 載入 history 列表中的前一個 URL |
| forward() | 載入 history 列表中的下一個 URL |
| go() | 載入 history 列表中的某個具體頁面 |
3.4 Navigator
Navigator 物件屬性
| 屬性 | 說明 |
|---|---|
| appCodeName | 返回瀏覽器的程式碼名 |
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平臺和版本資訊 |
| cookieEnabled | 返回指明瀏覽器中是否啟用 cookie 的布林值 |
| platform | 返回執行瀏覽器的作業系統平臺 |
| userAgent | 返回瀏覽器用於 HTTP 請求的使用者代理頭的值 |
Navigator 物件方法
| 方法 | 描述 |
|---|---|
| javaEnabled() | 指定是否在瀏覽器中啟用Java |
| taintEnabled() | 規定瀏覽器是否啟用資料汙點(data tainting) |
3.5 Screen
Screen 物件包含有關客戶端顯示螢幕的資訊。
Screen 物件屬性
| 屬性 | 說明 |
|---|---|
| availHeight | 返回螢幕的高度（不包括Windows工作列） |
| availWidth | 返回螢幕的寬度（不包括Windows工作列） |
| colorDepth | 返回目標裝置或緩衝器上的調色盤的位元深度 |
| height | 返回螢幕的總高度 |
| pixelDepth | 返回螢幕的顏色解析度（每象素的位數） |
| width | 返回螢幕的總寬度 |