定義

1. Dom

• <font color="#000">文檔對象模型(Document Object Model倚舀，簡稱DOM),是W3C組織推薦的處理HTML/XML的標(biāo)準(zhǔn)API接口.</font >
• <font color="#000">提供對文檔的結(jié)構(gòu)化描述,定義方式對結(jié)構(gòu)進行訪問并進行修改結(jié)構(gòu),樣式和內(nèi)容</font>
• <font color="#000">頂級對象時是document</font>

2. Bom

• <font color="#000">瀏覽器對象模型(Browser Object Model兼贸，簡稱BOM)</font>
• <font color="#000">提供了獨立于內(nèi)容而與瀏覽器窗口交互的對象</font>
• <font color="#000">頂級對象是window</font>

3. DOM和BOM的區(qū)別（對比圖）

4. dom和bom的關(guān)系結(jié)構(gòu)圖
   
   DOM和BOM關(guān)系結(jié)構(gòu)圖:

一寓落、DOM

1. dom樹

dom樹：

<ul>
<li>文檔: 一個頁面就是一個文檔,DOM中使用document表示</li>
<li>元素: 頁面中的所有標(biāo)簽都是元素,DOM中使用element表示</li>
<li>節(jié)點: 網(wǎng)頁中的所有內(nèi)容都是節(jié)點(標(biāo)簽,屬性,文本,注釋等),DOM中使用node表示</li>
</ul>

2. document對象

<font size=4 color='#42b983'>提示:</font>

---

2.1 常用屬性

• URL: 獲取當(dāng)前文檔的URL地址,只讀

document.URL

• title: 獲取當(dāng)前文檔Head中的title的文字內(nèi)容,可寫入修改

document.title

2.2 獲取文檔元素

 // 根據(jù)id,返回Element
getElementById('元素id')
//根據(jù)標(biāo)簽名獲取(如果是*,返回所有),返回HTMLCollection集合
getElementsByTagName('標(biāo)簽名')
// 根據(jù)name屬性,返回NodeList集合
getElementsByName(name) 
//根據(jù)元素類名返回元素對象集合
getElementByClassName('元素類名') 
// 根據(jù)css選擇器返回第一個元素對象
querySelector('選擇器') 
// 根據(jù)css選擇器返回所有指定元素,多個選擇器以逗號分隔querySelectorAll( 'p,a')
querySelectorAll('選擇器') 

2.3 獲取特殊元素(body,html)

// 獲取body元素
const bodyElem = document.body;  //返回body元素對象
// 獲取Html元素
const htmlElem = document.documentElement;  //返回html元素對象

3. 元素對象

3.1 Element

// Element對象是所有標(biāo)簽元素的基礎(chǔ)對象,封裝了所有標(biāo)簽元素的公共方法與屬性
// 常用屬性
Element.attributes              // 獲得所有屬性key-value集合
Element.className               // 獲得類名(可讀寫)=>idea:elem.className = 'pink',然后再css定義
                                // 注意:此方法會覆蓋原有類名
============================^_^============================
Element.classList               // 返回一個元素的類屬性的實時 DOMTokenList 集合(只讀),通過其內(nèi)部方法修改
                                // ie10+,
============================^_^============================                             
Element.id                      // 獲取元素id
Element.innerHTML               // 獲取元素內(nèi)部包裹的html標(biāo)簽字符串(可讀寫)
Element.innerText               // 獲取元素內(nèi)部文本,標(biāo)簽不識別會直接進行顯示(可讀寫)
Element.tagName                 // (只讀)獲取元素的標(biāo)簽名字符串
Element.style                   // 獲取/修改style樣式,如Element.style.backgroundColor


