大家好，我是IT共享者，人稱皮皮。
前言
相信做網站對JavaScript再熟悉不過了，它是一門腳本語言，不同於Python的是，它是一門瀏覽器腳本語言，而Python則是服務器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網頁方面是有很大作用的。
1.文檔對象（DOM）
1).Document對象
這是我們用的最普遍的一個文檔對象了，專門用來操作DOM節點時用。
1)).獲取元素
document.getElementById() #通過id查找HTML元素
document.getElementsByName() #通過name查找HTML元素
document.getElementsByTagName() #通過標簽名查找HTML元素
document.getElementsByClassName() #通過類名查找HTML元素
document.querySelector(".h") #第一個類名為 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class為"no"或者id為"h"的div元素
document.body #獲取body標簽
document.documentElement #獲取html標簽
2)).獲取網頁內容
document.cookie #網頁cookie
document.domain #文檔的域名
document.lastModified #文檔被最后修改的日期和時間
document.referrer #載入當前文檔的文檔的URL
document.title #當前文檔的標題
document.URL #當前文檔的URL
document.doctype #當前文檔的doctype
document.baseURI #當前文檔的絕對URI
document.documentMode #瀏覽器使用的模式
document.documentURI #文檔的URI
document.implementation #DOM實現
document.inputEncoding #文檔的編碼（字符集）
document.readyState #文檔的（加載）狀態
document.strictErrorChecking #是否強制執行錯誤檢查
3)).文檔寫入
document.write('hello world') 向文檔寫入文本
document.writeln('hello world') 向文檔寫入文本並換行
4)).獲取集合
document.all #所有html元素
document.anchors #所有Anchor引用
document.forms #所有的表單引用
document.images #所有的圖片引用
document.links #所有的超鏈接引用
document.scripts #所有的腳本引用
document.embeds #所有的流媒體引用
5)).獲取節點
childNodes #獲取子節點的集合 ，返回數組 ，並把換行和空格也當成是節點信息。
children #獲取子節點的集合 ，返回數組
firstChild #獲取第一個子元素 並把換行和空格也當成是節點信息
firstElementChild #獲取第一個子節點
lastChild #獲取最后一個子節點 並把換行和空格也當成是節點信息
lastElementChild #獲取最后一個子節點
parentNode #獲取父節點
parentElement #獲取父節點(IE)
offsetParent #獲取所有父節點 對應的值是body下的所有節點信息
previousSibling #獲取上一個兄弟節點 匹配字符，包括換行和空格，而不是節點
previousElementSibling #獲取上一個兄弟節點 直接匹配節點
nextSibling #獲取下一個兄弟節點 匹配字符，包括換行和空格，而不是節點
nextElementSibling #獲取下一個兄弟節點 直接匹配節點
ownerDocument #元素的根節點
這里我們獲取到了所有的Div元素，我們可以針對性的獲取一個ID下的Div的子元素以及它的兄弟和父，子元素，如下：
6)).創建節點
我們可以自定義節點並添加值，不過要將它添加到文檔中去，所以必須添加節點，一般和下方的增加節點配套使用。
document.createElement(標簽) #創建HTML元素
document.createTextNode(文本) #給文檔添加文本
document.createComment(文本) #創建一個注釋節點
document.createDocumentFragment() #創建文檔粉碎節點
7)).增加節點
appendChild（節點） #節點被添加到元素的末尾
insertBefore（a,b） #a節點會插入b節點的前面
8)).刪除節點
removeChild(節點名) #被移除的節點仍在文檔中，只是文檔中已沒有其位置了
9)).替換節點
replaceChild(插入的節點，被替換的節點)
10)).復制節點
a.cloneChild() #復制a節點,復制出來的節點作為返回值為true時，則a元素后代也一並復制。否則，僅復制a元素本身
11)).節點屬性
#節點類型 nodeType 有三種情況
#1.元素節點 2.屬性節點 3.文本節點
#節點名稱 nodeName
#節點值 nodeValue
#元素節點沒節點值，為null
#文本節點的節點值就是文本
#屬性節點的節點值就是該屬性值
#節點屬性獲取
a.width
a['width']
a.gerAttribute(屬性名) 返回指定的屬性值
a.gerAttributeNode(屬性名) 返回指定的屬性節點
節點屬性設置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的屬性
a.setAttributeNode(b) 添加指定的屬性節點
#節點屬性刪除
a.removeChild(子節點) 從元素中移除子節點
a.removeAttribute(屬性) 從元素中移除指定屬性
a.removeAttributeNode(屬性) 移除指定的屬性節點，並返回被移除的節點
a.id 獲取當前元素的id
a.className 獲取當前元素的class
a.classList 獲取當前元素的class列表
a.accessKey='w' 設置或返回元素的快捷鍵
a.namespaceURI 返回指定節點的命名空間的 URI
a.dir 設置或返回元素的內容是否可編輯
a.normalize() 合並元素中相鄰的文本節點，並移除空的文本節點
a.tabIndex='3' 設置或返回元素的tab鍵控制次序
a.tagName 返回元素的標簽名
a.textContent 設置或返回節點及其子代的文本內容
a.title 設置或返回元素的標題屬性
a.item(num) 返回節點列表中位於指定下標的節點
a.length 返回節點列表中的節點數
12)).獲取元素文本
a.innerHTML 獲取或者設置對象內的HTML
a.innerText 獲取或者設置對象內的文本
a.outerHTML 獲取或者設置對象外的HTML
a.outerText 獲取或者設置對象外的文本
a.value 獲取或者設置表單元素的值
總結
這篇文章主要介紹了JavaScript的文檔對象。下一篇文章，我們繼續介紹JavaScript，敬請期待！