前言
即使是這個時代，你不瞭解BOM，DOM和事件監聽仍然是不行的。
BOM
瀏覽器對象模型，現在需要我們直接操作BOM的機會並不是很多了，除了可以判斷客戶端類型，路由跳轉之外我沒有在實際的開發中用過太多的BOM API，當然也不能這麼說，要說直接操作的話，DOM我更是沒怎麼用過。
如Chrome中調用navigator
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
如screen
screen.height
1043
如location
location.href
"https://editor.csdn.net/md?articleId=10412232880"
最後如history:
history.back()
history.forward()
DOM
關於DOM API這裏就不多講了，主要就是一些獲取節點的API，但是關於DOM的property和attribute的區別這裏還是要區分一下。
首先DOM節點是一個JS對象，它符合之前講述的對象的特徵 —— 可擴展屬性，因爲DOM節點本質上也是一個JS對象。因此，p可以有style屬性，有className等。注意，這些都是JS範疇的屬性，符合JS語法標準的。
這裏引用掘金小冊的代碼
var pList = document.querySelectorAll('p')
var p = pList[0]
console.log(p.style.width) // 獲取樣式
p.style.width = '100px' // 修改樣式
console.log(p.className) // 獲取 class
p.className = 'p1' // 修改 class
// 獲取 nodeName 和 nodeType
console.log(p.nodeName)
console.log(p.nodeType)
attribute
因此我們知道了，property 的獲取和修改，是直接改變 JS 對象，而 attribute 是直接改變 HTML 的屬性。attribute 就是對 HTML 屬性的 get 和 set，和 DOM 節點的 JS 範疇的 property 沒有關係。
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'juejin')
p.getAttribute('style')
p.setAttribute('style', 'font-size:30px;')
而且，get 和 set attribute 時，還會觸發 DOM 的查詢或者重繪、重排，頻繁操作會影響頁面性能。
事件
拿到紅寶書第一件事就是看事件，然而讀到這時候，我覺得這麼多章，除了涉及XML的，最讓我困惑的還是事件。
簡單說一下事件冒泡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>
<button id="btn1">1</button>
<button class="btn2">2</button>
<button>3</button>
<button>4</button>
</div>
<script>
var btn = document.getElementById("btn1");
btn.addEventListener("click", e => {
alert("a");
});
var body = document.body;
body.addEventListener("click", e => {
alert("c");
});
</script>
</body>
</html>
由於我們在body上添加了點擊事件，然後在其中一個按鈕上也添加了點擊事件，那麼當我們摁button1時，並不會只alert(‘a’)即結束，事件還會向上冒泡，然後再次發生alert(‘c’)的事件，這顯然不是我們希望的，因此我們需要加上：
...
btn.addEventListener("click", e => {
e.stopPropagation(); //new
alert("a");
});
...
關於事件還很多，這只是最常使用的一種。
其他
關於手寫XHR，JSONP之類的當然也是這篇文章的一個部分，在這裏就不詳述了，關於手寫的部分以後會出文章專門總結。
