DOM/BOM
document 是DOM的根， 就是整個頁面；
window 是BOM的根，就是整個瀏覽器；
BOM包含DOM；
BOM
location
location.reload()//重繪頁面
location.href=https://bbs.csdn.net/topics/url//有歷史記錄的跳轉
location.assign=url//復制跳轉，有歷史記錄
location.replace=url//替換跳轉，沒有歷史記錄
location.serach//獲取地址欄？后邊的字串
location.hash//獲取地址欄#后面的內容（獲取錨點的名稱）
location.hostname//主機域名
location.port//埠
location.pathname//路徑
location.protocol//協議
history
history.back()//向后一步跳轉
history.forward()//向前一步跳轉
history.go(0)//0是重繪頁面，1向前一步跳轉，-1向后一步跳轉
navigator.userAgent
回傳由客戶機發送服務器的user-agent頭部的值；
DOM
document
document.documentElement//html標簽
document.body//body標簽
document.head//head標簽
document.title//titile標簽
document.URL//當前的url
document.domain//當前的域名
DOM操作
//創建
document.createElement('標簽')//通過標簽創建DOM
document.createDocumentFragment()//創建碎片收集器
document.createTextNode('文本內容')//創建文本節點
//獲取
//獲取到NodeList串列
document.getElementsByName(name)//通過name去獲取元素串列
document.getElementsByClassName(class)//通過class去獲取元素串列
document.getElementsByTagName(tag)//通過標簽獲取元素串列
document.querySelectorAll(selector)//通過選擇器獲取元素串列
//獲取到唯一元素
document.getElementById(id)//通過id獲取元素
document.querySelector(selector)//通過選擇器獲取對應元素串列中的第一個元素
//插入
父容器.appendChild(子元素)//將元素插入到父容器中
父容器.insertBefore(新元素，插入在誰的前面)//將元素插入到父容器中目標元素的前面
//ps:插入元素是移動元素不會復制元素
//復制
目標元素.cloneNode(false/true);//淺復制(默認)/深復制
//將元素復制成一個新內容，節點也可以復制；深復制是將元素、內容和子元素一起復制，淺復制是僅復制該元素自身
//ps: 復制時注意，如果標簽有id，復制品的id必須做修改
//洗掉
要洗掉的元素.remove()//洗掉元素
父容器.removeChild(子元素)//通過父容器洗掉子元素，只能洗掉子元素，不能洗掉后代元素；
//ps: 洗掉只將元素從頁面中洗掉，但是仍然在堆中儲存；元素 = null，才會徹底洗掉元素
//替換
父容器.replaceChild(新元素，需要替換掉的舊元素)
DOM的屬性
其實DOM也是物件，因此DOM可以設定一系列的物件屬性和方法；
有些屬性是DOM初始就設定的屬性（系統設定的屬性）；
DOM屬性分為兩種：標簽屬性和物件屬性
物件屬性：我們可以通過js的api去獲取DOM物件，此時DOM物件的屬性就是物件屬性
const div = document.querySelector('div')
div.className標簽屬性：我們在html中標簽上設定的屬性就是標簽屬性；
<div class="test">標簽上的屬性class</div>
無論是物件屬性還是標簽屬性我們都可以進行自定義，但是自定義的物件屬性無法設定在標簽上，自定義的標簽屬性無法在DOM中通過物件屬性直接獲取
設定標簽屬性的增刪改查
const div = docuemnt.querySelector('div');
div.setAttribute(key, value) // 元素標簽上添加key=“value”的標簽屬性
div.getAttribute(key)//獲取元素的標簽屬性key的值： value
div.removeAttribute(key)//洗掉元素的標簽屬性key
DOM的樣式
const div = document.querySelector('div');
//樣式的設定
Object.assign(div.style, {
width: '100px',
height: '100px'
})
//任何css樣式都不能通過div.style物件獲取，這個只是設定行內樣式；html加載完以后才開始執行css；
//css樣式獲取的兼容寫法
var bgColor;
try {
//谷歌
bgColor = getComputedStyle(div).backgroundColor;
} catch(err) {
bgColor = div.currentStyle.backgroundColor;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/269046.html
標籤：JavaScript
上一篇：如何編輯子項？