《dom啓蒙》讀書筆記和測試代碼

《DOM 啓蒙》讀書筆記及測試代碼

節點概覽
節點組成的樹形層次結構
節點類型
3.節點繼承
繼承而來節點打交道的屬性和方法
節點類型名稱和值
1. Node.prototype.nodeType
2. Node.prototype.nodeName
3. Node.prototype.nodeValue
創建節點
1. document.createElement
2. document.createTextNode
3. document.createComment
4. document.createAttribute
5. document.createDocumentFragment
字符串和節點的轉換
1. Element.prototype.innerHTML
2. Element.prototype.outerHTML
3. Node.prototype.textContent
4. Element.prototype.insertAdjacentElement
5. Element.prototype.insertAdjacentText
6. Element.prototype.insertAdjacentHTML
7. HTMLElement.prototype.innerText
8. HTMLElement.prototype.outerText
插入節點
1. Node.prototype.insertBefore
2. Node.prototype.appendChild
3. Element.prototype.before
4. Element.prototype.after
5. Element.prototype.append
6. Element.prototype.prepend
移除替換節點
1. Node.prototype.removeChild
2. Node.prototype.replaceChild
3. Element.prototype.remove
4. Element.prototype.replace
克隆節點
1. Node.prototype.cloneNode
NodeList&HTMLCollection
1. length 屬性，因此可以是類數組對象
2. 實時反映
3. 默認情況下，順序與樹中的順序一致
遍歷
1. 節點（包括了註釋、文本節點）
  1. Node.prototype.parentNode
  2. Node.prototype.firstNode
  3. Node.prototype.lastNode
  4. Node.prototype.nextSibling
  5. Node.prototype.perviosSibling
2. 元素（IE 9 才支持，因此 jQuery 利用上面的節點遍歷相關屬性模擬了下面的屬性）
  1. Element.prototype.fristElementChild
  2. Element.prototype.lastElementChild
  3. Element.prototype.nextElementChild
  4. Element.prototype.perviosElementChild
  5. Element.prototype.children
  6. Element.prototype.parentElement
  7. Element.prototype.previousElementSibling
  8. Element.prototype.nextElementSibling
3. Element.prototype.childElementCount
驗證節點位置
1. Node.prototype.contains
2. Node.prototype.compareDocumentPosition
比較節點
1. Node.prototype.isEqualNode
2. Node.prototype.isSameNode
文檔節點
Object <- Node <- Document <- HTMLDocument
屬性和方法
通用信息
1. title
2. URL
3. charset
4. contentType
5. compatMode BackCompat（怪異模式）CSS1Compat（嚴格模式）
6. referrer
7. lastModified
8. 等等
快捷訪問
1. doctype：現代瀏覽器不在 document.childNodes 中
2. head
3. body
4. documentElement：即 <html lang="en">
探測特性
1. implementation.hasFeature
獲取激活節點
是否聚焦在當前文檔窗口上
獲取全局對象
獲取 document
元素節點
HTML*Element
創建元素，上面的 document.createElement
標籤名
1. Node.prototype.nodeName
2. Element.prototype.tagName
屬性集合
操作屬性
1. Element.prototype.getAttribute
2. Element.prototype.setAttribute
3. Element.prototype.hasAttribute
4. Element.prototype.removeAttribute
5. Element.prototype.getAttributeNS
6. Element.prototype.setAttributeNS
7. Element.prototype.hasAttributeNS
8. Element.prototype.removeAttributeNS
9. Element.prototype.getAttributeNode
10. Element.prototype.getAttributeNodeNS
11. Element.prototype.setAttributeNode
12. Element.prototype.setAttributeNodeNS
13. Element.prototype.removeAttributeNode
類操作
1. Element.prototype.className
2. Element.prototype.classList
  1. add
  2. remove
  3. toggle
  4. contains
