基礎(chǔ)1了解DOM樹模型相關(guān)理論知識(shí)

209、DOM209、DOM一.DOMJavaScript是讓靜態(tài)HTML文檔“動(dòng)起來”的程序語言其一，讓頁面中的元素能夠?qū)崿F(xiàn)動(dòng)態(tài)、動(dòng)其二，能夠響應(yīng)用戶的操作、響應(yīng)DOM目的在于，能夠?qū)⒄麄€(gè)HTML文檔的層級(jí)嵌套關(guān)系映射成JavaScript代碼結(jié)構(gòu)，以此瀏覽器中的每個(gè)窗口都對(duì)應(yīng)一個(gè)JavaScriptWindowWindow對(duì)象都包含一個(gè)屬性，其對(duì)應(yīng)整個(gè)HTML文檔，表示整個(gè)窗口下網(wǎng)頁的內(nèi)容。這個(gè)用JavaScript代碼中的對(duì)象（Object）所表示的HTML文檔結(jié)構(gòu)，就是DOM，全稱為 ObjectModel）”，其結(jié)構(gòu)表現(xiàn)的像一顆樹，所以我們也稱其為DOM二.文檔對(duì)象模型文檔對(duì)象模型（DOM）包含所有HTML元素，以及所有文本字符串，甚至包含HTML注<html<title>DOM文檔樹<h1id="hh">文檔標(biāo)題<p文檔內(nèi)容甚至“回車符、HTML注釋”同樣也是節(jié)點(diǎn)。其一，包含所有、文本、注釋的類型，用“節(jié)點(diǎn)類型（Node）”表示其二，只包含的類型，用“元素類型（Element）”表示和Element是兩個(gè)對(duì)象，但是HTML DOMDOMElement每個(gè) 是一個(gè)元素節(jié)HTMLHTML三.ID[Element ementById([string]elementId[NodeList ementsByName([string]elementName[NodeList ementsByTagName([string]tagname通過CSS[NodeList ementsByClassName([string]className通過CSS[Element .querySelector([string]selector[NodeList .querySelectorAll([string]selector四.文檔樹（DOM） 對(duì)象、Element對(duì)象、文Text對(duì)象，以及注釋都是Node對(duì)象，Node一些重要的屬性，可以用來和遍歷節(jié)點(diǎn)樹 節(jié)點(diǎn)元素的名，返回結(jié)果為全大寫字母 沒有父節(jié)點(diǎn)包括元素節(jié)點(diǎn)和文本節(jié)點(diǎn),回車、空格屬于空文本節(jié)點(diǎn)（IE8及以下會(huì)忽略文本節(jié)點(diǎn)）具有同一個(gè)父節(jié)點(diǎn)、相鄰的節(jié)點(diǎn)中的前一個(gè)和后一個(gè)節(jié)點(diǎn)。（IE8及以下會(huì)忽略文本節(jié)點(diǎn)若要使用若要使用Node來遍歷節(jié)點(diǎn)，必須 firstChildlastChildElement類型，忽略文本、注釋、空白節(jié)點(diǎn)（IE8及以下返回undefined）varli= ementChild|| （IE8及以下返回varli= ementChild||得到當(dāng)前元素的所有子元素集合，返回HTMLCollection，類似于NodeList（能兼容子元素的數(shù)量。（IE78下返回ElementElement同樣 parentNode屬性，但返回的結(jié)果都是Element類型五.修改元素屬性和內(nèi)容HTML元素由名和屬性（名/值對(duì)）組成vara ementById("link"varhref=console.log(href,a.id=="link"注意：這種方式有局限性，因?yàn)榻?jīng)常會(huì)碰到屬性名和注意：這種方式有局限性，因?yàn)榻?jīng)常會(huì)碰到屬性名和JavaScript中的保留關(guān)鍵 vara ementById("link"varhrefa.getAttribute("hrefa.hrefvarid=a.setAttribute("id","new-link"console.log(href,a.id=="link"vara= ementById("link");console.log(a.hasAttribute("class"));a.removeAttribute("class");console.log(a.getAttribute("class"));修改元素的HTML內(nèi)容（包含所有內(nèi)容，包括HTML等HTMLElement.outerHTML元素本身也會(huì)被替換修改元素的文本內(nèi)容（去除所有HTML后的文本內(nèi)容六.創(chuàng)建、插入和刪除元素創(chuàng)建元素[Element .createElement([string]tagName[Text .prototype.createTextNode([string]datavarh2= h2.innerText="新增的標(biāo)題";div2.insertBefore(h2div2.firstChild);刪除當(dāng)前節(jié)點(diǎn)（但是IE不支持 ceChild(newNode,七.設(shè)置和獲取選中狀態(tài)element.checked3、做