大家好，我是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，敬請期待！