data-*屬性
1. HTMLElement.prototype.dataset
選取元素節點
特定元素
1. Element.prototype.querySelector 和 document.querySelector
2. document.getElementById
節點列表
1. Element.prototype.querySelectorAll 和 document.querySelectorAll 非實時的，下面三個是實時的。目前遇到的第一個非實時的獲取方法。
2. Element.prototype.getElementsByTagName 和 document.getElementsByTagName
3. Element.prototype.getElementsByTagNameNS 和 document.getElementsByTagNameNS
4. Element.prototype.getElementsByClassName 和 document.getElementsByClassName
5. document.getElementsByName
子元素
1. Element.prototype.children 實時、有序
預定義的節點列表
1. document.images
2. document.embeds
3. document.plugins
4. document.links
5. document.forms
6. document.scripts
7. document.anchors
8. document.applets
9. document.children
10. document.styleSheets
驗證選取的元素
1. Element.prototype.matchesSelector 針對不同瀏覽器加前綴
2. Element.prototype.webkitMatchesSelector
3. Element.prototype.mozMatchesSelector
4. Element.prototype.msMatchesSelector
5. Element.prototype.oMatchesSelector
6. Element.prototype.matches 新的這個，不用加前綴
元素節點幾何量與滾動幾何量
1. CSSOM 視圖模塊規範中定義了訪問和操作元素節點可視化表象的元素幾何量、滾動幾何量的屬性和方法。
2. 相對 HTMLElement.prototype.offsetParent 的位置
3. HTMLElement.prototype.offsetLeft 相對於自身 offsetParent
4. HTMLElement.prototype.offsetTop 相對於 offsetParent
5. Element.prototype.clientTop 相對於自身邊框
6. Element.prototype.clientLeft 相對於自身邊框
7. Element.prototype.scrollTop 滾動元素
8. Element.prototype.scrollLeft 滾動元素
9. 相對視區的偏移
10. Element.prototype.getBoundingClientRect
11. Element.prototype.getClientRects
12. 元素在視圖中的尺寸
13. HTMLElement.prototype.offsetHeight 包括邊框
14. HTMLElement.prototype.offsetWidth 包括邊框
15. Element.prototype.getBoundingClientRect().width 包括邊框
16. Element.prototype.getBoundingClientRect().height 包括邊框
17. Element.prototype.clientWidth 不包括邊框
18. Element.prototype.clientHeight 不包括邊框
19. Element.prototype.scrollWidth 滾動元素
20. Element.prototype.scrollHeight 滾動元素
21. 徹底弄清楚幾個寬高
22. 特定點上最頂層元素
23. document.elementFromPoint
24. 滾動元素到視區
25. Element.prototype.scrollIntoView
26. Element.prototype.scrollIntoViewIfNeeded
元素節點內聯樣式
獲取內聯樣式
1. HTMLElement.prototype.style 得到 CSSStyleDeclaration
設置內聯樣式
1. 直接通過 style 獲得、設置、刪除內聯樣式屬性
2. style.setProperty
3. style.getPropertyValue
4. style.removeProperty
所有內聯樣式
1. style.cssText
2. Element.prototype.setAttribute、Element.prototype.getAttribute、Element.prototype.removeAttribute
計算樣式
1. window.getComputedStyle 上面獲得樣式都是內聯，不疊加計算的，這個方法返回的是疊加計算後的實際值。
2. window.getComputedStyle 得到的 CSSStyleDeclaration 是隻讀的。
文本節點
1. Object <- Node <- CharacterData <- Text 和元素混在一區的文本會轉換爲文本節點
2. 文本節點屬性和方法
3. 創建節點
  1. 字符（包括空白符和回車符）會創建文本節點
  2. 編程式創建：document.createTextNode
4. 節點值
  1. Node.prototype.nodeValue
  2. Node.prototype.textContent 會合並所有子文本節點
  3. CharacterData.prototype.data
  4. Text.wholeText
5. 操作文本節點
  1. CharacterData.prototype.appendData
  2. CharacterData.prototype.deleteData
  3. CharacterData.prototype.insertData
  4. CharacterData.prototype.replaceData
  5. CharacterData.prototype.substringData
  6. Comment 也繼承了 CharacterData，所以也擁有這些方法
6. 多個兄弟文本節點
  1. 拿上面的例子來說，strong 元素把文本截斷，所以得到的 childNodes 的 length 爲 3。
  2. 另外也可以編程式地添加兩個文本節點，而不會合並。
  3. Node.prototype.normalize 合併兄弟文本節點。
  4. Text.prototype.splitText 分割文本節點
