JavaScript高程學習筆記之DOM(10,11,12)

JavaScript高程學習筆記之DOM(10,11,12)

@(JavaScript)[學習筆記]

---

[TOC]

---

因爲已經學習過JavaScript編程藝術，這裏的DOM學習將會簡化 因爲已經學習過JavaScript編程藝術，這裏的DOM學習將會簡化 因爲已經學習過JavaScript編程藝術，這裏的DOM學習將會簡化

1. DOM

1.1 節點層次

文檔元素：html元素

1.1.1 Node類型

JavaScript全部節點類型都繼承Node類型。每一個節點有個nodeType屬性，有12個常量值表示 爲保證兼容性要使用數值而不是字符串

1.1.2 Document類型

URL：完整的URL domain：域名 referrer：來源頁域名 getElementById()方法、getElemnetByTagName()方法和getElementByName()方法 特殊集合 document.anchors document.applets document.forms document.images document.links document.implementation.hasFeature()方法 文檔寫入

1.1.3 Element類型

1.1.4 Text類型

document.creatTextNode() normalize()合併相鄰文本節點 splitText()分割文本節點

1.1.5 Comment類型

documen.creatComment()建立註釋

1.1.6 CDATASection類型

document.creatCDataSection()建立CDATA區域

1.1.7 DocumentType類型 略

1.1.8 DocumentFragment類型

輕量級文檔 用document.creatDocumentFragment()方法建立文檔片斷

1.1.9 Attr類型

元素的特性

1.2 DOM操做技術

1.2.1 動態腳本

內部；外部；DOM建立

1.2.2 動態樣式

內部；外部；DOM建立

1.2.3 操做表格

HTML DOM建立表格

1.2.4 使用NodeList 略

---

2. DOM擴展

• 理解Selectors API
• 使用HTML5 DOM擴展
• 瞭解專有的DOM擴展

2.1 選擇符API

2.1.1 querySelector()方法

接收一個CSS選擇符，返回與該模式匹配的第一個元素，若是沒有找到匹配的元素，返回null 經過Document類型調用，會在文檔元素範圍內查找匹配元素 經過Element類型調用，會在該元素後代元素的範圍內查找匹配的元素

2.1.2 querySelectorAll()方法

接收CSS選擇符，返回的是全部的匹配元素而不單單是一個元素。該方法返回的是一個NodeList的實例

2.1.3 matchesSelector()方法

接收CSS選擇符，若是調用元素與該選擇符匹，返回true，不然返回false

1.2 元素遍歷 略

2.3 HTML5

2.3.1 與類相關的擴充

getElementByClassName()方法 classList屬性 HTML5 支持classList屬性的瀏覽器有Firefox3.6+和Chrome

2.3.2 焦點管理

document.activeElement屬性 獲取焦點的方法：頁面加載、用戶輸入、代碼調用focus()方法 document.hasFocus()方法

2.3.3 HTMLDocument的變化

readyState屬性、compatMode屬性和head屬性

2.3.4 字符集屬性

charset屬性、defaultCharset屬性

2.3.5 自定義數據屬性

前綴data- dataset屬性訪問

2.3.6 插入標記

innerHTML屬性： 在讀模式下，返回與調用元素的全部子節點對應的HTML標記 在寫模式下，根據指定的值建立新的DOM樹，用這個DOM樹替換調用元素原先的全部子節點 outerHTML屬性： 在讀模式下，返回調用它的元素及全部子節點的HTML標籤 在寫模式下，根據指定的HTML字符串建立新的DOM樹，而後用這個DOM子樹徹底替換調用元素 insertAdjacentHTML()方法 #####2.3.7 scrollIntoView()方法 經過滾動瀏覽器窗口或某個容器元素，調用元素就能夠出如今視口中

2.4 專有擴展

2.4.1 文檔模式

文檔模式決定你可使用哪一個級別的CSS，能夠在JavaScript中使用哪些API，以及如何對待文檔類型

2.4.2 children屬性 略

2.4.3 contains()方法

肯定某個節點是否是另外一個節點的後代

2.4.4 插入文本

innerText屬性和outerText屬性

2.4.5 滾動 略

---

3 DOM2和DOM3 略

---

思惟導圖