DOM和BOM操做

javacsript是經過訪問BOM（Browser Object Model）對象來訪問、控制、修改客戶端(瀏覽器)，因爲BOM的window包含了document，window對象的屬性和方法是直接可使用並且被感知的，所以能夠直接使用window對象的document屬性，經過document屬性就能夠訪問、檢索、修改XHTML文檔內容與結構。由於document對象又是DOM（Document Object Model）模型的根節點。能夠說，BOM包含了DOM(對象)，瀏覽器提供出來給予訪問的是BOM對象，從BOM對象再訪問到DOM對象，從而js能夠操做瀏覽器以及瀏覽器讀取到的文檔。

DOM

查找

document.getElementById('id')
document.getElementByClassName('classname')
document.getElementsByTagName('tag')
document.querySelector('#foo > div.bar')
document.querySelectorAll('.bar')
複製代碼

節點操做

// Append element1 as the last child of element2
element1.appendChild(element2)

myParentElement.removeChild(myElement)
myElement.parentNode.removeChild(myElement)

replaceChild()

// Create a clone
const myElementClone = myElement.cloneNode()
myParentElement.appendChild(myElementClone)

// Insert element2 as child of element 1, right before element3
element1.insertBefore(element2, element3)
// insert sp1 after sp2
parentDiv.insertBefore(sp1, sp2.nextSibling);

myElement.childNodes
myElement.firstChild
myElement.lastChild
myElement.previousSibling
myElement.nextSibling
myElement.parentNode
myElement.parentElement
複製代碼

建立DOM

document.createAttribute() // 建立屬性節點
document.createElement() // 建立元素節點
doucment.createTextNode() // 建立文本節點
document.createComment() // 建立新的註釋節點
document.createDocumentFragment() // 建立文檔片斷節點
複製代碼

DOM屬性

document.getElementById("p1").innerHTML="New text!" // 建立 HTML 內容
document.getElementById("p2").style.color="blue" // 改變 HTML 樣式
h1.setAttribute('class', 'hello')
h1.getAttribute('class')
input.removeAttribute('checked')
複製代碼

事件監聽

myElement.onclick = function onclick (event) {
  console.log(event.type + ' got fired')
}
這是一般應該避免採用的方法。這裏，.onclick是一個元素的屬性，也就是說你能夠修改它，可是你不能用它再綁定其餘的監聽函數-你只能把新的函數賦給它，覆蓋掉舊函數的引用。

myElement.addEventListener('click', function (event) {
  console.log(event.type + ' got fired')
})

複製代碼

BOM

window對象

history對象

history.go(1)
history.back()
history.forward()
複製代碼

document對象

document對象：其實是window對象的屬性，document == window.document爲true，是惟一一個既屬於BOM又屬於DOM的對象 
 
document.lastModified //獲取最後一次修改頁面的日期的字符串表示 
 
document.referrer //用於跟蹤用戶從哪裏連接過來的 
 
document.title //獲取當前頁面的標題，可讀寫 
 
document.URL //獲取當前頁面的URL，可讀寫 
 
document.anchors[0]或document.anchors["anchName"] //訪問頁面中全部的錨 
 
document.forms[0]或document.forms["formName"] //訪問頁面中全部的表單 
 
document.images[0]或document.images["imgName"] // 訪問頁面中全部的圖像 
 
document.links [0]或document.links["linkName"] //訪問頁面中全部的連接 
 
document.applets [0]或document.applets["appletName"] //訪問頁面中全部的Applet 
 
document.embeds [0]或document.embeds["embedName"] //訪問頁面中全部的嵌入式對象 
 
document.write(); 或document.writeln(); //將字符串插入到調用它們的位置 
複製代碼

location對象

location對象：表示載入窗口的URL，也可用window.location引用它 
 
location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm 
 
location.portocol //URL中使用的協議，即雙斜槓以前的部分，如http 
 
location.host //服務器的名字，如www.wrox.com 
 
location.hostname //一般等於host，有時會省略前面的www 
 
location.port //URL聲明的請求的端口，默認狀況下，大多數URL沒有端口信息，如8080 
 
location.pathname //URL中主機名後的部分，如/pictures/index.htm 
 
location.search //執行GET請求的URL中的問號後的部分，又稱查詢字符串，如?param=xxxx 
 
location.hash //若是URL包含#，返回該符號以後的內容，如#anchor1 
 
location.assign("http:www.baidu.com"); //同location.href，新地址都會被加到瀏覽器的歷史棧中 
 
location.replace("http:www.baidu.com"); //同assign()，但新地址不會被加到瀏覽器的歷史棧中，不能經過back和forward訪問 
 
location.reload(true | false); //從新載入當前頁面，爲false時從瀏覽器緩存中重載，爲true時從服務器端重載，默認爲false 
複製代碼

navigator對象

navigator對象：包含大量有關Web瀏覽器的信息，在檢測瀏覽器及操做系統上很是有用，也可用window.navigator引用它 
 
navigator.appCodeName //瀏覽器代碼名的字符串表示 
 
navigator.appName //官方瀏覽器名的字符串表示 
 
navigator.appVersion //瀏覽器版本信息的字符串表示 
 
navigator.cookieEnabled //若是啓用cookie返回true，不然返回false 
 
navigator.javaEnabled //若是啓用java返回true，不然返回false 
 
navigator.platform //瀏覽器所在計算機平臺的字符串表示 
 
navigator.plugins //安裝在瀏覽器中的插件數組 
 
navigator.taintEnabled //若是啓用了數據污點返回true，不然返回false 
 
navigator.userAgent //用戶代理頭的字符串表示  
複製代碼

screen對象

screen對象：用於獲取某些關於用戶屏幕的信息，也可用window.screen引用它 
 
screen.width/height //屏幕的寬度與高度，以像素計 
 
screen.availWidth/availHeight //窗口可使用的屏幕的寬度和高度，以像素計 
 
screen.colorDepth //用戶表示顏色的位數，大多數系統採用32位 
 
window.moveTo(0, 0); 
 
window.resizeTo(screen.availWidth, screen.availHeight); //填充用戶的屏幕  
複製代碼