總結下面試題
BOM和DOM這個東西是很基礎的東西，Java Script的三個主要組成部分是：ECMAScript(核心)，DOM（文檔對象模型），BOM（瀏覽器對象模型）。所以這個也是我們必須掌握的一些東西。最近vue用多了，所以回顧下。
什麼是BOM
Browser Object Model 瀏覽器對象模型，js裏面，把我們的瀏覽器看成是一個對象，而這個對象 叫 window ；頂級對象。就是提供一些操作瀏覽器的一些方法和接口。可以彈出新的瀏覽器窗口，關閉瀏覽器窗口，調整窗口大小，頁面前進後退，彈出框這些。
window裏面包含的對象：
- document 文檔對象模型
- location 專門用來處理url相關的
- screen 專門用來處理屏幕相關
- history處理歷史記錄的
- navigator userAgent 判斷當前請求平臺是哪一個
window裏面也包含了一些方法，下面介紹下我們經常用到的一些方法。開發的時候多多少少肯定會用到的一些東西。
window 事件加載
window.onload= function(){} //當頁面加載完畢之後纔會去觸發
window.onsize = function(){} //當窗口改變大小的時候觸發
window 定時器
setInterval
無限循環，類似於鬧鐘
語法：
//返回值就是定時器的任務標示
var timeId = setInterval(function(){},延遲時間);
//關閉定時器
clearInterval(timeId);
只要到了時間，就會去執行function裏面的代碼，只要沒有關閉定時器，就會不停的去調用function裏面的一些操作。
setTimeout
執行一次，就是定時炸彈，炸了就沒了
//返回值就是定時器的任務標示
var timeId = setTImeout(function(){}, 延遲時間);
//關閉定時器
clearTimeout(timeId);
只要到了時間，就會去執行function裏面的操作，只執行一次。
window的offset、client和scroll
offset
offsetWidth | offsetHeight : 獲取的是盒子的真實 寬度|高度 包含的是內容 padding border
offsetTop|offsetLeft : 獲取的是偏移量， 參照的是 帶有定位的最近的父輩元素，如果父輩元素都沒有定位，參照的是body
offsetParent : 獲取的是帶有定位的父元素
client
clientWidth | clientHeight : 獲取的是盒子大小，包含 內容 + padding
clientTop | clientLeft : 獲取的是上|左 邊框的大小
scroll
這個屬性應該是我們會經常用到的，做返回頂部時。
scrollTop | scrollLeft : 獲取的是 滾動出去的內容的距離
scrollWidth | scrollHeight: 獲取內容真實的 寬高
//滾動到指定的位置
window.scroll(x,y)
//滾動的距離
window.scrollBy(x,y);
//滾動到指定的位置
window.scrollTo(x,y);
移動端
touch事件
touchstart 觸摸開始
touchmove 觸摸移動
touchend 觸摸結束
touchEvent事件對象
e.targetTouches
獲取的是該元素上所有的手指對象 ,集合
e.changeTouches 刪除線格式
獲取的是該元素上改變的手指對象，集合， 從無到有，從有到無
pageX|pageY
在頁面中的位置
clientX | clientY
在可視區域的位置
screenX | screenY
獲取屏幕中的位置
target
目標元素對象
什麼是DOM
Document Object model 文檔對象模型，用來獲取頁面元素對象，動態添加元素對象，刪除元素對象事件，如何操作元素屬性這些功能。對我們的HTML頁面進行一些操作。
獲取頁面元素對象
1.通過id來獲取
var el = document.getElementById('id名');
//參數放的是id名字，返回的對象是一個元素對象
2.通過標籤名獲取
var els = document.getElementsByTagName('標籤名');
//參數放的是標籤名，返回的是一個對象的集合
3.通過類名獲取
var els = document.getElementsByClassName('類名');
// 參數放的是類名，返回的是一個對象的集合
4.通過選擇器來獲取
var el = document.querySelector('選擇器');
//選擇器是需要帶符號 獲取的是一個對象
var els = document.querySelectorAll('選擇器');
// 這個方法返回的是一個集合
5.節點操作：獲取父子節點
var parentEle = element.parentNode;
//這個是獲取父節點
var children = parenEle.children;
//獲取的是子元素
var childNodes = parentEle.childNodes;
//獲取所有的子節點
var firstChild = parentEle.firstElementChild;
//獲取第一個子元素
var lastChild = parentEle.lastElementChild;
//獲取最後一個子元素
6.節點操作：兄弟元素的獲取
var nextSibling = element.nextElementSibling;
//獲取下一個兄弟元素
var preSibling = element.previousElementSibling;
//獲取上一個兄弟元素
動態添加元素
1.document.write();
特點：如果頁面已經加載完畢的話，再觸發這個方法，會覆蓋原來的頁面內容
2.element.innerHTML =
特點：元素的一個屬性，需要去拼接字符串，直接賦值，會覆蓋這個元素內部的內容，效率高，不方便註冊事件，也不方便去瀏覽結構
3.var child = document.createElement();
特點：參數直接寫你想創建的這個標籤。 此時這個標籤在內存中，還沒有掛載在dom數上，所以我們需要通過一些方法去進行添加
parent.appendChild(child);
//追加在最後一個子孩子的位置
parent.insertBefore(child, 參考的元素對象);
//parent.children[0];
刪除元素對象
parent.removeChild(child);
//只能父元素刪除子元素
操作元素屬性
element.innerHTML = '';
//設置內容
element.innerText = '';
//設置文本內容 不識別HTML標籤
element.src = '';
//設置圖片標籤的路徑
element.href = '';
//設置的是超鏈接的跳轉位置
element.title = '';
//設置鼠標停在元素身上的提示文本
element.alt = '';
//當圖片沒有正常加載的時候，顯示的替換文本
//表單元素
input.value = '';
//設置表單元素的值
input.type = '';
//設置表單的類型
input.checked = true|false;
//設置單選或者是複選框的選中狀態
input.disabled = true|false;
//設置輸入框的 是否禁用
// 修改元素樣式
element.style.XXX | element.style ='';
//設置元素的行內樣式 如果是少量屬性，或者屬性的值是一個變量的話
element.className = '';
//設置類名 匹配相應的類樣式，如果你沒有申明類樣式，是不會匹配相應的樣式
事件
事件的三要素
- 事件源： 要觸發事件的元素對象
- 事件類型： 觸發什麼事件
- 事件處理函數： 觸發了這個事件。你要幹嘛
事件類型
click 點擊事件
mouseover 鼠標移入事件
mouseout 鼠標移出事件
mousemove 鼠標移動的事件
mouseenter 鼠標移入事件，不會觸發事件冒泡
mouseleave 鼠標移出事件，不會觸發事件冒泡
mousedown 鼠標按下
mouseup 鼠標擡起
keydown 鍵盤按下
keyup 鍵盤擡起
keypress 鍵盤按下，功能鍵不識別，區分大小寫
focus 獲取焦點
blur 失去焦點
scroll 滾動事件
window.onload 當頁面所有內容都加載完畢的時候調用
DOM: DOMContentLoaded DOM樹 加載完畢的時候調用
resize 窗口改變大小的時候觸發
pageshow 頁面元素顯示的時候觸發
移動端事件：
touchstart 觸摸開始
touchmove 觸摸滑動
touchend 觸摸結束
contextmenu 上下文菜單事件
selectstart 文本被選中的時候觸發
事件流
一個事件觸發的過程。那麼有三個階段
- 捕獲階段 ： 從外到內，一層一層進行傳遞
- 目標階段： 目標元素，執行目標元素的事件
- 冒泡階段： 從內到外，一層一層往外傳遞
代碼綁定事件
element.onclick = function(){}
//獲取的是冒泡階段
element.addEventListener('click',function(){}，true|false);
//第三個參數可以省略，默認是false，代表是事件冒泡，如果是true，代表是事件的捕獲
代碼解綁事件
element.onclick = null;
element.removeEventListener('click',要移除的事件函數);
事件委託
核心原理用的是：事件冒泡，本來應該給子元素去設置的事件，我給父元素來設置，通過事件冒泡傳遞到父元素的事件，通過事件對象 .e.target 可以獲取到目標元素
事件對象
element.onclick = function(e){
//e 就是底層給我們傳遞過來的事件對象
e.target //目標元素
e.type //事件類型
e.pageX | pageY //獲取的是鼠標在頁面中的位置
e.clientX |clientY //獲取的是鼠標在可視區域的位置
e.screenX |screenY //獲取的是在屏幕中的位置
e.stopPropagation();//組織事件冒泡
e.preventDefault(); //阻止默認行爲 也可以用 return false； 只能在傳統事件註冊裏面用
}
總結
BOM對象主要是對瀏覽器相關屬性進行操作，在js中對應的頂級對象爲window。這個的話可能會因爲瀏覽器的不同，然後會有點差別，這點需要注意下。
DOM對象是一種接口，用來操作文檔的內容，在js中實現後對應的頂級對象document。它的話是W3C的標準，所有的瀏覽器都必須遵循的標準。也是我們前端最基礎的部分。
個人水平有限，肯定還有很多知識點沒有整理到的，有問題歡迎大家留言指導，僅供學習和參考。
學海無涯！努力二字，共勉！