學習教材為：https://wangdoc.com/javascript/dom/index.html
1 什么是DOM 悔醋？其作用是？
DOM 是 JavaScript 操作網(wǎng)頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網(wǎng)頁轉(zhuǎn)為一個 JavaScript 對象，從而可以用腳本進行各種操作（比如增刪內(nèi)容）。
2 為什么說DOM 不是 JavaScript 語法的一部分？
DOM 只是一個接口規(guī)范求冷，可以用各種語言實現(xiàn)。所以嚴格地說窍霞，DOM 不是 JavaScript 語法的一部分匠题，但是 DOM 操作是 JavaScript 最常見的任務(wù)，離開了 DOM但金，JavaScript 就無法控制網(wǎng)頁韭山。另一方面，JavaScript 也是最常用于 DOM 操作的語言冷溃。
3 什么是節(jié)點（node）钱磅？其類型有哪些？
DOM 的最小組成單位叫做節(jié)點（node）似枕。文檔的樹形結(jié)構(gòu)（DOM 樹）盖淡，就是由各種不同類型的節(jié)點組成。每個節(jié)點可以看作是文檔樹的一片葉子凿歼。
節(jié)點的類型有七種褪迟。
- Document：整個文檔樹的頂層節(jié)點
- DocumentType：doctype標簽（比如<!DOCTYPE html>）
- Element：網(wǎng)頁的各種HTML標簽（比如<body>、<a>等）
- Attr：網(wǎng)頁元素的屬性（比如class="right"）
- Text：標簽之間或標簽包含的文本
- Comment：注釋
- DocumentFragment：文檔的片段
4 節(jié)點間的層級關(guān)系有哪些毅往？
- 父節(jié)點關(guān)系（parentNode）：直接的那個上級節(jié)點
- 子節(jié)點關(guān)系（childNodes）：直接的下級節(jié)點
- 同級節(jié)點關(guān)系（sibling）：擁有同一個父節(jié)點的節(jié)點
5 DOM 節(jié)點對象都有哪些屬性牵咙？
- nodeType屬性返回一個整數(shù)值，表示節(jié)點的類型攀唯。
- nodeName屬性返回節(jié)點的名稱。
- nodeValue屬性返回一個字符串渴丸，表示當前節(jié)點本身的文本值侯嘀，該屬性可讀寫另凌。
- textContent屬性返回當前節(jié)點和它的所有后代節(jié)點的文本內(nèi)容。
- baseURI屬性返回一個字符串戒幔，表示當前網(wǎng)頁的絕對路徑吠谢。瀏覽器根據(jù)這個屬性，計算網(wǎng)頁上的相對路徑的 URL诗茎。該屬性為只讀工坊。
- Node.ownerDocument屬性返回當前節(jié)點所在的頂層文檔對象，即document對象敢订。
- Node.nextSibling屬性返回緊跟在當前節(jié)點后面的第一個同級節(jié)點王污。如果當前節(jié)點后面沒有同級節(jié)點，則返回null楚午。
- previousSibling屬性返回當前節(jié)點前面的昭齐、距離最近的一個同級節(jié)點。如果當前節(jié)點前面沒有同級節(jié)點矾柜，則返回null阱驾。
- parentNode屬性返回當前節(jié)點的父節(jié)點。對于一個節(jié)點來說怪蔑，它的父節(jié)點只可能是三種類型：元素節(jié)點（element）里覆、文檔節(jié)點（document）和文檔片段節(jié)點（documentfragment）。
- parentElement屬性返回當前節(jié)點的父元素節(jié)點缆瓣。如果當前節(jié)點沒有父節(jié)點租谈，或者父節(jié)點類型不是元素節(jié)點，則返回null捆愁。
- firstChild屬性返回當前節(jié)點的第一個子節(jié)點割去，如果當前節(jié)點沒有子節(jié)點，則返回null昼丑。
- lastChild屬性返回當前節(jié)點的最后一個子節(jié)點呻逆，如果當前節(jié)點沒有子節(jié)點，則返回null菩帝。用法與firstChild屬性相同咖城。
- childNodes屬性返回一個類似數(shù)組的對象（NodeList集合），成員包括當前節(jié)點的所有子節(jié)點呼奢。
- isConnected屬性返回一個布爾值宜雀，表示當前節(jié)點是否在文檔之中。
6 DOM 節(jié)點對象都有哪些方法握础？
- appendChild()方法接受一個節(jié)點對象作為參數(shù)辐董，將其作為最后一個子節(jié)點，插入當前節(jié)點禀综。該方法的返回值就是插入文檔的子節(jié)點简烘。
- hasChildNodes方法返回一個布爾值苔严，表示當前節(jié)點是否有子節(jié)點。
- cloneNode方法用于克隆一個節(jié)點孤澎。它接受一個布爾值作為參數(shù)届氢，表示是否同時克隆子節(jié)點。它的返回值是一個克隆出來的新節(jié)點覆旭。
- insertBefore方法用于將某個節(jié)點插入父節(jié)點內(nèi)部的指定位置退子。
- removeChild方法接受一個子節(jié)點作為參數(shù)，用于從當前節(jié)點移除該子節(jié)點型将。返回值是移除的子節(jié)點寂祥。
- replaceChild方法用于將一個新的節(jié)點，替換當前節(jié)點的某一個子節(jié)點茶敏。
- contains方法返回一個布爾值壤靶，表示參數(shù)節(jié)點是否滿足以下三個條件之一。
參數(shù)節(jié)點為當前節(jié)點惊搏。
參數(shù)節(jié)點為當前節(jié)點的子節(jié)點贮乳。
參數(shù)節(jié)點為當前節(jié)點的后代節(jié)點。 - compareDocumentPosition方法的用法恬惯，與contains方法完全一致向拆，返回一個六個比特位的二進制值，表示參數(shù)節(jié)點與當前節(jié)點的關(guān)系酪耳。
- isEqualNode方法返回一個布爾值浓恳，用于檢查兩個節(jié)點是否相等。所謂相等的節(jié)點碗暗，指的是兩個節(jié)點的類型相同颈将、屬性相同、子節(jié)點相同言疗。
- normalize方法用于清理當前節(jié)點內(nèi)部的所有文本節(jié)點（text）晴圾。它會去除空的文本節(jié)點，并且將毗鄰的文本節(jié)點合并成一個噪奄，也就是說不存在空的文本節(jié)點死姚，以及毗鄰的文本節(jié)點。
- getRootNode()方法返回當前節(jié)點所在文檔的根節(jié)點document勤篮，與ownerDocument屬性的作用相同都毒。
7 NodeList和HTMLCollection的區(qū)別？
NodeList可以包含各種類型的節(jié)點碰缔，HTMLCollection只能包含 HTML 元素節(jié)點账劲。
8 類數(shù)組對象和數(shù)組的區(qū)別？相互如何轉(zhuǎn)化？
可以使用length屬性和forEach方法涤垫。但是姑尺，它不是數(shù)組竟终，不能使用pop或push之類數(shù)組特有的方法蝠猬。
// 轉(zhuǎn)為數(shù)組
var children = document.body.childNodes;
var nodeArr = Array.prototype.slice.call(children);
9 ParentNode和ChildNode的區(qū)別？
ParentNode接口表示當前節(jié)點是一個父節(jié)點统捶，提供一些處理子節(jié)點的方法榆芦。ChildNode接口表示當前節(jié)點是一個子節(jié)點，提供一些相關(guān)方法喘鸟。
10 有哪些方法可以獲取document對象匆绣？
- 正常的網(wǎng)頁，直接使用document或window.document什黑。
- iframe框架里面的網(wǎng)頁崎淳，使用iframe節(jié)點的contentDocument屬性。
- Ajax 操作返回的文檔愕把，使用XMLHttpRequest對象的responseXML屬性拣凹。
- 內(nèi)部節(jié)點的ownerDocument屬性
11 document節(jié)點對象有哪些屬性和方法？
屬性
- document.defaultView屬性返回document對象所屬的window對象恨豁。如果當前文檔不屬于window對象嚣镜，該屬性返回null。
- 對于 HTML 文檔來說橘蜜，document對象一般有兩個子節(jié)點菊匿。第一個子節(jié)點是document.doctype，指向<DOCTYPE>節(jié)點计福，即文檔類型（Document Type Declaration跌捆，簡寫DTD）節(jié)點。HTML 的文檔類型節(jié)點象颖，一般寫成<!DOCTYPE html>佩厚。如果網(wǎng)頁沒有聲明 DTD，該屬性返回null力麸。
- document.documentElement屬性返回當前文檔的根元素節(jié)點（root）可款。它通常是document節(jié)點的第二個子節(jié)點，緊跟在document.doctype節(jié)點后面克蚂。HTML網(wǎng)頁的該屬性闺鲸，一般是<html>節(jié)點。
- document.body屬性指向<body>節(jié)點埃叭，document.head屬性指向<head>節(jié)點摸恍。
這兩個屬性總是存在的，如果網(wǎng)頁源碼里面省略了<head>或<body>，瀏覽器會自動創(chuàng)建立镶。另外壁袄，這兩個屬性是可寫的，如果改寫它們的值媚媒，相當于移除所有子節(jié)點嗜逻。 - document.scrollingElement屬性返回文檔的滾動元素。也就是說缭召，當文檔整體滾動時栈顷，到底是哪個元素在滾動。
標準模式下嵌巷，這個屬性返回的文檔的根元素document.documentElement（即<html>）萄凤。兼容（quirk）模式下，返回的是<body>元素搪哪，如果該元素不存在靡努，返回null。 - document.activeElement屬性返回獲得當前焦點（focus）的 DOM 元素晓折。通常惑朦，這個屬性返回的是<input>、<textarea>已维、<select>等表單元素行嗤，如果當前沒有焦點元素，返回<body>元素或null垛耳。
- document.fullscreenElement屬性返回當前以全屏狀態(tài)展示的 DOM 元素栅屏。如果不是全屏狀態(tài)，該屬性返回null堂鲜。
- document.links屬性返回當前文檔所有設(shè)定了href屬性的<a>及<area>節(jié)點栈雳。
- document.forms屬性返回所有<form>表單節(jié)點。
- document.images屬性返回頁面所有<img>圖片節(jié)點缔莲。
- document.embeds屬性和document.plugins屬性哥纫，都返回所有<embed>節(jié)點。
- document.scripts屬性返回所有<script>節(jié)點痴奏。
- document.styleSheets屬性返回文檔內(nèi)嵌或引入的樣式表集合蛀骇。
- document.documentURI屬性和document.URL屬性都返回一個字符串，表示當前文檔的網(wǎng)址读拆。不同之處是它們繼承自不同的接口擅憔，documentURI繼承自Document接口，可用于所有文檔檐晕；URL繼承自HTMLDocument接口暑诸，只能用于 HTML 文檔蚌讼。
- document.domain屬性返回當前文檔的域名，不包含協(xié)議和端口个榕。比如篡石，網(wǎng)頁的網(wǎng)址是http://www.example.com:80/hello.html，那么document.domain屬性就等于www.example.com西采。如果無法獲取域名凰萨，該屬性返回null。
document.domain基本上是一個只讀屬性苛让，只有一種情況除外沟蔑。次級域名的網(wǎng)頁湿诊，可以把document.domain設(shè)為對應(yīng)的上級域名狱杰。比如，當前域名是a.sub.example.com厅须，則document.domain屬性可以設(shè)置為sub.example.com仿畸，也可以設(shè)為example.com。修改后朗和，document.domain相同的兩個網(wǎng)頁错沽，可以讀取對方的資源，比如設(shè)置的 Cookie眶拉。
另外千埃，設(shè)置document.domain會導致端口被改成null。因此忆植，如果通過設(shè)置document.domain來進行通信放可，雙方網(wǎng)頁都必須設(shè)置這個值，才能保證端口相同朝刊。 - Location對象是瀏覽器提供的原生對象耀里，提供 URL 相關(guān)的信息和操作方法。通過window.location和document.location屬性拾氓，可以拿到這個對象冯挎。
- document.lastModified屬性返回一個字符串，表示當前文檔最后修改的時間咙鞍。不同瀏覽器的返回值房官，日期格式是不一樣的。
- document.title屬性返回當前文檔的標題续滋。默認情況下翰守，返回<title>節(jié)點的值。但是該屬性是可寫的吃粒，一旦被修改潦俺，就返回修改后的值。
- document.characterSet屬性返回當前文檔的編碼，比如UTF-8事示、ISO-8859-1等等早像。
- document.referrer屬性返回一個字符串，表示當前文檔的訪問者來自哪里肖爵。
- document.dir返回一個字符串卢鹦，表示文字方向。它只有兩個可能的值：rtl表示文字從右到左劝堪，阿拉伯文是這種方式冀自；ltr表示文字從左到右，包括英語和漢語在內(nèi)的大多數(shù)文字采用這種方式秒啦。
- compatMode屬性返回瀏覽器處理文檔的模式熬粗，可能的值為BackCompat（向后兼容模式）和CSS1Compat（嚴格模式）。
- document.hidden屬性返回一個布爾值余境，表示當前頁面是否可見驻呐。如果窗口最小化、瀏覽器切換了 Tab芳来，都會導致導致頁面不可見含末，使得document.hidden返回true。
- document.visibilityState返回文檔的可見狀態(tài)即舌。
- document.readyState屬性返回當前文檔的狀態(tài)佣盒。
- document.cookie屬性用來操作瀏覽器 Cookie。
- document.designMode屬性控制當前文檔是否可編輯顽聂。該屬性只有兩個值on和off肥惭，默認值為off。一旦設(shè)為on芜飘，用戶就可以編輯整個文檔的內(nèi)容务豺。
- document.currentScript屬性只用在<script>元素的內(nèi)嵌腳本或加載的外部腳本之中，返回當前腳本所在的那個 DOM 節(jié)點嗦明，即<script>元素的 DOM 節(jié)點笼沥。
- document.implementation屬性返回一個DOMImplementation對象。該對象有三個方法娶牌，主要用于創(chuàng)建獨立于當前文檔的新的 Document 對象奔浅。
方法
- document.open方法清除當前文檔所有內(nèi)容，使得文檔處于可寫狀態(tài)诗良，
- document.write方法用于向當前文檔寫入內(nèi)容汹桦。
- document.writeln方法與write方法完全一致，除了會在輸出內(nèi)容的尾部添加換行符鉴裹。
- document.close方法用來關(guān)閉document.open()打開的文檔
- document.querySelector方法接受一個 CSS 選擇器作為參數(shù)舞骆，返回匹配該選擇器的元素節(jié)點钥弯。如果有多個節(jié)點滿足匹配條件，則返回第一個匹配的節(jié)點督禽。如果沒有發(fā)現(xiàn)匹配的節(jié)點脆霎，則返回null。
- document.querySelectorAll方法與querySelector用法類似狈惫，區(qū)別是返回一個NodeList對象睛蛛，包含所有匹配給定選擇器的節(jié)點。
- document.getElementsByTagName()方法搜索 HTML 標簽名胧谈，返回符合條件的元素忆肾。它的返回值是一個類似數(shù)組對象（HTMLCollection實例），可以實時反映 HTML 文檔的變化菱肖。如果沒有任何匹配的元素客冈，就返回一個空集。
- document.getElementsByClassName()方法返回一個類似數(shù)組的對象（HTMLCollection實例）蔑滓，包括了所有class名字符合指定條件的元素郊酒，元素的變化實時反映在返回結(jié)果中。
- document.getElementsByName()方法用于選擇擁有name屬性的 HTML 元素（比如<form>键袱、<radio>、<img>摹闽、<frame>蹄咖、<embed>和<object>等），返回一個類似數(shù)組的的對象（NodeList實例）付鹿，因為name屬性相同的元素可能不止一個澜汤。
- document.getElementById()方法返回匹配指定id屬性的元素節(jié)點。如果沒有發(fā)現(xiàn)匹配的節(jié)點舵匾，則返回null俊抵。
- document.elementFromPoint()方法返回位于頁面指定位置最上層的元素節(jié)點。
- document.createElement方法用來生成元素節(jié)點坐梯，并返回該節(jié)點徽诲。
- document.createTextNode方法用來生成文本節(jié)點（Text實例），并返回該節(jié)點吵血。它的參數(shù)是文本節(jié)點的內(nèi)容谎替。
- document.createAttribute方法生成一個新的屬性節(jié)點（Attr實例），并返回它蹋辅。
- document.createComment方法生成一個新的注釋節(jié)點钱贯，并返回該節(jié)點。
- document.createDocumentFragment方法生成一個空的文檔片段對象（DocumentFragment實例）侦另。
- document.createEvent方法生成一個事件對象（Event實例）秩命，該對象可以被element.dispatchEvent方法使用尉共，觸發(fā)指定事件。
- document.hasFocus方法返回一個布爾值弃锐，表示當前文檔之中是否有元素被激活或獲得焦點爸邢。
- document.adoptNode方法將某個節(jié)點及其子節(jié)點，從原來所在的文檔或DocumentFragment里面移除拿愧，歸屬當前document對象杠河，返回插入后的新節(jié)點。插入的節(jié)點對象的ownerDocument屬性浇辜，會變成當前的document對象券敌，而parentNode屬性是null。
- document.importNode方法則是從原來所在的文檔或DocumentFragment里面柳洋，拷貝某個節(jié)點及其子節(jié)點待诅，讓它們歸屬當前document對象⌒芰停拷貝的節(jié)點對象的ownerDocument屬性卑雁，會變成當前的document對象，而parentNode屬性是null绪囱。
- document.createNodeIterator方法返回一個子節(jié)點遍歷器测蹲。
- document.createTreeWalker方法返回一個 DOM 的子樹遍歷器。它與document.createNodeIterator方法基本是類似的鬼吵，區(qū)別在于它返回的是TreeWalker實例扣甲，后者返回的是NodeIterator實例。另外齿椅，它的第一個節(jié)點不是根節(jié)點琉挖。
- 如果document.designMode屬性設(shè)為on，那么整個文檔用戶可編輯涣脚；如果元素的contenteditable屬性設(shè)為true示辈，那么該元素可編輯。這兩種情況下遣蚀，可以使用document.execCommand()方法矾麻，改變內(nèi)容的樣式，比如document.execCommand('bold')會使得字體加粗妙同。
- document.queryCommandSupported()方法返回一個布爾值射富，表示瀏覽器是否支持document.execCommand()的某個命令。
- document.queryCommandEnabled()方法返回一個布爾值粥帚，表示當前是否可用document.execCommand()的某個命令胰耗。比如，bold（加粗）命令只有存在文本選中時才可用芒涡，如果沒有選中文本柴灯，就不可用卖漫。
12 什么是Element節(jié)點對象？有哪些常用的屬性和方法赠群？
Element節(jié)點對象對應(yīng)網(wǎng)頁的 HTML 元素羊始。每一個 HTML 元素，在 DOM 樹上都會轉(zhuǎn)化成一個Element節(jié)點對象（以下簡稱元素節(jié)點）查描。
13 屬性操作的標準方法有哪些突委？
- getAttribute()：讀取某個屬性的值
- getAttributeNames()：返回當前元素的所有屬性名
- setAttribute()：寫入屬性值
- hasAttribute()：某個屬性是否存在
- hasAttributes()：當前元素是否有屬性
- removeAttribute()：刪除屬性
14 如何獲取文本節(jié)點？
Element.innerHTML屬性返回一個字符串冬三，等同于該元素包含的所有 HTML 代碼匀油。該屬性可讀寫，常用來設(shè)置某個節(jié)點的內(nèi)容勾笆。它能改寫所有元素節(jié)點的內(nèi)容敌蚜，包括<HTML>和<body>元素。
15 有哪些操作 CSS 樣式的方法窝爪？
- Element.hidden屬性返回一個布爾值弛车，表示當前元素的hidden屬性，用來控制當前元素是否可見蒲每。該屬性可讀寫纷跛。
16 什么是Mutation Observer API ？與事件有什么區(qū)別啃勉？
Mutation Observer API 用來監(jiān)視 DOM 變動忽舟。DOM 的任何變動，比如節(jié)點的增減淮阐、屬性的變動、文本內(nèi)容的變動刁品，這個 API 都可以得到通知泣特。
概念上，它很接近事件挑随，可以理解為 DOM 發(fā)生變動就會觸發(fā) Mutation Observer 事件状您。但是，它與事件有一個本質(zhì)不同：事件是同步觸發(fā)兜挨，也就是說膏孟，DOM 的變動立刻會觸發(fā)相應(yīng)的事件；Mutation Observer 則是異步觸發(fā)拌汇，DOM 的變動并不會馬上觸發(fā)柒桑，而是要等到當前所有 DOM 操作都結(jié)束才觸發(fā)。
17 MutationObserver 的實例方法有哪些噪舀？
- observe()方法用來啟動監(jiān)聽魁淳，它接受兩個參數(shù)飘诗。
- disconnect()方法用來停止觀察。調(diào)用該方法后界逛，DOM 再發(fā)生變動昆稿，也不會觸發(fā)觀察器。
- takeRecords()方法用來清除變動記錄息拜，即不再處理未處理的變動溉潭。該方法返回變動記錄的數(shù)組。
