javascript核心 DOM BOM 操作

1.web APIs 和 JS 基础关联性

1.2 JS基础阶段以及Web APIs阶段

JS基础阶段

我们学习的是ECMAScript 标准规定的基本语法，要求掌握JS 基础语法，而只学习了语法是做不了常用的网页交互效果的，学习标准的目的是为了 JS 后面的课程打基础、做铺垫。

Web APIs阶段

Web APIs 是W3C 组织的标准，我们主要学习 DOM 和BOM
Web APIs 是我们JS 所独有的部分，主要学习页面交互功能，需要使用JS基础的内容做基础

JS 基础学习 ECMAScript 基础语法为后面做铺垫，Web APIs 是JS 的应用，大量使用JS基础语法做交互效果

2.1 API

API （ Application Programming Interface ，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

比如： 手机充电接口

我们要实现充电这个功能：

• 我们不关心手机内部变压器
• 内部怎么存储电等等
• 不关心这个充电线怎么制作
• 我们只知道，拿着充电线插进充电接口就可以充电
• 这个充电接口就是一个API

2.2 Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（ BOM 和 DOM ）
主要针对浏览器做交互效果
比如 我们想要浏览器弹出一个警示框，直接用 alert('弹出')
MDN 详细API：https://developer.mozilla.org/zh-CN/docs/Web/API

通过 HTML5新增的方法获取元素

 document.getElementsByClassName('类名')              // 根据类名返回元素对象集合
 document.querySelector('选择器')                     // 根据指定选择器返回第一个元素对象
 document.querySelectorAll('选择器')                  // 根据指定选择器返回所有集合

获取body元素

document.body   // 返回body元素对象

获取HTML元素

document.documentElement

事件基础

事件概述

Javascript 使我们有能力创建动态页面，而事件是可以被 Javascript 侦测到的行为
简单理解： 触发——响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件由三部分组成 称为事件三要素

事件源 ——事件被触发的对象 谁 按钮
事件类型 —— 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下
事件处理程序 —— 通过一个函数赋值的方式 完成

var btn = document.getElementById('btn');
btn.onclick = function(){
   alert('事件被触发')
}

操作元素

Javascript 的DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM操作元素来改变元素里面的内容、属性等，

改变元素内容

element.innerText        // 从起始位置到终止位置的内容，它会去除html 标签，同时空格和换行也会去掉
element.innerHTML        // 起始位置到终止位置，不去除html标签和空格、换行

![注意](https://img-blog.csdnimg.cn/20200409230926819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjkzNTk2Ng==,size_16,color_FFFFFF,t_70