1. 程式人生 > 其它 >BOM操作及DOM操作

BOM操作及DOM操作


BOM(brower object model) 瀏覽器物件模型


常用物件 window
window的子物件
document 文件物件(表示整個html文件的內容)
location (位址列url物件)

獲取地址的內容 屬性
href 位址列完整連結
host hostname 主機
pathname 檔案路徑
hash 錨點
port 埠號
protocol 協議
orgin 跨域相關


方法
assign 跳轉方法
replace 替換url的方法
常見的跳轉方式
location直接賦值
location.url進行賦值
使用assign方法進行跳轉
使用replace進行替換跳轉(不會將原本的頁面新增到歷史記錄)


history (歷史物件)

屬性
length 歷史頁面的個數
state 歷史頁面對應的狀態值


方法
forward 前進
back 後退
go 去任意的歷史頁面
pushState 新增state值 新增一個新的歷史頁面
replaceState 替換一個state值
screen (使用者螢幕物件)
navigator (導航物件)
獲取使用者代理資訊(裡面包含了使用者瀏覽器 系統版本等)


userAgent 屬性

DOM (document object model 主要是用於操作html文件)
關於節點的劃分
element 元素節點(所有的標籤都是元素節點)
attribute 屬性節點 (所有的屬性都是屬性節點)
text 文字節點 (所有的文字都是文字節點)


關於元素節點的操作

獲取元素

通過id獲取 document.getElementById (返回的是一個元素)
通過class名字獲取 document.getElementsByClassName (返回的是一個htmlCollection)
通過標籤名獲取 document.getElementsByTagName (返回的是一個htmlCollection)
通過name屬性獲取 document.getElementsByName (返回的是一個NodeList)
通過選擇器獲取 獲取第一個 document.querySelector (返回的是一個元素)
通過選擇器獲取 獲取所有的 document.querySelectorAll (返回的是一個NodeList)


元素的屬性(賦值就是設定 沒有賦值就是獲取)

id 屬性 獲取id值
className 屬性 獲取class名字
title 獲取title屬性
style 獲取對應的樣式 (element.style.樣式名)
innerHTML 獲取元素裡面顯示的內容(包含了html程式碼)
innerText 獲取元素裡面顯示的文字 (只包含文字 不包含html程式碼)
TagName 只讀的獲取標籤名


屬性節點的操作

獲取所有的屬性節點
attributes 屬性獲取所有的屬性節點
從attributes獲取的屬性節點集合中讀取對應的屬性節點
通過下標讀取 [0]
通過對應的屬性名讀取 [‘屬性名’]
通過getNamedItem 方法進行獲取 裡面傳入的引數為屬性名
通過.的方式獲取 .id
attributes 屬性獲取所有的屬性節點的Map裡面包含的方法
item 根據下標找到對應的屬性節點 返回的attr物件
getNamedItem 根據屬性名進行獲取 返回的attr物件
setNamedItem 根據對應的屬性名進行設定 返回的attr物件
removeNamedItem 根據對應的屬性名進行刪除 返回的attr物件


獲取屬性值的方法

getAttribute 根據屬性名獲取屬性值 返回的型別是String
setAttribute 根據傳入的屬性名和屬性值進行設定
removeAttribute 根據屬性名移除屬性

節點關係(屬性)

children 屬性 獲取所有的子元素節點(不包含文字節點)
childNodes 獲取所有的子節點 (包含文字節點)
firstChild 獲取第一個子節點 (包含文字節點)
lastChild 獲取最後一個子節點 (包含文字節點)
parentNode 獲取父節點 parentElementNode 獲取父元素節點
nextSibling 下一個兄弟 previousSibling 上一個兄弟節點

節點型別獲取(屬性)

nodeType 1表示元素節點 2表示屬性節點 3表示文字節點
nodeValue 獲取對應的節點值
nodeName 獲取節點的名稱

屬性設定

對於天生就有的屬性通過.屬性名直接進行獲取或者設定
a.href = 'http://www.baidu.com'
對於本身沒有的使用setAttribute來進行設定 或者通過getAttribute進行獲取節點操作

節點建立(方法)

元素節點的建立 document.createElement('標籤名') 返回的是一個element
屬性節點建立 document.createAttribute('屬性名') 返回的是一個Attr物件 (必須要指定value值)
文字節點建立 document.createTextNode('文字值') 返回的是一個文字節點

子節點操作(方法)

appendChild 新增子節點
removeChild 刪除子節點
replaceChild 替換子節點
cloneNode 克隆節點