// 常用方法
Element.getAttribute(attrName)      // 返回屬性的字符串值,適合獲取自定義屬性data-
Element.removeAttribute(attrName)   // 從指定的元素中刪除一個屬性
Element.setAttribute(attrName,value)// 設(shè)置屬性
Element.hasAttribute(attrName)      // 檢測屬性是否存在
Element.getElementsByClassName()    // 獲取后代元素根據(jù)className
Element.getElementsByTagName()      // 獲取后代元素根據(jù)tagName
...

Element.dataset.index | Element.dataset['index']  // 用于獲取data-自定義屬性(h5新增),支持駝峰命名獲取(ie11+)

3.2 HTMLCollection

// HTMLCollection對象,是偽數(shù)組。元素的動態(tài)集合,提供了用來從該集合選擇元素的方法和屬性,當(dāng)其所包含的文檔結(jié)構(gòu)發(fā)生改變時,會自動更新.
// 常用屬性
HTMLCollection.length       // 返回集合中子元素的數(shù)組

============================^_^============================     

// 常用方法
HTMLCollection.item()       // 根據(jù)給定的索引（從0開始）荞下，返回具體的節(jié)點
HTMLCollection.namedItem()  // 根據(jù) Id 返回指定節(jié)點伶选，或者作為備用史飞，根據(jù)字符串所表示的 name 屬性來匹配

4. 節(jié)點操作

<font size=4 color='#e7c000'>WARNING:</font>

---

• 元素節(jié)點 nodeType為1
• 屬性節(jié)點 nodeType為2
• 文本節(jié)點 nodeType為3(文本幾點包含文字,空格,換行等)

4.1 節(jié)點層級

• 父級節(jié)點

    //parentNode屬性可返回某節(jié)點的父節(jié)點,注意是最近的一個父節(jié)點(親爸爸)
    node.parentNode // 找不到返回null

• 子節(jié)點

parentNode.childNodes           // 注意: 會返回3種子節(jié)點=>如果指向某種節(jié)點,可通過nodeType判斷
parentNode.firstChild           // 返回第一個子節(jié)點(會包括3種節(jié)點)
parentNode.lastChild            // 獲取最后一個子節(jié)點(會包括3種節(jié)點)

parentNode.children             // 只獲取子元素節(jié)點
parentNode.firstElementChild    // 獲取第一個子元素節(jié)點(ie9+)
parentNode.lastElementChild     // 獲取最后一個子元素節(jié)點(ie9+)

<font color="red">*注意：
parentNode.childNodes 返回值里包含了所有子節(jié)點，包括元素節(jié)點,文本節(jié)點等
</font>

• 兄弟節(jié)點

node.nextSibling                // 當(dāng)前元素的下一個兄弟節(jié)點(會包含3種節(jié)點)
node.previousSibling            // 當(dāng)前元素的上一個兄弟節(jié)點(會包含3種節(jié)點)

node.nextElementSibling         // 當(dāng)前元素的下一個兄弟元素節(jié)點(IE9+)
node.previousElementSibling     // 當(dāng)前元素的上一個兄弟元素節(jié)點(IE9+)

• 節(jié)點創(chuàng)建與添加

// 創(chuàng)建節(jié)點
let li = document.createElement('li');
// 在已有子節(jié)點后面追加節(jié)點(不會覆蓋原有節(jié)點)
parentNode.appendChild(li);
// 在指定子節(jié)點前面追加節(jié)點(不會覆蓋原有節(jié)點)
parentNode.insertBefore(child,指定子元素)

• 節(jié)點移除

parentNode.removeChild(child節(jié)點)     // 刪除父元素的某個子節(jié)點

• 節(jié)點復(fù)制

node.cloneNode()    // 拷貝node節(jié)點=>淺拷貝,只拷貝標(biāo)簽,不拷貝里面內(nèi)容
node.cloneNode(true)// 拷貝node節(jié)點=>深度拷貝,拷貝標(biāo)簽以及里面內(nèi)容

• 三種動態(tài)創(chuàng)建元素的區(qū)別

