一．簡單介紹
Dom是W3C-萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)，它定義了訪問HTML和XML文檔的標(biāo)準(zhǔn)。W3C文檔對象模型（DOM）是中立與平臺和語言的接口，它允許程序和腳本動態(tài)的訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式的。
W3C將DOM分為3個不同的部分:
1.核心DOM:針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型；
2.XML DOM部分：針對XML文檔的標(biāo)準(zhǔn)模型；
3.HTML DOM部分:針對HTML文檔的標(biāo)準(zhǔn)模型；
XML DOM:定義了所有XML元素的對象和屬性及訪問它們的方法；
HTML DOM:定義了所有HTML元素的對象和屬性及訪問它們的方法；
二．DOM節(jié)點
根據(jù)W3C的HTML DOM標(biāo)準(zhǔn)，HTML文檔中的所有內(nèi)容都是節(jié)點（NODE），分為5種節(jié)點類型：
1.整個文檔是一個文檔節(jié)點(document對象),每個html頁面整體;
2.每個HTML元素是元素節(jié)點(element對象)，頁面中的每個標(biāo)簽；
3.HTML元素內(nèi)的文本是文本節(jié)點(text對象)；
4.每個HTML中屬性是屬性節(jié)點(attribute對象)；
5.注釋是注釋的節(jié)點(comment對象)；
如下圖所示:
2.1節(jié)點屬性(自身屬性):
1.attribute-節(jié)點(元素)的屬性節(jié)點；
2.nodeType-節(jié)點類型；
3.nodeValue-節(jié)點值；
4.nodeName-節(jié)點名稱；
5.innerHTML-節(jié)點(元素)的文本值；
2.2導(dǎo)航屬性:-定位到元素的方法
1.parentnode-節(jié)點(元素)的父節(jié)點
2.firstChild-節(jié)點下的第一個子元素；
3.lastChild-節(jié)點下的最后一個元素；
4.childNodes-節(jié)點(元素)的子節(jié)點
推薦使用:
5.parentElement-父節(jié)點標(biāo)簽元素
6.Children-所有子標(biāo)簽
7.firstElementChild-第一個子標(biāo)簽元素
8.lastElementChild-最后一個子標(biāo)簽元素
9.nextElementSibling-下一個兄弟標(biāo)簽元素
10.previousElementSibling-上一個兄弟標(biāo)簽元素
實例代碼:
目前成都創(chuàng)新互聯(lián)公司已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、蓬安網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
重慶分公司
重慶分公司
Title
2.3 如何找到HTML中的任意element節(jié)點
常用屬性
1.getElementsByClassName()-支持全局和局部查找(得到的是數(shù)組)
2.getElementsByName()-只支持全局查找(得到的是數(shù)組)
3.getElementsByTagName()-支持全局和局部查找(得到的是數(shù)組)
4.etElementById()-只支持全局查找
例如:
Title
2.4子節(jié)點、父節(jié)點、同胞(兄弟)節(jié)點簡述
每個節(jié)點均有且只有一個父節(jié)點(根節(jié)點除外)；
每個節(jié)點可以含有多個子節(jié)點；
每個節(jié)點可以有多個兄弟節(jié)點；
三．Event 事件
1.事件分類
HTML 4.0之后的的新增一大特性就是有能力使HTML事件去觸發(fā)瀏覽器中的動作，例如:點擊某一HTML標(biāo)簽時觸發(fā)某一功能(JavaScript函數(shù))。常見的屬相列表如下圖所示(這些屬性可以插入HTML標(biāo)簽來自定義動作事件):
onclick：當(dāng)用戶點擊某個對象時觸發(fā)某一事件(調(diào)用某一句柄)；
ondblclick:當(dāng)用戶雙擊某一對象時觸發(fā)某一事件(調(diào)用某一句柄)；
onfocus:獲取元素焦點時觸發(fā)某一事件
onblur:失去元素焦點時觸發(fā)某一事件
onchange：域的內(nèi)容被改變
onkeydown:某個鍵盤被按下時觸發(fā)某一事件；
onkeypress：某個鍵盤按鍵被按下并松開時觸發(fā)某一事件；
onkeyup:某個鍵盤按鍵被松開；
onload：一張頁面或者一幅圖像加載完成時觸發(fā)某一事件；
onload屬性在開發(fā)中一般只給body添加，該屬性的觸發(fā)標(biāo)志著頁面被加載完成。應(yīng)用場景:當(dāng)有些事件我們希望頁面加載完成之后才執(zhí)行，就可以使用該屬性。
onmousedown:鼠標(biāo)按鈕被按下時觸發(fā)某一事件；
onmousemove:鼠標(biāo)按鈕被移動時觸發(fā)某一事件；
onmouseout:鼠標(biāo)從某元素移開時觸發(fā)某一事件；
onmouseover:鼠標(biāo)移到某元素之上時觸發(fā)某一事件；
onmouseleave:鼠標(biāo)從元素離開時觸發(fā)某一事件；
onselect：文本被選中時觸發(fā)的某一事件；
onsubmit：點擊’確認(rèn)’按鈕時觸發(fā)某一事件；
onsubmit事件是當(dāng)表單在進行提交時觸發(fā)，該屬性也只能給form表單使用。應(yīng)用場景:在表單進行提交到后端之前前端進行相關(guān)的校驗(例如:格式校驗)，若校驗通過則提交前端數(shù)據(jù)到后端，否則返回一個false或者使用event事件的preventDefault()函數(shù),兩種方式都會阻止表單的提交。(即:onsubmit事件在提交數(shù)據(jù)到后端之前觸發(fā)，注意優(yōu)先級)
實例代碼:(需求:提交表單之前，前端驗證name是否為關(guān)鍵字name,年齡是否小于0,有一者不滿足則不提交數(shù)據(jù)到后端)
代碼如下:
submit
2.事件綁定方式
JavaScript中時間綁定方式分為兩種:1是通過在HTML標(biāo)簽中進行綁定事件；2是在JavaScript中先找到需要綁定事件的對象，再去實現(xiàn)其對應(yīng)的事件。如下圖所示：
方式1：
EventTest1
一
二
三
四
span標(biāo)簽
此時有兩點不好的地方:1是例中多個p標(biāo)簽點擊時都是觸發(fā)相同的事件，此時按照方式1來完成需要在每個p標(biāo)簽后面寫相同重復(fù)的代碼；2是結(jié)構(gòu)和行為未完全分離，不利于后期的維護；
方式2：
EventTest2
一
二
三
四
span標(biāo)簽
3.this關(guān)鍵字的用法
格式:函數(shù)名(this);
作用:實例中點擊span標(biāo)簽的this 標(biāo)簽漢子時，就可以獲取當(dāng)前點擊標(biāo)簽的內(nèi)容。即:this關(guān)鍵字可以獲取本標(biāo)簽的自身信息，以方便通過它來獲取與之相關(guān)的標(biāo)簽信息。
實例代碼：
EventTest1
一
二
三
四
this標(biāo)簽
span標(biāo)簽
效果圖：
4.Event對象
Event對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。時間通常是和函數(shù)結(jié)合使用的，函數(shù)不會再時間觸發(fā)前被執(zhí)行。Event對象在事件發(fā)生時系統(tǒng)已經(jīng)創(chuàng)建好了，并且會在事件函數(shù)被調(diào)用時傳給事件函數(shù)，我們獲取只需要僅僅接收一下即可。
比如:onkeydown，我們想知道哪個按鈕被按下了，只需要通過event對象的屬性就可以，這時可通過event的KeyCode屬性，例如:
5.事件傳播
所謂事件傳播是指，我們給元素A定義了一個事件a,給元素B定義了一個事件b，但是元素B有包含于元素A中或者兩者之間有交集的部分定義了事件，此時執(zhí)行交集中的事件既會執(zhí)行事件a又會執(zhí)行事件b，也就是說A元素的事件a傳播到了B元素中了，此時難免不符合需求，如何解決，以下面例子說明。例如:
Title
outer
inner
四．DOM節(jié)點的增刪改查
1.增加節(jié)點
需求:每點擊一次增加一個p標(biāo)簽節(jié)點，如下圖所示:
代碼塊如下:
Title
javascript test1
javascript test2
javascript test3
javascript test4
2.刪除節(jié)點
需求:每點擊一次刪除一個p標(biāo)簽，從第一個開始刪起；
代碼塊如下:
Title
javascript test1
javascript test2
javascript test3
javascript test4
3.修改節(jié)點
需求：點擊replace，若test3標(biāo)簽存在則將其更改成img標(biāo)簽，否則進行彈框提示；
效果圖如下:
代碼塊如下:
Title
javascript test1
javascript test2
javascript test3
javascript test4
4.查詢對應(yīng)的節(jié)點
4.1 getElementsByClassName(“classname”):結(jié)果為列表
4.2 getElementsByName(“name”):結(jié)果為列表
4.3 getElementsByTagName(“TagName”):結(jié)果為列表
4.4 getElementById(“id”)
五．DOM節(jié)點屬性的設(shè)置
1.改變HTML內(nèi)容
改變元素內(nèi)容最簡單的方法是使用innerHTML、innerText
注意innerHTML、innerText方法的區(qū)別:innerHTML添加的將會是一個HTML的效果，而innerText只是一個text文字類型的效果，如下圖：
代碼塊如下:
Title
姓名
性別
2.更改CSS樣式
思路:
2.1 找到需要操作的標(biāo)簽element；
2.2 使用element.style.css=”修改后的值”方法進行修改
代碼塊如下:
Title
姓名
性別
效果圖如下:
3.設(shè)置(改變)HTML屬性
方法1:element.attribute = value
方法2:element.setAttribute(attribute,value)
實例代碼如下:
Title
4.獲取HTML屬性值
方法:element.getAttribute(attributename)
實例代碼如下；
Title
5.創(chuàng)建新的HTML元素(標(biāo)簽)
方法:document.createElement("tagname")
實例代碼如下:
Title
6.刪除已有的HTML元素(標(biāo)簽)
方法：element.removeChild(removetag)
實例代碼如下；
Title
刪除
7.Class的相關(guān)操作
1.element.className：獲取該class所有值,結(jié)果為字符串類型；
2.element.classList[index]:獲取第幾個class值,index超出邊界則為undefined；
3.element.classList.add("addclassname")：增加class值；
4.element.classList.remove("deleteclassname"):刪除class值，有則刪除無則略過不報錯；
實例代碼如下:
Title
DIV標(biāo)簽