7. Node.prototype.textContent
  1. 合併返回所有子文本的內容
  2. 設置的時候會移除所有子節點，替換爲新的 Text 節點
  3. HTMLElement.prototype.innerText 區別：
  4. innerText 認識 Css，忽略隱藏文本。
  5. innerText 關心 Css 觸發重排。
  6. innerText 使文本規範化。
  7. innerText 非標準，新的火狐好像也支持了。
DocumentFragment 節點（文檔片段）
空的文檔模板，行爲與實時 DOM 樹相似，但是僅在內存中存在。
創建文檔片段節點
1. document.createDocumentFragment
2. 與直接創建 div，然後創建 DOM 結構的區別：
  1. 文檔片段可以包含任意節點（body、html 除外）。
  2. 文檔片段插入 DOM 中時，自身不會添加，只插入子節點。
  3. 文檔片段插入 DOM 中時實際上是把傳輸的內容放到了 DOM，自身的內容就沒了。
  4. 在內存中創建節點注入到實時節點結構是極其高效的。
文檔片段沒有 innerHTML 屬性，變通方法是新建一個 div，利用 div 的 innerHTML。
通過 Node.prototype.cloneNode 將文檔片段保存在內存中。
Css 樣式表和 Css 規則
樣式概述
1. 元素內聯樣式
2. HTMLLinkElement 外部樣式類
3. HTMLStyleElement 頁面內聯樣式類
4. CSSStyleSheet 樣式表對象類
5. CSSStyleRule 樣式規則類
創建樣式
1. document.createElement('style')
2. document.createElement('link')
獲取所有樣式表
1. document.styleSheets（包括外部和內部）
2. 實時、length 屬性、類數組對象。
3. 單個樣式表用 sheet 屬性從 HTMLLinkElement 或 HTMLStyleElement 獲取
CSSStyleSheet 的屬性和方法
CSSStyleRule 的屬性和方法
修改樣式規則
1. CSSStyleSheet 的 insertRule、deleteRule、addRule、removeRule 方法。
2. 直接通過 CSSStyleRule.prototype.style 進行修改。
CSSStyleSheet.prototype.disabled 使樣式表失效。
DOM 中的 JavaScript
腳本概述
1. 元素內聯腳本，<a href="javascript:void(0)"></a> 和 <button onclick="alert('yo')"></button> 等。
2. HTMLScriptElement 頁面內聯腳本。
3. HTMLScriptElement 外部腳本。
4. 腳本元素內會新建一個文本節點，可以通過 innerHTML、textContent、innerText 來獲取值。
同步加載和解析
1. 如果加載和解析是異步的，那麼 document.write 輸出的位置根本無法確定，而如果在 onload 事件之後調用 document.write 會自動觸發 document.open 清空頁面，因此 Js 默認採用了同步地加載方式，它會阻塞頁面的解析。現代瀏覽器是支持併發下載腳本的。
2. 頁面內聯腳本也是如此，會同步執行，阻塞頁面解析。
3. 因此在同步加載的情況下，把 Js 腳本放到頁面底部是比較好的策略。
異步加載腳本
1. 首先異步加載的腳本中出現，document.write 會報錯。
2. defer 異步加載、在 DOMContentLoaded 事件之前有序執行。低版本的 IE 支持。
3. async 異步加載，加載完就執行，不利於依賴管理。IE 10 才支持，優先級高於 defer。
4. 手動創建 script 標籤實現異步加載（前端模塊加載器如：seajs、requirejs 使用的都是這種方式）。
onload 和 onreadystatechange
1. 通常我們會爲手動創建的 script 標籤綁定一個加載完成的回調，在之後做一些操作，比如 seajs 會在加載完以後把 script 元素及其事件刪除，防止內存泄漏，因爲 seajs 已經把腳本的內容保存在模塊對象上，供延遲調用了。
2. 而對於 IE 8 及以下的瀏覽器，Node 不支持 onload 事件，所以使用 onreadystatechange 來代替。
獲取當前執行的腳本
1. document.currentScript
2. IE 6-9 下沒有這個屬性，兼容 IE 的方案。
獲取所有腳本
1. document.scripts
DOM 事件
三種添加事件監聽方式
1. 行內屬性事件：<div onclick="alert('click')"></div>
2. 屬性事件：mdiv.onclick = () => alert('click')
3. addEventListener：mdiv.addEventListener('click',() => alert('click'), false)（回調函數的 this 自動綁定到該元素，並且支持綁定多個回調）
4. IE attachEvent 不支持捕獲階段。
事件類型
1. UIEvent
  - load、onload、abort、error 資源加載相關
  - resize、scroll 窗口尺寸相關
  - context menu 右鍵菜單