document.write('<div>123</div>')        // 注意:當(dāng)頁面文檔流加載完畢,會進行重繪
element.innerHTML = '<div>123</div>'    // 不要重復(fù)拼接字符串,內(nèi)存消耗過大
document.createElement()                

5.DOM事件

5.1 鼠標(biāo)事件

• mouseenter和mouseover區(qū)別

mouseover經(jīng)過自身會觸發(fā),經(jīng)過子級也會再次觸發(fā)(支持事件冒泡).mouseenter只有經(jīng)過自身盒子才觸發(fā)(不支持事件冒泡)

備注：mouseover搭配mouseout;mouseenter搭配mouseleave

5.2 鍵盤事件

<font color="red" face="宋體" size=5>三個事件的執(zhí)行順序: keydown > keypress > keyup</font>

鍵盤事件的示例：

5.3 注冊事件

注：注冊事件有兩種方式:傳統(tǒng)方式和監(jiān)聽方式

• 傳統(tǒng)方式: 使用on前綴 => 事件注冊<font color="#ca0c16">具有唯一性,后者會覆蓋前者</font>

<p onclick="alert(123)">
  點擊  
</p>

//最后只能彈出來"點擊段落"的彈框仰税，后者覆蓋了前者
const elem = document.querySelector('p')
elem.onclick = function() {
    alert('點擊段落');
}

// 解綁事件
elem.onclick = null

• 監(jiān)聽方式

// true:事件句柄在捕獲階段執(zhí)行 false(默認(rèn)):事件句柄在冒泡階段執(zhí)行
// 注意:解除綁定與綁定的事件內(nèi)存地址需要相同
let div = document.getElementById('div')
function listener(event) {
    
}
div.addEventListener('click',listener,true)
div.removeEventListener('click',listener,true)

// ie9以前使用attachEvent,處理兼容性再用吧
div.attachEvent('onclick',method) // 綁定
div.detachEvent('onclick',method) // 移除

監(jiān)聽方式處理兼容：

5.4 觸屏事件對象(touchEvent)

touchEvent是一類描述手指在觸摸平面(觸摸屏等)的狀態(tài)變化的事件對象,這類事件用于描述一個或多個觸點,使開發(fā)者可以檢測觸點的移動,觸點的增加和減少等

5.5 事件流

事件分為捕獲階段與冒泡階段.捕獲階段就是事件信息從頂層向下層傳遞的過程,冒泡時事件反應(yīng)處理從底層向上層反饋的過程构资。

事件流

js可以通過addEventListener來實現(xiàn)捕獲階段或者冒泡階段的事件響應(yīng)方法注冊

5.6 事件對象

• 什么是事件對象
  
  事件對象的解釋

<font size=3>事件對象鼠標(biāo)事件(MouseEvent),則記錄鼠標(biāo)相關(guān)信息,如坐標(biāo)等;鍵盤事件(KeyboardEvent),則記錄鍵盤相關(guān)信息,如點擊的哪個按鍵</font>

elem.onclick = function(event) { // 此處的event就是事件對象
    event.target                 // 返回觸發(fā)事件的元素,不同于this返回的是綁定事件的元素
    event.srcElement             // 同event.target,ie兼容處理使用(ie6,7,8),非標(biāo)準(zhǔn)
    event.relatedTarget          // 返回綁定事件的元素,類似于this
    event.type                   // 獲取事件觸發(fā)類型,如click、mouseover陨簇，不帶on
    event.pageX | event.pageY    // 獲取光標(biāo)相對于頁面的x坐標(biāo)和y坐標(biāo) ie9+
    event.clientX | event.clientY// 獲取光標(biāo)相對可視區(qū)域的x坐標(biāo)與y坐標(biāo)(不受滾動條影響)
    event.screenX | event.screenY// 獲取光標(biāo)相對電腦屏幕的x坐標(biāo)與y坐標(biāo)
    event.which                  // 代表獲取到的鼠標(biāo)或鍵盤的輸出的值,鼠標(biāo)分別為0,1,2
    event.key                    // 獲取按下的按鍵值
    event.keyCode                // 獲取按下按鍵的ascii碼值
}

