1.什么是DOM
1.1DOM 是 Document Object Model（文檔對象模型）的縮寫。
1.2DOM是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
1.3在 HTML DOM中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
2.什么是DOM節點
HTML 文檔中的所有內容都是節點、整個文檔是一個文檔節點、每個 HTML 元素是元素節點、HTML 元素內的文本是文本節點、每個 HTML 屬性是屬性節點、注釋是注釋節點
3.常見的DOM屬性
3.1innerHTML 屬性
??? 可以用來修改元素內部的文本，與innerText屬性類似，innerHTML和innerText的區別在于前者獲取的是被操作元素的開始標簽到結束標簽之間的所有的元素，而后者獲取的是被操作元素的開始標簽到結束標簽之間的所有文本，但是兩者都可以用來修改元素內的內容，在修改元素內的內容時，其他的之前已經存在的子元素會被覆蓋
3.2nodeName 屬性
nodeName 屬性規定節點的名稱，元素節點的 nodeName 與標簽名相同，屬性節點的 nodeName 與屬性名相同，文本節點的 nodeName 始終是 #text，文檔節點的 nodeName 始終是 #document
4.訪問元素的方法
4.1通過使用 getElementById() 方法
使用id選擇器可以直接選到id對應的元素，并對元素進行操作
4.2通過使用 getElementsByTagName() 、通過使用 getElementsByClassName()
這兩種方法前者是通過元素的標簽進行元素的訪問，后者是通過類名來訪問元素，和id選擇器的區別在于它們選擇到的是一個數組，因此需要對具體元素進行操作的時候，需要再變量后面加上【x】，中括號里面是元素的索引值，即該元素在同類名或同便簽名的元素中的索引值
5.修改元素的方法
5.1改變 HTML 內容
document.getElementById("p1").innerHTML="New text!";使用此方法的時候注意新設定的內容會將元素中之前存在的文本或者子元素覆蓋
5.2改變 CSS 樣式
document.getElementById("p2").style.color="blue";
5.3改變多個CSS 樣式
document.getElementById("p2").style.cssText="width:10px;height:10px"；這個方法不會將元素之前設置好的css樣式全部覆蓋，而是會將對應的屬性項進行覆蓋
通過對比可知使用element.style.cssText添加背景色樣式后，只有背景顏色得到了改變，其他樣式如高度、寬度和邊框等都未發生改變
5.4追加子元素的方法：
首先必須創建該元素（元素節點），然后把它追加到已有的元素上：var para=document.createElement("p");
創建新的 HTML 元素 - appendChild() ，在父元素的最后追加；
創建新的 HTML 元素-element.insertBefore(para,child)，在指定位置給父級追加子元素；
刪除 HTML 元素，您必須清楚該元素的父元素：parent.removeChild(child);
替換 HTML 元素，parent.replaceChild(para,child)方法；
6.使用便捷但不太常見的dom方法
6.1node類型中的cloneNode方法
(1)element.cloneNode(true):該方法會復制元素的樣式以及元素中的所有子元素的樣式
(2)element.cloneNode(false):該方法會復制元素本身但不會復制元素的子元素
(3)方法特點
此方法只會復制元素在html中存在的節點結構和屬性，但不會復制在js中為元素設置的屬性或是方法、事件等
6.2document.url\document.domain\document.referrer方法
(1)document.url:此方法用于獲得頁面的完整的url地址
(2)document.domain:此方法用于獲得頁面的地址縮寫（域名地址），此方法是可以進行修改的當頁面中包含來自其他子域的框架或內嵌框架時，能夠設置document.domain就非常方便了，由于跨域安全限制，來自不同子域的頁面無法通過javascript通信，如果將每個頁面的document.domain設置為相同的值，這些頁面就可以互相訪問對方包含的javascript對象了
(3)document.referrer:此方法用于求當前頁面的跳轉頁面源地址，即如果當前頁面是由之前某個頁面跳轉過來的，那么此方法可以求得那個跳轉頁面的網址，此方法常常用來做流量統計，即改頁面的訪問流量是從哪些頁面跳轉過來的
上圖當前的頁面是由百度主頁跳轉過來的，通過console控制臺可以看出三種方法得到的網址的類型
7.參考文獻
《Javascript高級程序設計》第三版
8、討論問題
attributes和property的區別？
視頻鏈接：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修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
www.jnshu.com/login/1/95798135
