概述
DOM
DOM 是 JavaScript 操作網(wǎng)頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網(wǎng)頁轉(zhuǎn)為一個 JavaScript 對象，從而可以用腳本進行各種操作（比如增刪內(nèi)容）。
瀏覽器會根據(jù) DOM 模型，將結(jié)構(gòu)化文檔（比如 HTML 和 XML）解析成一系列的節(jié)點，再由這些節(jié)點組成一個樹狀結(jié)構(gòu)（DOM Tree）。所有的節(jié)點和最終的樹狀結(jié)構(gòu)，都有規(guī)范的對外接口。
節(jié)點
DOM 的最小組成單位叫做節(jié)點（node）。文檔的樹形結(jié)構(gòu)（DOM 樹），就是由各種不同類型的節(jié)點組成。每個節(jié)點可以看作是文檔樹的一片葉子。
節(jié)點的類型有七種。
- Document：整個文檔樹的頂層節(jié)點
- DocumentType：doctype標(biāo)簽（比如<!DOCTYPE html>）
- Element：網(wǎng)頁的各種HTML標(biāo)簽（比如<body>、<a>等）
- Attribute：網(wǎng)頁元素的屬性（比如class="right"）
- Text：標(biāo)簽之間或標(biāo)簽包含的文本
- Comment：注釋
- DocumentFragment：文檔的片段
瀏覽器提供一個原生的節(jié)點對象Node，上面這七種節(jié)點都繼承了Node，因此具有一些共同的屬性和方法。
瀏覽器原生提供document節(jié)點，代表整個文檔。文檔的第一層有兩個節(jié)點，第一個是文檔類型節(jié)點（<!doctype html>），第二個是 HTML 網(wǎng)頁的頂層容器標(biāo)簽<html>。后者構(gòu)成了樹結(jié)構(gòu)的根節(jié)點（root node），其他 HTML 標(biāo)簽節(jié)點都是它的下級節(jié)點。
除了根節(jié)點，其他節(jié)點都有三種層級關(guān)系。
- 父節(jié)點關(guān)系（parentNode）：直接的那個上級節(jié)點
- 子節(jié)點關(guān)系（childNodes）：直接的下級節(jié)點
- 同級節(jié)點關(guān)系（sibling）：擁有同一個父節(jié)點的節(jié)點
Node 接口
所有 DOM 節(jié)點對象都繼承了 Node 接口，擁有一些共同的屬性和方法。這是 DOM 操作的基礎(chǔ)。
-
屬性
- Node.prototype.nodeType
- Node.prototype.nodeName
- Node.prototype.nodeValue
- Node.prototype.textContent
- Node.prototype.baseURI
- Node.prototype.ownerDocument
- Node.prototype.nextSibling
- Node.prototype.previousSibling
- Node.prototype.parentNode
- Node.prototype.parentElement
- Node.prototype.firstChild，Node.prototype.lastChild
- Node.prototype.childNodes
- Node.prototype.isConnected
-
方法
- Node.prototype.appendChild()
- Node.prototype.hasChildNodes()
- Node.prototype.cloneNode()
- Node.prototype.insertBefore()
- Node.prototype.removeChild()
- Node.prototype.replaceChild()
- Node.prototype.contains()
- Node.prototype.compareDocumentPosition()
- Node.prototype.isEqualNode()，Node.prototype.isSameNode()
- Node.prototype.normalize()
- Node.prototype.getRootNode()
NodeList 接口，HTMLCollection 接口
節(jié)點都是單個對象，有時需要一種數(shù)據(jù)結(jié)構(gòu)，能夠容納多個節(jié)點。DOM 提供兩種節(jié)點集合，用于容納多個節(jié)點：NodeList和HTMLCollection。
這兩種集合都屬于接口規(guī)范。許多 DOM 屬性和方法，返回的結(jié)果是NodeList實例或HTMLCollection實例。主要區(qū)別是，NodeList可以包含各種類型的節(jié)點，HTMLCollection只能包含 HTML 元素節(jié)點。
ParentNode 接口，ChildNode 接口
節(jié)點對象除了繼承 Node 接口以外，還會繼承其他接口。ParentNode接口表示當(dāng)前節(jié)點是一個父節(jié)點，提供一些處理子節(jié)點的方法。ChildNode接口表示當(dāng)前節(jié)點是一個子節(jié)點，提供一些相關(guān)方法。
Document 節(jié)點
- 概述
- 屬性
-
方法
- document.open()，document.close()
- document.write()，document.writeln()
- document.querySelector()，document.querySelectorAll()
- document.getElementsByTagName()
- document.getElementsByClassName()
- document.getElementsByName()
- document.getElementById()
- document.elementFromPoint()，document.elementsFromPoint()
- document.caretPositionFromPoint()
- document.createElement()
- document.createTextNode()
- document.createAttribute()
- document.createComment()
- document.createDocumentFragment()
- document.createEvent()
- document.addEventListener()，document.removeEventListener()，document.dispatchEvent()
- document.hasFocus()
- document.adoptNode()，document.importNode()
- document.createNodeIterator()
- document.createTreeWalker()
- document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()
- document.getSelection()
Element 節(jié)點
Element節(jié)點對象對應(yīng)網(wǎng)頁的 HTML 元素。每一個 HTML 元素，在 DOM 樹上都會轉(zhuǎn)化成一個Element節(jié)點對象（以下簡稱元素節(jié)點）。
元素節(jié)點的nodeType屬性都是1。
-
實例屬性
- 元素特性的相關(guān)屬性
- 元素狀態(tài)的相關(guān)屬性
- Element.attributes
- Element.className，Element.classList
- Element.dataset
- Element.innerHTML
- Element.outerHTML
- Element.clientHeight，Element.clientWidth
- Element.clientLeft，Element.clientTop
- Element.scrollHeight，Element.scrollWidth
- Element.scrollLeft，Element.scrollTop
- Element.offsetParent
- Element.offsetHeight，Element.offsetWidth
- Element.offsetLeft，Element.offsetTop
- Element.style
- Element.children，Element.childElementCount
- Element.firstElementChild，Element.lastElementChild
- Element.nextElementSibling，Element.previousElementSibling
-
實例方法
- 屬性相關(guān)方法
- Element.querySelector()
- Element.querySelectorAll()
- Element.getElementsByClassName()
- Element.getElementsByTagName()
- Element.closest()
- Element.matches()
- 事件相關(guān)方法
- Element.scrollIntoView()
- Element.getBoundingClientRect()
- Element.getClientRects()
- Element.insertAdjacentElement()
- Element.insertAdjacentHTML()，Element.insertAdjacentText()
- Element.remove()
- Element.focus()，Element.blur()
- Element.click()
- 參考鏈接
屬性的操作
HTML 元素包括標(biāo)簽名和若干個鍵值對，這個鍵值對就稱為“屬性”（attribute）。
Text 節(jié)點和 DocumentFragment 節(jié)點
CSS 操作
CSS 與 JavaScript 是兩個有著明確分工的領(lǐng)域，前者負責(zé)頁面的視覺效果，后者負責(zé)與用戶的行為互動。但是，它們畢竟同屬網(wǎng)頁開發(fā)的前端，因此不可避免有著交叉和互相配合。本節(jié)介紹如何通過 JavaScript 操作 CSS。
- HTML 元素的 style 屬性
- CSSStyleDeclaration 接口
- CSS 模塊的偵測
- CSS 對象
- window.getComputedStyle()
- CSS 偽元素
- StyleSheet 接口
- 實例：添加樣式表
- CSSRuleList 接口
- CSSRule 接口
- window.matchMedia()