5.7 默認(rèn)行為與冒泡阻止

• 常見html默認(rèn)行為

~ Submit按鈕: 在form表單中的,提交form表單中的數(shù)據(jù)到服務(wù)器
~ Button: 在手機瀏覽器中, 若是在form中,則是submit
~ a標(biāo)簽: 默認(rèn)將當(dāng)前頁面跳轉(zhuǎn)為a標(biāo)簽中href的地址

• 阻止事件默認(rèn)行為

<!-- 方式4 -->
<a onclick="javascript:;">點擊</a>
<script>
    const a = document.querySelector('a');
    a.onclick = function(event) {
        // 方式1
        event.preventDefault()
        // 方式2,低版本ie使用
        event.returnValue()
        // 方式3,addEventListener注冊方式無效
        return false 
    }
</script>

• 阻止冒泡

<div class="parent">
    <div class="child"></div>
</div>
<script>
    const pElem = document.querySelector('.parent')
    const cElem = document.querySelector('.child')
    cElem.onclick = function(event) {
        // 標(biāo)準(zhǔn): 阻止冒泡
        event.stopPropagation()
        // 非標(biāo)準(zhǔn): 阻止冒泡(ie678)
        event.cancalBabel = true
    }
</script>

兼容性寫法：

阻止冒泡的兼容寫法

5.8 事件委托

事件委托又叫事件代理,jquery里面稱為事件委派

• 原理: 不再每個子節(jié)點單獨設(shè)置事件監(jiān)聽器(提高了性能),而是將事件監(jiān)聽器設(shè)置再父級元素上,然后利用冒泡原理影響每個子節(jié)點

  
  
  事件委托原理

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    const ul = document.querySelector('ul');
    ul.addEventListener('click', event => {
        // 不用單獨每個li綁定事件
        //event.target可以得到我們點擊的對象
        console.log(event.target);
    });
</script>

二吐绵、BOM

<font size=3 color="#000">BOM沒有標(biāo)準(zhǔn)組織,ECMA有ECMA組織,DOM有W3C組織制定,而BOM還是在延用網(wǎng)景的標(biāo)準(zhǔn),兼容較差</font>

• 它是js訪問瀏覽器窗口的一個接口
• 它是一個全局對象,定義在全局作用域的變量,函數(shù)都會變成window對象的屬性和方法 => this指向問題產(chǎn)生

1. Window對象

1.1 屬性

window.innerWidth   // 獲取當(dāng)前屏幕寬度,tip 可用來做響應(yīng)式布局,還是推薦媒體查詢,flex做響應(yīng)式布局
window.innerHeight  // 獲取當(dāng)前屏幕高度

1.2 方法

window.scroll(x,y)  // 滾動窗口至文檔中的特定位置 => such: window.scroll(0,0) 滾動到頁面頂部

1.3 事件

• 窗口加載事件

window.onload = function() {}
// 或
window.addEventListener('load',function() {})

// window.onload是窗口加載事件,當(dāng)文檔內(nèi)容完全加載會觸發(fā)該事件(包括圖像,腳本文件,css文件等)
// window.onload傳統(tǒng)注冊事件只能寫一次,如果多次會以最后一個為準(zhǔn),addEventListener沒有此問題

window.addEventListener('DOMContentLoaded',function(){}) // 只要dom文檔加載完就會觸發(fā)監(jiān)聽事件

• 窗口大小調(diào)整事件

// 窗口大小發(fā)生變化,就會觸發(fā)
window.onresize = function() {}
window.addEventListener('resize',function() {})

2. location對象

2.1 屬性

2.2 方法

