JS基础、API和Web APIs。

1 JS的组成

JS由三部分组成：
- ECMAScript：Javascript语法 js基础
- DOM：页面文档对象模型 Web APIs
- BOM：浏览器对象模型 Web APIs JS基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果。

2 API 和 Web API

API是为程序员提供的一个接口，帮助我们实现某种功能。

Web API主要是针对于浏览器提供的接口，主要针对浏览器做交互效果。一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数）。学习WebAPI可以结合学习内置对象方法的思路。

DOM

1 什么是DOM

DOM定义

文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML|XML）的标准编程接口。W3C已经定义了一系列接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中所有标签都是元素，DOM中使用element表示。
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。
DOM把以上内容都看做对象

2 获取元素

2.1 根据ID获取 - getElementById

var element = document.getElementById(id);

element是一个 Element对象。如果当前文档中拥有特定ID的元素不存在则返回null。
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID。
返回一个匹配到 ID 的 DOM Element对象。若在当前Document 下没有找到，则返回 null。

<body>
    <div id="time">2020</div>
    <script>
        var timer=document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);
    </script>
</body>

文档页面从上往下加载，所以先得有标签，后面写script。
console.dir打印返回的元素对象，更好地查看里面的属性和方法。

2.2 根据标签名获取 - getElementsByTagName()

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

var element = document.getElementById(id);

注：
- 得到的是一个对象的集合，要想操作里面的元素就需要遍历。
- 得到元素对象是动态的。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var lis=document.getElementsByTagName();
    console.log(lis);/以伪数组的形式存储
    console.log(lis[0]);
    for(var i = 0; i<lis.length; i++){
        console.log(lis[i]);
    }
    //如果页面只有一个li，返回的还是伪数组的形式，如果没有这个元素，返回的是空的伪数组
</script>

还可以获取某个元素（父元素）内部所有指定标签的子元素。

element.getElementsByTagName(name);

注：父元素必须是单个对象，必须指明是哪个元素对象，获取的时候，不包括父元素自身。

<ul>
    <li>1</li>
</ul>
<ol id="ol">
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
<script>
    //伪数组下标指明具体哪个元素
    var ol=document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li');
    //给ol一个ID
    var ol=document.getElementsById('ol');
    console.log(ol.getElementsByTagName('li');
</script>

2.3 根据HTML5新增的方法获取

//根据类名获取某些元素的集合
var elements = document.getElementsByClassName(names); 
//返回指定选择器（ID 类名 标签）的第一个元素对象
var firstBox = document.querySelector('选择器');
//返回指定选择器（ID 类名 标签）的所有元素对象
var allBox = document.querySelectorAll('选择器');

2.4 特殊元素获取

获取body元素

doucment.body

获取html元素

document.documentElement

3 事件基础

3.1 事件概述

JS使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。（触发——响应机制）网页中的每个元素都可以产生某些可以触发JS的事件。

3.2 事件三要素

事件三要素：

事件源：事件被触发的对象（按钮......）
事件类型：如何触发什么事件（鼠标点击，鼠标经过，按键......）
事件处理程序：通过一个函数赋值的方式完成。

执行事件的三个步骤：

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

3.3 常见的鼠标事件

鼠标事件	触发条件
onclick	点击左键触发
onmouseover	经过触发
onmouseout	离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按触发

4 操作元素

JavaScript的DOM操作可以改变网页内容、结构、样式，可以利用DOM操作改变元素里的内容、属性。注意以下都是属性：

4.1 改变元素内容

element.innerText

element.innerHTML

注意：innerText & innerHTML
- 这两个属性都是可以 读 写 的
- innerText不识别HTML标签，去除空格和换行。
- innerHtml识别HTML标签，保留空格和换行，W3C标准。

<div></div>
<p>
    <span>123</span>
</p>

var div=document.querySelector('div');
div.innerText='<strong>nihao</strong>';
div.innerHTML='<strong>nihao</strong>';
console.log(document.querySelector('p').innerHTML);

4.2 常用元素的属性操作

innerText & innerHTML改变元素内容
src、href
id、alt、title

4.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性： type、value、checked、selected、disabled

<button>按钮</button>
<input type="text" value="输入内容">

var btn=document.querySelector('button');
var input=document.querySelector('input');
btn.onclick=function(){
    input.value='被点击了';
    this.disabled=true;
    //this指向时间函数的调用者btn
}

DOM——获取元素、操作元素、事件机制

JS基础、API和Web APIs。

1 JS的组成

2 API 和 Web API

DOM

1 什么是DOM

DOM定义

DOM树

2 获取元素

2.1 根据ID获取 - getElementById

2.2 根据标签名获取 - getElementsByTagName()

2.3 根据HTML5新增的方法获取

2.4 特殊元素获取

获取body元素

获取html元素

3 事件基础

3.1 事件概述

3.2 事件三要素

3.3 常见的鼠标事件

4 操作元素

4.1 改变元素内容

4.2 常用元素的属性操作

4.3 表单元素的属性操作

节点操作