2. FocusEvent
  - blur、focus、focusin、focusout
3. FormEvent
  - change、reset、submit、select
4. MouseEvent
  - click、dbclick
  - mousedown、mouseup
  - mouseenter、mouseout 不冒泡
  - mouseleave、mouseover 冒泡
  - mousemove
5. WheelEvent
  - 瀏覽器裏用的是 mousewheel 規範用的是 wheel
6. KeyboardEvent
  - keydown、keyup、keypress
7. TouchEvent
  - touchstart、touchend
  - touchmove、touchcancel
  - touchenter、touchleave
8. 拖拽相關
  - drag、dragover、drop
  - dragstart、dragend
  - dragenter、dragleave
9. 文檔相關
  - readystatechange
  - DOMContentLoaded
10. 其它
  - afterprint、beforeprint
  - beforeupload
  - hashchange
  - message
  - offline、online
  - pagehide、pageshow
移除事件監聽
1. removeEventListener 只支持通過函數引用添加的事件監聽函數。
2. IE detachEvent。
事件捕獲和冒泡
1. addEventListener 第三個參數爲 true 則在捕獲階段觸發、false 則在冒泡階段觸發，默認是 false。
2. 其他兩種事件綁定都是在冒泡時觸發的。
3. IE attachEvent 不支持捕獲階段，也沒有第三個參數，都是在冒泡階段觸發。
常見事件對象屬性
1. target 和 currentTarget，currentTarget 是當前活動對象，target 是目標對象，只有在目標階段，兩者纔是相等的。
2. 五個座標，見徹底弄清楚幾個寬高。
3. stopPropagation：因爲事件可以在各層級的節點中傳遞, 不管是冒泡還是捕獲, 有時我們希望事件在特定節點執行完之後不再傳遞, 可以使用事件對象的 stopPropagation 方法。
4. preventDefault：元素上帶有的功能. 如: 點擊 a 鏈接節點的跳轉動作, 點擊 submit 按鈕表單會提交等，如果監聽這些元素的事件時不希望執行默認動作，就可以使用 preventDefault 方法。
5. return false：退出執行, return false 之後的所有觸發事件和動作都不會被執行。有時候 return false 可以用來替代 stopPropagation 和 preventDefault，除此之外，還可以返回對象, 跳出循環等。
6. stopImmediatePropagation：和 stopPropagation 區別是這個方法會把綁定在同一個元素的剩下的回調都取消。
7. eventPhase 屬性，0 表示不在事件中，1 表示捕捉階段、2 表示目標階段、3 表示冒泡階段。
8. 需要注意的是 event 是實時的，也就是說在 console 輸出的 event 已經不是當時的那個 event了。
自定義事件
1. document.createEvent
2. initCustomEvent(event,bubble?,cancelable?,event.detail)
3. fireEvent（IE）和 dispatchEvent
4. IE9 裏 initCustomEvent 需要第四個參數。
5. DOM4 裏面添加了 CustomEvent。
模擬出發鼠標事件
1. 類似 jQuery.trigger() 方法。
2. 藉助 initMouseEvent 來實現。
事件委託
1. 事件委託是藉助事件冒泡機制，用父級元素來統一管理子級的相同事件。
2. 原理是不管是哪個子級觸發的相同事件，都可以通過 event.target 拿到這個子級元素，然後對其做相應的操作，因爲操作邏輯是一樣的，因此可以在父級中複用邏輯。
3. 在處理 click、mousedown、mouseup、keydown、keyup、keypress 等事件時十分有效。
4. 可以有效的減少綁定，降低內存消耗。

《dom啓蒙》讀書筆記和測試代碼

《DOM 啓蒙》讀書筆記及測試代碼

中國古代傳說中的四大神獸

apache設置自動將http跳轉到https的方法

LINQ Interview Questions & Answers(LINQ面試問答)

MDN之Web 開發技術【String.prototype.replace()】

string.prototype.replace 和正則表達式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結