location.assign()       // 跟href相同,實現(xiàn)跳轉(zhuǎn)頁面
location.replace()      // 替換當(dāng)前頁面,因為不記錄歷史,所以不能后退頁面
location.reload()       // 重新加載頁面,參數(shù)為true會強制刷新

2.3 URL(同一資源定位符)

url的一般語法格式為:
protocol://host[:port]/path/[?jquery]#fragment
https://www.baidu.com/index.html?name=andy&age=18#link

URL

3. navigator對象

navigator對象包含了很多設(shè)備相關(guān)屬性例如操作系統(tǒng),版本號等信息

navigator對象信息

// case: 使用userAgent識別手機pc
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
    window.location.href = ''; //手機
} else {
    window.location.href = ''; //電腦
}

4. history對象

window對象為我們提供了一個history對象,與瀏覽器歷史記錄進行交互,該對象包含用戶(在瀏覽器窗口中)訪問過的URL

5. 定時器

• setInterval(重復(fù)執(zhí)行,每次調(diào)用有時間延遲)

let inervalId = setInterval(code, milliseconds);
let inervalId = setInterval(function, milliseconds, param1, param2, ...)

• setTimeOut(只執(zhí)行一次,延遲delay毫秒后執(zhí)行)

let interValId = setTimeOut(fn,delay)

• 清除延遲

clearInterVal(inervalId)     // 對應(yīng)setInterval
clearTimeOut(inervalId)      // 對應(yīng)setTimeOut

• 標(biāo)題跑馬燈效果實現(xiàn)

// 數(shù)組方式實現(xiàn)跑馬燈效果
setInterval(() => {
    let title = [...document.title];
    title.unshift(title.pop());
    document.title = title.join('');
}, 500);

// 字符串方式實現(xiàn)跑馬燈
setInterval(() => {
    let oldTitle = document.title;
    let newTitle = oldTitle.slice(-1).concat(oldTitle.slice(0, -1));
    document.title = newTitle;
}, 500);

6. JS執(zhí)行機制

6.1 JS是單線程

javascript就是為了處理頁面中用戶的交互以及操作DOM而產(chǎn)生,js是單線程 => 這就意味著所有任務(wù)都需要排隊,前一個任務(wù)執(zhí)行結(jié)束才能執(zhí)行下一個任務(wù)塞帐。導(dǎo)致某個js流程執(zhí)行時間過長,頁面渲染就不連貫,造成頁面阻塞

6.2 同步和異步

為了解決js的單線程阻塞問題,利用多核CPU的計算能力,HTML5提出Web Worker標(biāo)準(zhǔn),允許Javascript腳本創(chuàng)建多個線程拦赠。

• 同步: 前一個任務(wù)執(zhí)行完畢才進行下一任務(wù)

  注意: 同步任務(wù)都在主線程上執(zhí)行,形成一個執(zhí)行棧
  

• 異步: 前一任務(wù)執(zhí)行過程種,同時執(zhí)行另一任務(wù)

  JS的異步任務(wù)都是通過回調(diào)函數(shù)來處理,如監(jiān)聽事件,點擊事件等
  

6.3 執(zhí)行機制

• 先執(zhí)行執(zhí)行棧的同步任務(wù)
• 異步任務(wù)(回調(diào)函數(shù))放到任務(wù)隊列中

• 一旦執(zhí)行棧中的同步任務(wù)執(zhí)行完畢,系統(tǒng)就會依次執(zhí)行任務(wù)隊列中的異步任務(wù)

  
  
  執(zhí)行機制

三、網(wǎng)頁特效

1. 元素偏移量offset

使用offset相關(guān)屬性,可以動態(tài)獲取該元素的位置(偏移),大小等.

• 注意: 返回值是不帶單位的

• 獲得元素距離帶有定位父元素的位置
• 獲取元素自身大小(寬度和高度)

• offset與style區(qū)別(寬度)

2. 元素可視區(qū)client

