1.什么是DOM
1.1DOM 是 Document Object Model（文檔對(duì)象模型）的縮寫坚洽。
1.2DOM是中立于平臺(tái)和語言的接口，它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式疾宏。
1.3在 HTML DOM中后添，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹的 HTML蛙讥。
2.什么是DOM節(jié)點(diǎn)
HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)锯蛀、整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)、每個(gè) HTML 元素是元素節(jié)點(diǎn)次慢、HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)旁涤、每個(gè) HTML 屬性是屬性節(jié)點(diǎn)、注釋是注釋節(jié)點(diǎn)
3.常見的DOM屬性
3.1innerHTML 屬性
??? 可以用來修改元素內(nèi)部的文本迫像，與innerText屬性類似劈愚，innerHTML和innerText的區(qū)別在于前者獲取的是被操作元素的開始標(biāo)簽到結(jié)束標(biāo)簽之間的所有的元素，而后者獲取的是被操作元素的開始標(biāo)簽到結(jié)束標(biāo)簽之間的所有文本闻妓，但是兩者都可以用來修改元素內(nèi)的內(nèi)容菌羽，在修改元素內(nèi)的內(nèi)容時(shí)，其他的之前已經(jīng)存在的子元素會(huì)被覆蓋
3.2nodeName 屬性
nodeName 屬性規(guī)定節(jié)點(diǎn)的名稱由缆，元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同注祖，屬性節(jié)點(diǎn)的 nodeName 與屬性名相同猾蒂，文本節(jié)點(diǎn)的 nodeName 始終是 #text，文檔節(jié)點(diǎn)的 nodeName 始終是 #document
4.訪問元素的方法
4.1通過使用 getElementById() 方法
使用id選擇器可以直接選到id對(duì)應(yīng)的元素是晨，并對(duì)元素進(jìn)行操作
4.2通過使用 getElementsByTagName() 肚菠、通過使用 getElementsByClassName()
這兩種方法前者是通過元素的標(biāo)簽進(jìn)行元素的訪問，后者是通過類名來訪問元素罩缴，和id選擇器的區(qū)別在于它們選擇到的是一個(gè)數(shù)組蚊逢，因此需要對(duì)具體元素進(jìn)行操作的時(shí)候，需要再變量后面加上【x】靴庆，中括號(hào)里面是元素的索引值时捌，即該元素在同類名或同便簽名的元素中的索引值
5.修改元素的方法
5.1改變 HTML 內(nèi)容
document.getElementById("p1").innerHTML="New text!";使用此方法的時(shí)候注意新設(shè)定的內(nèi)容會(huì)將元素中之前存在的文本或者子元素覆蓋
5.2改變 CSS 樣式
document.getElementById("p2").style.color="blue";
5.3改變多個(gè)CSS 樣式
document.getElementById("p2").style.cssText="width:10px;height:10px"；這個(gè)方法不會(huì)將元素之前設(shè)置好的css樣式全部覆蓋炉抒，而是會(huì)將對(duì)應(yīng)的屬性項(xiàng)進(jìn)行覆蓋
通過對(duì)比可知使用element.style.cssText添加背景色樣式后奢讨，只有背景顏色得到了改變，其他樣式如高度焰薄、寬度和邊框等都未發(fā)生改變
5.4追加子元素的方法：
首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)）拿诸，然后把它追加到已有的元素上：var para=document.createElement("p");
創(chuàng)建新的 HTML 元素 - appendChild() ，在父元素的最后追加塞茅；
創(chuàng)建新的 HTML 元素-element.insertBefore(para,child)亩码，在指定位置給父級(jí)追加子元素；
刪除 HTML 元素野瘦，您必須清楚該元素的父元素：parent.removeChild(child);
替換 HTML 元素描沟，parent.replaceChild(para,child)方法；
6.使用便捷但不太常見的dom方法
6.1node類型中的cloneNode方法
(1)element.cloneNode(true):該方法會(huì)復(fù)制元素的樣式以及元素中的所有子元素的樣式
(2)element.cloneNode(false):該方法會(huì)復(fù)制元素本身但不會(huì)復(fù)制元素的子元素
(3)方法特點(diǎn)
此方法只會(huì)復(fù)制元素在html中存在的節(jié)點(diǎn)結(jié)構(gòu)和屬性鞭光，但不會(huì)復(fù)制在js中為元素設(shè)置的屬性或是方法吏廉、事件等
6.2document.url\document.domain\document.referrer方法
(1)document.url:此方法用于獲得頁面的完整的url地址
(2)document.domain:此方法用于獲得頁面的地址縮寫（域名地址），此方法是可以進(jìn)行修改的當(dāng)頁面中包含來自其他子域的框架或內(nèi)嵌框架時(shí)惰许，能夠設(shè)置document.domain就非常方便了席覆，由于跨域安全限制，來自不同子域的頁面無法通過javascript通信汹买，如果將每個(gè)頁面的document.domain設(shè)置為相同的值佩伤，這些頁面就可以互相訪問對(duì)方包含的javascript對(duì)象了
(3)document.referrer:此方法用于求當(dāng)前頁面的跳轉(zhuǎn)頁面源地址，即如果當(dāng)前頁面是由之前某個(gè)頁面跳轉(zhuǎn)過來的晦毙，那么此方法可以求得那個(gè)跳轉(zhuǎn)頁面的網(wǎng)址生巡，此方法常常用來做流量統(tǒng)計(jì)，即改頁面的訪問流量是從哪些頁面跳轉(zhuǎn)過來的
上圖當(dāng)前的頁面是由百度主頁跳轉(zhuǎn)過來的见妒，通過console控制臺(tái)可以看出三種方法得到的網(wǎng)址的類型
7.參考文獻(xiàn)
《Javascript高級(jí)程序設(shè)計(jì)》第三版
8孤荣、討論問題
attributes和property的區(qū)別？
視頻鏈接：http://cache.tv.qq.com/clientportal/v9_6/main.html?cid=&vid=n05023gxah8
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-02-DOM-common-manipulation.html#/
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始垃环，找個(gè)師兄，帶你入門返敬，掌控自己學(xué)習(xí)的節(jié)奏遂庄，學(xué)習(xí)的路上不再迷茫”劲赠。
這里是技能樹.IT修真院涛目，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化凛澎，成長可見化霹肝，師兄1對(duì)1免費(fèi)指導(dǎo)∷芗澹快來與我一起學(xué)習(xí)吧?沫换！
www.jnshu.com/login/1/95798135
