[TOC] # 題1、什么是 DOM？ 答： DOM （Document Object Model），文檔對象模型。一個網頁就是一個 DOM 樹，通過 JS 可以操作網頁中的元素。 # 題2、查找頁面中的元素有幾種方法？ 答： document.getElementById: 根據 ID 來查找某一個元素。 document.getElementsByClassName: 根據 class 查找多個元素。 document.getElementsByTagName:根據標簽名查找多個元素。 document.querySelector: 使用 CSS 的選擇器來查找某一個元素。 document.querySelectorAll：使用 CSS 的選擇器來查找所有滿足的元素。 # 題3、如何使用 JS 創建一個元素？ 答： 使用 document.createElement 。 ~~~ // 使用 JS 創建一個元素 ? // 創建標簽 let h1 = document.createElement('h1') // 設置標簽內容 h1.innerHTML = 'hello world!' // 放到頁面 document.body.appendChild(h1) ~~~ # 題4、如何向頁面中添加一個元素？ 答： appendChild: 在一個標簽里面追回元素。 insertBefore: 在一個標簽的前面添加元素。 insertAfter: 向一個標簽的后面添加元素。 ~~~ // insertBefore 的使用 // 創建標簽 var newElement = document.createElement('h2') // 設置標簽內容 newElement.innerText = 'abc' // 獲取父元素 var parentElement = document.getElementById('box') // 獲取需要插入這個元素的前面 var targetElement = document.getElementById('tp') // 想插入的新元素（newElement） // 想把這個新元素插入到哪個現有元素（targetElement）的前面 // 這兩個元素共同的父元素（parentElement） parentElement.insertBefore(newElement, targetElement) ~~~ insertAfter 的使用 ~~~ // insertAfter jQuery的方法 $(content).insertAfter(selector) // content 必需。規定要插入的內容（必須包含 HTML 標簽）。 // 注意：如果 content 是已存在的元素，它將從它的當前位置被移除，并被插入在被選元素之后。 ? // selector 必需。規定在何處插入內容。 ? $("button").click(function(){ ? ?$("<span>Hello world!</span>").insertAfter("p"); }); ~~~ # 題5、Dom 中如何使用 JS 從頁面中刪除一個元素？ 答： 使用 removeChild 。 使用： 1. 先找這個元素的父元素 2. 然后調用父元素的 removeChild() 方法 比如：從頁面中刪除 id="abc" 的元素 ~~~ // 先獲取這個元素 let e = document.getElementById('abc') // 再找到它的父元素 let parent = e.parentNode // 調用父元素刪除這個元素 parent.removeChild(e) ~~~ # 題6、如何通過 JS 修改一個元素的樣式？ 答：通過 style 屬性。 注意：因為 JS 中不支持 - 作為名稱，所以必須把 CSS 中帶 - 的屬性名稱改成小駝峰的寫法： background-color(css) --> backgroundColor(js) 比如：點擊時讓元素放大 10px ~~~ // 通過 JS 修改一個元素的樣式 var div = document.getElementById('div'); // addEventListener 為一個元素添加點擊事件 div.addEventListener('click', function (e) { ? ?// 隨機生成一個六位數 ? ?var Num = "" ? ?for (var i = 0; i < 6; i++) { ? ? ? ?Num += Math.floor(Math.random() * 10) ? } ? ?div.style.backgroundColor = '#' + Num ? ? ? ?// 獲取原來元素的大小 ? ?let sizeW = parseInt(div.offsetWidth) ? ?let sizeH = parseInt(div.offsetHeight) ? ?// 每次點擊+10 ? ?sizeW += 10 ? ?sizeH += 10 ? ?// 設置元素寬高 ? ?div.style.width = sizeW + 'px' ? ?div.style.height = sizeH + 'px' }) ~~~ # 題7、如何通過 JS 修改一個元素中的內容？ 答： 使用 innerHTML 或 innerText 修改標簽的內容 比如：點擊時讓內容 +1  # 題8、 JS 如何實現頁面跳轉？ 答： ~~~ location.href = '跳轉地址' ? history.back() // 返回上一個頁面 history.go(-1) // 返回上一個頁面 history.go(1) // 前進一個頁面 ? // 擴展 location.reload() // 刷新頁面 ~~~ # 題9、Cookie、Session、localStorage、sessionStorage 的區別？ 答： 保存在服務器端： Session 保存在客戶端（瀏覽器）： 傳統技術： Cookie： 存儲的數量一般不能超過 4K，要設置過期時間，只能以字符串的方式操作。 h5 新技術： localStorage: 存儲很大的數據量，以鍵值對的方式操作，數據永久存在 sessionStorage: 存儲很大的數據量，以鍵值對的方式操作，關閉瀏覽器就沒了 # 題10、DOM0級事件 和 DOM2 級事件的區別？ 答：兩種綁定事件的方法。 區別一：綁定事件的語法不同 DOM0： ~~~ // 只有冒泡階段觸發 元素.onclick = function() { } // 后面的事件會覆蓋前面的 元素.onclick = function() { } ~~~ DOM2： ~~~ 元素.addEventListener('click', function(){}, true) ? ?// 在捕獲階段觸發 元素.addEventListener('click', function(){}, false) ? // 在冒泡階段觸發 ~~~ 區別二、DOM0級同一個事件只能綁定一次，DOM2級同一個事件可以綁定多次 區別三、DOM0級事件只有一個冒泡階段，DOM2級事件可以發生在 `冒泡` 和 `捕獲` 兩個階段 # 題11、DOM2級事件中有冒泡和捕獲兩個階段，什么是冒泡階段和捕獲階段？ 答：事件要從外向里，再從里向外兩次。 捕獲階段： 事件由父元素向子元素傳遞時。父元素 --> 子元素 冒泡階段： 事件由子元素向父元素傳遞時。子元素 --> 父元素 DOM0 級事件只能再冒泡階段觸發。 DOM2 級事件可以設置再捕獲或者再冒泡階段觸發，（通過 addEventListener 方法的第三個參數設置在哪個階段觸發事件） 事件在兩個階段的傳遞過程：  # 題12、什么是事件對象？干什么用的？ 答：在綁定事件的回調函數上可以有一個參數，這個參數是對象類型的數據，它就是事件對象。 當世界觸發時，這個參數中會包含觸發這個事件時相關的一些信息（比如：觸發事件時，鼠標的位置、事件源等）和一些操作（阻止默認行為、阻止事件冒泡等） 事件對象的用途： 1. 獲取事件的相關信息（鼠標位置等） 2. 執行一些操作（阻止默認行為、阻止事件冒泡） 比如： ~~~ // 參數e：事件對象 元素.onclick = function( e ) { ? } ? ~~~ # 題13、如何阻止默認行為？如何阻止事件冒泡？ 答： 事件對象上有兩個方法： `preventDefault`（阻止默認行為）、`stopPropagetion`（阻止冒泡） 代碼演示：阻止事件冒泡 ~~~ button.onclick = function(e) { ? ?// 阻止事件繼承向上冒泡 ? ?e.stopPropagation() } ? ~~~ 代碼演示：阻止默認行為 ~~~ // 為 a 標簽添加點擊事件 a.onclick = function(e) { ? ?// 阻止 a 標簽的默認行為（跳轉頁面） ? ?e.preventDefault() } ? ~~~ # 題14、history.pushState 和 history.replaceState 的用途？ 答： history.pushState: 將跳轉地址添加到歷史記錄中 history.replaceState: 替換當前頁面的地址 vue-router 這個路由框架就是使用了這兩個方法實現路由跳轉的。 # 題15、JS 如何獲取 URL 上？后面的參數？ 答： 使用 location.search 屬性獲取 ？ 后面的字符，然后再從字符串中解析出參數。