一文带你看懂简单的Js-Web-Api编程
前言
即使是这个时代，你不了解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的，最让我困惑的还是事件。
简单说一下事件冒泡：
<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>Documenttitle>
head>
<body>
<div>
<button id="btn1">1button>
<button class="btn2">2button>
<button>3button>
<button>4button>
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之类的当然也是这篇文章的一个部分，在这里就不详述了，关于手写的部分以后会出文章专门总结。