1. Web APIs 和 JS基础的关联性
1.1 JS 组成
- ECMAScript：JavaScript语法
- DOM：文档对象模型
- BOM：浏览器对象模型
1.2 JS 基础阶段以及Web APIs阶段
JS基础阶段
- 学习ECMAScript标准规定的基本语法
- 只学习语法做不了常用的网页交互效果
- JS基础是铺垫
Web APIs阶段
- Web APIs 是W3C组织的标准
- 主要学习DOM 和 BOM
- Web APIs是JS所独有的部分
- 主要学习页面交互功能
- 需要JS基础做铺垫
API 和 Web API
- API（Application Programming interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无法访问源码，或理解内部工作机制的细节
- Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM),主要针对浏览器做交互效果。Web API很多都是方法（函数）
2. DOM简介
2.1 什么是DOM
文档对象模型（Document Object Model, 简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容、结构和样式。
2.2 DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中所有的标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
3.获取元素
3.1如何获取页面元素
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
3.2 根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
document.getElementById('ID名');
3.3 根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementByTagName('标签名')
还可以获取某个元素（父元素）内部所有指定标签的子元素
element.getElementsByTagName('标签名')
注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
3.4 通过HTML5新增方法获取
1.document.getElementByClassName('类名');//根据类名返回元素对象集合
2.document.querySelector('选择器');//根据指定选择器返回第一个元素对象，选择器必须加符号
3.document.querySelectorAll('选择器')
3.5 获取特殊元素（body, html）
1.document.body//返回body元素对象
2.document.documentElement//返回html元素对象
4.事件基础
4.1 事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
4.2事件组成
事件由三部分组成（事件三要素）：
扫描二维码关注公众号，回复：
12163418 查看本文章
- 事件源：事件被触发的对象，谁，比如按钮
- 事件类型：如何触发，什么事件，比如鼠标点击（onclick） 鼠标经过 键盘按下
- 事件处理程序：通过一个函数赋值的方式完成
<body>
<button id="btn">唐伯虎</button>
<script>
//(1) 事件源：事件被触发的对象，谁，比如按钮
vsr btn = document.getElementById('btn');
//(2) 事件类型:如何触发，什么事件，比如鼠标点击（onclick） 鼠标经过 键盘按下
//(3)事件处理程序：通过一个函数赋值的方式完成
btn.onclick = function() {
alert("点秋香");
}
</script>
</body>
4.3 执行事件的步骤
-
获取事件源
-
注册事件（绑定事件）
-
添加事件处理程序（采取函数赋值形式）
<body>
<div>123</div>
<script>
// 1. 获取事件源
var div = document.querySelector('div');
// 2. 绑定事件
//div.onclick
// 3. 添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
5.操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容属性等
5.1 改变元素内容
element.innerText//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会换掉
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1234</p>
<script>
// 点击按钮，div里面的文字发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
btn.onclick= function() {
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date. getDay();
return year + '年' + month + '月' + dates + '日' + arr[day];
}
// 元素不添加事件 页面刷新时直接显示
var p = document.querySelector('p');
p.innerText = getDate();
</script>
</body>
element.innerHTML//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
<body>
<div></div>
<script>
// innerText和 innerHTML的区别
// 1. innerText
var div = document.querySelector('div');
div.innerText= '<strong>今天是：2020</strong>';//不会加粗 显示标签
// 2. innerHTML
div.innerHTML= '<strong>今天是：2020</strong>';//会加粗
//两个标签都是可读写的
</script>
</body>
5.2 常用元素的属性操作
-
innerText、innerHTML 改变元素内容
-
src、 href
-
id、alt、title
例： img.src='...';
5.3 表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled
//1. 用input.innnerHTML不能改变表单里面的值
input.value= ''; // 文字内容通过value修改
//2. 禁用按钮
btn.disabled = true;
5.4 样式属性操作
可以通过JS修改元素的大小，颜色，位置等样式
- element.style 行内样式操作
- element.className 类名样式操作
// 1.element.style 行内样式操作 修改div样式里的属性 属性采取驼峰命名法
div.style.backgroundColor = 'purple';
// 2. element.className 类名样式操作
// 先在CSS里声明好一个类 写入理想的样式
// 通过添加类名，改变样式
div.className = '添加的类名' //不加点
// 因为是赋值操作， 恢复覆盖掉原来的类名
//3. 如果想保留原来的类名，则
div.className = '类名1 类名2';
操作元素总结：
