1.webApi

1.api

应用程序编程接口

编程语言预先给我们提供好的一系列的方法

2.web api

(浏览器提供的一系列用于操作浏览器和网页元素的方法)

bom

dom

3.DOM

(文档对象模型)

DOM会把页面中所有的内容都在内存中对应的成一个一个的对象

文档 document 整个网页

节点 node 页面中所有的内容

element: 标签节点

2.获取DOM元素

1.通过选择器获取一个元素（querySelector）

         document.querySelector('.animated')

上下文可以是document，也可以是一个元素参数是选择器，如：”div .className” 返回值只获取到第一个元素

2.通过选择器获取一组元素（querySelectorAll）

document.querySelector('.animated')

参数是选择器，如：”div .className” 返回值是一个类数组

3.通过ID获取（getElementById）

document.getElementById('id')

参数是string类型，是获取元素的id 返回值只获取到一个元素，没有找到返回null

4.通过标签名（getElementsByTagName）

let obj = document.getElementsByTagName('div');
for(let i = 0; i<obj.length; i++){
        obj[i].onclick = function(e){
            console.log(i)
        }
    }

上下文可以是document，也可以是一个元素，注意这个元素一定要存在参数是是获取元素的标签名属性，不区分大小写返回值是一个类数组，没有找到返回空数组

5.通过类名（getElementsByClassName）

var obj1 = document.getElementsByClassName('animated')

参数是元素的类名返回值是一个类数组，没有找到返回空数组

3.设置文本内容

1.document.wirte

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open

每次写完关闭之后重新调用该函数，会导致页面被重写

2.dom.innerHTML

innerHTML则是DOM页面元素的一个属性，可以用来读、写给定元素里的HTML内容

你可以精确到某一个具体的元素来进行更改

如果想修改document的内容，则需要修改document.documentElement.innerElement

3.dom.innerText

获取从起始位置到终止位置的内容,但它去除Html标签

火狐浏览器不支持该标签，但所有浏览器都支持 innerHTML标签

4.总结：

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器）

因此，尽可能地去使用 innerHTML，而少用innerText

如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后

再用正则表达式去除HTML标签

write会导致页面重新绘制，而且性能略低于innerHTML,所有推荐使用innerHTML.

element.innerText和element.innerHTML区别示例：

<div>我叫小王</div>
<button>改名</button>
<script>
    let nav = document.querySelector("div");
	let btn = document.querySelector("button");
	btn.onclick = function(){
		nav.innerHTML = "我叫<strong>陈实</strong>";
        // 包括html标签，因此陈实会加粗显示
        
		nav.innerText = "我叫<strong>陈实</strong>";
        // 不会加粗显示，会去除html标签，输出：我叫<strong>陈实</strong>
	}
</script>

4.设置元素的样式

1.dom.style

用于设置或获取DOM对象的style样式

        <script>
		    let obj = document.getElementById('one'); // 通过id获取div
		    obj.style.width = '500px';                // 通过style修改各种属性
		    obj.style.height = '300px';
		    obj.style.backgroundColor = 'gray';
		    obj.style.fontSize = '20px';
		    obj.style.color = '#fff';
		    obj.style.border = 'solid 5px red';
		    obj.style.display = 'block';          //设置DOM对象的显示和隐藏
		</script>

2.dom.className

用于设置或获取DOM对象的类样式

	<script>
	    let obj = document.getElementById('one');
	    console.log(obj.className);                // 修改前 first
	    obj.className = 'two';
		console.log(obj.className);                // 修改后 two
	</script>

3.dom.classlist

Element.classList 是一个只读属性，返回一个元素的类属性的实时DOMTokenList 集合

使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法

1、添加 add( String [, String] )

  添加指定的类值

  - 添加一个类：Element.classList.add("className1");

  - 添加多个类：Element.classList.add("className1","className2");

2、删除 remove( String [,String] )

  删除指定的类值，如果指定的类不存在，则不执行任何操作

  - 删除一个类：Element.classList.remove("className1");

  - 删除多个类：Element.classList.remove("className1","className2");

3、切换toggle(String[,force])

- 当只有一个参数的时，切换class value ，即如果类存在，删除它，并返回false
如果类不存在，则添加它并返回true

- 当存在第二个参数时，如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

4、查询 contains( String )

  检查元素的类属性中是否存在指定的类，其返回值为true或者false

  - 查询指定的类：Element.classList.contains("className1");

5、替换 replace( oldClass, newClass )

    用一个新类替换已有类，如果指定的类不存在，则不执行任何操作

  - 替换成指定类：Element.classList.replace("oldClass","newClass");

6、索引查询 item ( Number )

  按集合中的索引返回类值

5.定时器

1.setInterval() 的使用

setInterval()：循环调用

将一段代码，每隔一段时间执行一次（循环执行）

参数：

参数1：回调函数，该函数会每隔一段时间被调用一次

参数2：每次调用的间隔时间，单位是毫秒

返回值：返回一个Number类型的数据。这个数字用来作为定时器的唯一标识，方便用来清除定时器

2.定义定时器

**方式一：**匿名函数

每间隔一秒，将数字加1：

    let num = 1;
   setInterval(function () {
       num ++;
       console.log(num);
   }, 1000);

方式二：