通過client的相關(guān)屬性可以動態(tài)獲取該元素的邊框大小,元素大小等

• 注意: 返回值是不帶單位的

3. 元素滾動scroll

通過scroll可以動態(tài)獲取該元素的大小,滾動距離等

• 注意: 返回值是不帶單位的

<font color="red">注意: 頁面的滾動距離通過window.pageXOffset獲取</font>

四葵姥、動畫

1.封裝動畫函數(shù)

 (function () {
        function animate(obj, target, comeback) {
          //讓我們只有一個定時器執(zhí)行
          //先清除以前的定時器荷鼠，只保留當(dāng)前的一個定時器執(zhí)行
          clearInterval(obj.timer);
          obj.timer = setInterval(function () {
            //步長值寫到定時器里
            //var step=Math.ceil((target-obj.offsetLeft)/10);
            varstep = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
              //停止動畫本質(zhì)是停止定時器
              clearInterval(obj.timer);
              //回調(diào)函數(shù)寫到定時器結(jié)束里面
              //if(comeback){
              //comeback();
              //}
              comeback && comeback();
            }
            //這個步長值改為一個慢慢變小的值步長公式：（目標(biāo)值-現(xiàn)在的位置）/10
            obj.style.left = obj.offsetLeft + step + "px";
          }, 15);
        }
      });

2. 緩動動畫

緩動動畫原理

五、本地存儲

本地存儲特性:

• 數(shù)據(jù)存儲在用戶瀏覽器中
• 設(shè)置,讀取方便,甚至頁面刷新不丟失數(shù)據(jù)
• 容量較大,sessionStorage約5M,localStorage約20M
• 只能存儲字符串,對象轉(zhuǎn)json后再存儲

1. window.sessionStroage

• 生命周期為關(guān)閉瀏覽器窗口
• 在同一窗口(頁面)下數(shù)據(jù)可以共享
• 以鍵值對的形式存儲使用

const user = { name: '隔壁老高', age: 18 }

// sessionStorage
// 存儲數(shù)據(jù)
sessionStorage.setItem('user', JSON.stringify(user, null, 2))
// 修改數(shù)據(jù) => 重新存儲即可
// 讀取數(shù)據(jù)
sessionStorage.getItem('user')
// 刪除數(shù)據(jù)
sessionStorage.removeItem('user')
// 清空數(shù)據(jù)
sessionStorage.clear()

2. window.localStorage

• 生命周期永久生效,除非手動刪除否則關(guān)閉頁面也會存在
• 可以多窗口(頁面)共享(同一瀏覽器可以共享數(shù)據(jù))
• 以鍵值對的形式存儲使用

const user = { name: '隔壁老高', age: 18 }

// localStorage
// 存儲數(shù)據(jù)
localStorage.setItem('user', JSON.stringify(user, null, 2))
// 修改數(shù)據(jù) => 重新存儲即可
// 讀取數(shù)據(jù)
localStorage.getItem('user')
// 刪除數(shù)據(jù)
localStorage.removeItem('user')
// 清空數(shù)據(jù)
localStorage.clear()

~有問題可以評論區(qū)留言榔幸，喜歡的小伙伴可以點贊允乐、關(guān)注、收藏哦

<font size=4>相關(guān)推薦：wantLG的《普歌-碼上鴻鵠團隊復(fù)習(xí)總結(jié)：js 高級 ECMAScript 6（es6新特性）(上)》</font>

• 作者：wantLG
• 本文源自：wantLG的《普歌-碼上鴻鵠團隊復(fù)習(xí)總結(jié)：JavaScript進階重點（DOM削咆、BOM）》
• 本文版權(quán)歸作者和簡書共有牍疏，歡迎轉(zhuǎn)載，且在文章頁面明顯位置給出原文鏈接拨齐，未經(jīng)作者同意必須保留此段聲明鳞陨，否則保留追究法律責(zé)任的權(quán)利。