[[422844]]

大家好，我是IT共享者，人稱皮皮。

前言

相信做網(wǎng)站對JavaScript再熟悉不過了，它是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務(wù)器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網(wǎng)頁方面是有很大作用的。

1.文檔對象(DOM)

1).Document對象

這是我們用的最普遍的一個文檔對象了，專門用來操作DOM節(jié)點時用。

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)).獲取網(wǎng)頁內(nèi)容

document.cookie        #網(wǎng)頁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實現(xiàn) 
document.inputEncoding  #文檔的編碼（字符集） 
document.readyState     #文檔的（加載）狀態(tài) 
document.strictErrorChecking    #是否強制執(zhí)行錯誤檢查 

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)).獲取節(jié)點

childNodes          #獲取子節(jié)點的集合 ，返回數(shù)組 ，并把換行和空格也當成是節(jié)點信息。 
children            #獲取子節(jié)點的集合 ，返回數(shù)組    
firstChild          #獲取第一個子元素  并把換行和空格也當成是節(jié)點信息 
firstElementChild   #獲取第一個子節(jié)點 
lastChild           #獲取最后一個子節(jié)點 并把換行和空格也當成是節(jié)點信息 
lastElementChild    #獲取最后一個子節(jié)點 
parentNode          #獲取父節(jié)點 
parentElement       #獲取父節(jié)點(IE) 
offsetParent        #獲取所有父節(jié)點  對應的值是body下的所有節(jié)點信息 
previousSibling         #獲取上一個兄弟節(jié)點  匹配字符，包括換行和空格，而不是節(jié)點 
previousElementSibling  #獲取上一個兄弟節(jié)點  直接匹配節(jié)點 
nextSibling             #獲取下一個兄弟節(jié)點  匹配字符，包括換行和空格，而不是節(jié)點 
nextElementSibling      #獲取下一個兄弟節(jié)點  直接匹配節(jié)點 
ownerDocument           #元素的根節(jié)點 

這里我們獲取到了所有的Div元素，我們可以針對性的獲取一個ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).創(chuàng)建節(jié)點

我們可以自定義節(jié)點并添加值，不過要將它添加到文檔中去，所以必須添加節(jié)點，一般和下方的增加節(jié)點配套使用。

document.createElement(標簽)  #創(chuàng)建HTML元素 
document.createTextNode(文本) #給文檔添加文本 
document.createComment(文本)  #創(chuàng)建一個注釋節(jié)點 
document.createDocumentFragment() #創(chuàng)建文檔粉碎節(jié)點 

7)).增加節(jié)點

appendChild（節(jié)點） #節(jié)點被添加到元素的末尾 
insertBefore（a,b） #a節(jié)點會插入b節(jié)點的前面 

8)).刪除節(jié)點

removeChild(節(jié)點名)  #被移除的節(jié)點仍在文檔中，只是文檔中已沒有其位置了 

9)).替換節(jié)點

replaceChild(插入的節(jié)點，被替換的節(jié)點) 

10)).復制節(jié)點

a.cloneChild() #復制a節(jié)點,復制出來的節(jié)點作為返回值為true時，則a元素后代也一并復制。否則，僅復制a元素本身 

11)).節(jié)點屬性

#節(jié)點類型 nodeType 有三種情況 
#1.元素節(jié)點  2.屬性節(jié)點  3.文本節(jié)點 
 
#節(jié)點名稱 nodeName  
 
#節(jié)點值 nodeValue  
#元素節(jié)點沒節(jié)點值，為null  
#文本節(jié)點的節(jié)點值就是文本 
#屬性節(jié)點的節(jié)點值就是該屬性值 
 
#節(jié)點屬性獲取 
a.width 
a['width'] 
a.gerAttribute(屬性名)  返回指定的屬性值 
a.gerAttributeNode(屬性名) 返回指定的屬性節(jié)點 
節(jié)點屬性設(shè)置 
a.width=400 
a['width']=400 
a.attributes['width']=400 
a.setAttribute('width',400) 添加指定的屬性 
a.setAttributeNode(b) 添加指定的屬性節(jié)點 
 
#節(jié)點屬性刪除 
a.removeChild(子節(jié)點)    從元素中移除子節(jié)點 
a.removeAttribute(屬性)  從元素中移除指定屬性 
a.removeAttributeNode(屬性) 移除指定的屬性節(jié)點，并返回被移除的節(jié)點 
 
a.id 獲取當前元素的id 
a.className  獲取當前元素的class 
a.classList  獲取當前元素的class列表 
 
a.accessKey='w'    設(shè)置或返回元素的快捷鍵 
a.namespaceURI     返回指定節(jié)點的命名空間的 URI 
a.dir              設(shè)置或返回元素的內(nèi)容是否可編輯 
a.normalize()      合并元素中相鄰的文本節(jié)點，并移除空的文本節(jié)點 
a.tabIndex='3'     設(shè)置或返回元素的tab鍵控制次序 
a.tagName          返回元素的標簽名 
a.textContent      設(shè)置或返回節(jié)點及其子代的文本內(nèi)容 
a.title            設(shè)置或返回元素的標題屬性 
a.item(num)        返回節(jié)點列表中位于指定下標的節(jié)點 
a.length           返回節(jié)點列表中的節(jié)點數(shù) 

12)).獲取元素文本

a.innerHTML  獲取或者設(shè)置對象內(nèi)的HTML 
a.innerText  獲取或者設(shè)置對象內(nèi)的文本 
a.outerHTML  獲取或者設(shè)置對象外的HTML 
a.outerText  獲取或者設(shè)置對象外的文本 
a.value      獲取或者設(shè)置表單元素的值 

總結(jié)

這篇文章主要介紹了JavaScript的文檔對象。下一篇文章，我們繼續(xù)介紹JavaScript，敬請期待!

【編輯推薦】