文章目录
WebAPI简介DomDom树获取Dom元素事件事件三要素 操作dom元素innerHTMLinnerText 实战案例：实现网页计数器WebAPI简介
什么是API
应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易的创建复杂的功能。API中提供了很多的网络接口供开发者使用。
JS基本上可以分为三大类：
ECAMScript:基础的JS语法DOM API:操作网络页面结构BOM API：操作浏览器
本文介绍的webAPI主要包含了DOM 和BOM部分，基础的JS语法在前几篇文章中已经基本介绍了一些，这里就不在介绍。
下面附上API官方参考文档。
/zh-CN/docs/Web/API
Dom
什么是Dom
文档对象模型(DOM,全称Document Object Model.)是HTML和XML文档的编程接口。它提供了对文档的结构化表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的接口，样式和内容。DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的集合。
上面是比较复杂 的官方定义，其实就是W3C标准给我们提供了一些已经写好的函数，我们可以直接使用，可以用这些函数来操作网页内容、网页结构、网页样式。
Dom树
当一个新的网页被加载时，浏览器就会创建该页面的文档对象模型（Dom）.这个Dom模型会被结构化为一个 存放对象的树结构。这个树结构就是 Dom树。
结构如下：
Dom树中的一些概念：
文档：一个网络页面就是一个文档，即document表示
元素：页面中的所有标签（tag）都称为元素，即element。
节点：网页中的所有内容都可以称为节点（像标签节点，文本节点，属性节点，注释节点等），即node.
这些文档在JS源码中就对应了一个个的对象。所以才会称为“文档对象模型”。
获取Dom元素
一个Dom树上面有很多很多的对象，再进行操作之前必须先选中对象。Dom API 中提供了很多能够用来选中对象/元素的函数 在本文中我们只介绍最常用功能最强大的两个。
分别是querySelector和querySelectAll
只有新版本的浏览器才支持（比如IE9之前并不支持）像主流的 浏览器chrome,firefox,edge都是支持的，没有任何问题。
querySelector
querySelector函数的参数是一个“字符串”，而且这个字符串必须是CSS选择器。
当代码中存在多个相同名称的标签时，选择器在进行选择时，会返回被选中元素的第一个（即第一个出现的元素）。
如果想要全部返回，可以使用querySelectAll，会将所有相同名称的标签元素以NodeList（伪数组）的形式，全部返回。
当我们在document上调用这两个方法的时候，相当于从页面对 全局来查找复合要求的元素。
如果是在某个具体的dom对象上调用这两个方法，相当于从这个元素里面来查找复合要求的元素
代码演示:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--创建父元素 parent,及三个子元素child1,2,3--><div class="parent"><div class="child-1">1</div><div class="child-2">2</div><div class="child-3">3</div></div><script>//选中的结果是一个“元素”，即elemlet elem=document.querySelector('div');console.log(elem);</script></body></html>
输出结果：
querySelectAll
和querySelector使用方法类似。
代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--创建父元素 parent,及三个子元素child1,2,3--><div class="parent"><div class="child-1">1</div><div class="child-2">2</div><div class="child-3">3</div></div><script>//选中的结果是一个“元素”，即elemlet elem=document.querySelectorAll('div');console.log(elem);</script></body></html>
输出：
<div class="box">abc</div><div id="id">def</div><script>var elems = document.querySelectorAll('div');console.log(elems);</script>
事件
一些复杂的程序，往往涉及到组件之间相互通信。
事件机制（event）就是非常典型的组件通信机制。
事件是用户和程序之间的桥梁。
JS要构建动态页面，就需要感知到用户的行为，当用户对页面进行的一些操作（点击，修改，选择额，浏览）等都会在浏览器中产生一个个的事件，当JS捕获到这些事件，就会运行该事件对应的程序，从而实现复杂的交互操作。
事件三要素
1.事件源：被触发的对象
2.事件类型：事件触发的方式
3.事件处理程序：事件触发后，执行的程序。
代码举例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="button" value="我是一个按钮"><script>let button=document.querySelector('input');button.onclick=function(){alert("hello");}</script></body></html>
上面的代码中，button是事件源（用户能操作的元素），click就是事件类型（点击事件),通过onlick属性 就能关联到一个具体的事件处理函数。当button触发了click事件(当用户点击了这个按钮后)，就会自动调用onclick对应的函数。
操作dom元素
获取/修改元素内容
在CSS的盒模型中，我们已经知道了一个盒子的组成：外边距、边框、内边距、内容。我们要获取和修改的 就是最后的内容。这个内容可能是一个文本，也可能是一个图片，也可能是个链接等，本质上都是一段html代码片段，我们要获取/修改的内容就是这段html片段。
innerHTML
通过element.innerHTML属性就可以设置和获取该元素的内容。
代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div class="parent">hello</div><button>点击按钮，改变文本</button><script>//选中button按钮let button =document.querySelector('button');button.onclick=function () {//选中parent元素let parent=document.querySelector('.parent');//修改parent的内容parent.innerHTML='word';}</script></body></html>
运行：
该属性不仅可以赋值文本，还可以赋值一个html片段。
innerText
通过element.innerText属性可以设置和修改一个元素及其子元素的文本内容。
// 读操作var renderedText = HTMLElement.innerText;// 写操作HTMLElement.innerText = string;
<div><span>hello world</span><span>hello world</span></div><script>var div = document.querySelector('div');// 读取 div 内部内容console.log(div.innerText);// 修改 div 内部内容, 界面上就会同步修改div.innerText = 'hello js <span>hello js</span>';</script>
通过上面的代码可知，innerText属性无法获取到div内部 html代码片段，只能得到文本内容。
实战案例：实现网页计数器
通过html,css，js目前掌握的知识，我们可以做一个小练习，实现一个简单的计数器，类似的按键功能可以重复添加，所以这里尽量简化，以加减举个例子。
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style><!-- 先清除浏览器默认样式 -->*{margin: 0;padding: 0;box-sizing: border-box;}/*设置父元素的样式：长度，宽度，背景色*/.parent {width: 500px;height: 300px;background-color: gray;/*水平位置居中*/margin: 0 auto;}/*子元素screen的样式*/.parent .screen{width: 200px;height: 150px;font-size: 30px;line-height: 150px;color:white;margin: 0 auto;/*位置居中*/text-align: center;}.parent .ctrl{width:360px;height:150px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}/*按钮样式*/.parent .ctrl button{width: 100px;height: 50px;font-size: 20px;line-height: 20px;text-align: center;border-radius: 10px;/*去掉自带的黑色边框*/border:none;}.parent .ctrl button:active{color:white;background-color: blue;}</style><body><div class="parent"><!--通过screen来显示数字--><div class="screen">0</div><div class="ctrl"><!-- 子元素按钮--><button id="plusButton">+</button><button id="zeroButton">清零</button><button id="minusButton">-</button></div></div><script>// 按钮监听事件 let plusButton=document.querySelector('#plusButton');plusButton.onclick=function(){//1.选中screen 元素let screen=document.querySelector('.screen');//2. 取出其中的元素let content=screen.innerHTML;//3.将内容+1let result=parseInt(content)+1;//4.重新写入内容screen.innerHTML=result;}let minusButton=document.querySelector('#minusButton');minusButton.onclick=function() {//1.选中screen 元素let screen = document.querySelector('.screen');//2. 取出其中的元素let content = screen.innerHTML;//3.将内容-1let result = parseInt(content) - 1;//4.重新写入内容screen.innerHTML = result;}let zeroButton=document.querySelector('#zeroButton');zeroButton.onclick=function() {//1.选中screen 元素let screen = document.querySelector('.screen');//2. 取出其中的元素let content = screen.innerHTML;//3.将内容-1let result = parseInt(content) *0;//4.重新写入内容screen.innerHTML = result;}</script></body></html>
效果如下：
