Web API(ES6新增JS语法、获取元素修改属性、监听事件）

内部Javascript：直接写在html文件离script标签写在</body>里面

外部JavaScript：代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。

内联式Javascript：代码写在标签内部

let 变量名（let不允许多次声明一个变量！！）

let和var的区别：

var声明：

可以先使用再声明（不合理）

var声明的变量可以重复声明（不合理）

变量提升、全局变量、没有块级作用域等

通过单引号（''）、双引号（""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号！！！

拼接字符串：（新）

使用``包含全部内容，用${}包住变量

例如：document.write(`大家好，我叫${name}，几年${age}岁`)

只声明变量不赋值的情况就是undefined！！！工作中常使用。

除了+以外的算术运算符比如-* / 等都会把数据转成数字类型！！！！

arr.splice (操作的下标 ,删除的个数)！！

为对象动态的新增属性和方法：

 

let .arr[{},{},{},{}]

document.write(` `)里面补全不了标签，可以先在script外面写好引入

${i}和${arr.[i]}

script可以放在盒子里面。数据放script标签里面。

DOM（文档对象模型）

获取dom元素、修改属性

web api基本认知：通过JS去操作html和浏览器。

DOM浏览器提供了一套专门用来操作网页内容的功能，实现用户交互。

作用：开发网页特效和实现交互。

DOM树：将HTML文档以树状结构直观的表现出来，我们成为文档树或者DOM树

作用：直观的看出标签和标签之间的关系。

DOM对象：

        let btn = document.querySelector('button')

        console.dir(btn)

这里拿到的btn就是DOM对象

document是html中最大的对象！！

获取DOM元素：

根据css选择器来获取（重点）：

语法：

document.querySelector(‘css选择器’)！！！

参数：包含一个或多个有效的css选择器字符串!

返回值：一个HTNLElement对象只能得到一个对象！（没有匹配到返回null）

参考文档:MDN

获取多个对象元素：

document.querySelectorAll(‘css选择器’)得到的是一个伪数组（没有pop（）push（）等方法）（NodeList）

其他元素获取方式：

getElementById()等

修改DOM元素内容：！！！！

document.write()只能追加到body里面

.innerText属性：不识别标签，可以修改属性内容

.innerHTML属性可以解析标签！！

修改标签的常用属性：src、title（标签的提示信息）等

修改元素的样式属性：

通过style控制样式属性：（语法：对象.style.样式属性=值；）注意：如果样式属性有-需要改成驼峰模式，重写的样式属性转成了行内属性！！不能写-

时刻注意使用$进行拼接的时候要写``符号

当属性值在script标签里面为路径时候不要书写多余的空格且需要拼接的时候要注意先写``符号！！！！

如果我们修改样式属性比较多的时候，可以写一个类的形式保存这些属性，获取标签之后使用className给这个标签添加类名也就相应的得到了这些属性样式。（calssName使用的是等号赋值，会把以前的类给覆盖了，所以使用的时候需考虑要不要将以前的类加上去）

为了解决className这一缺点，我们可以使用classList操作类来控制css

语法：元素.calssList.add(‘类名’)\ 元素.calssList.remove(‘类名’)\ 元素.calssList.toggle(‘类名’)其中toggle可以切换类（原来有这个类就移除，没有就添加！！）

修改表单元素属性：

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

disabled（可以设置两个值true和false）禁用按钮或者打开等。还有checked（单选框，用来判断style为checkbox的input），selected等

value可以获取表单当前的值，style可以设置表单输入框的显示样式（数字还是密码）

间歇函数：

开启定时器：setInterval（函数，间隔时间）作用：每隔一段时间调用这个函数，间隔时间单位是毫秒！函数名后面不需要加小括号！！！定时器返回的是自己的一个序号！

clear可以清除定时器。

数组对象的写法：arr[{},{},]

事件

事件时编程时系统内发生的动作或者发生的事情

语法：

元素.addEventListener(‘事件’，要执行的函数)（事件里面必须是字符串比如‘click‘）

事件监听的三要素：

事件源：哪个dom元素被事件出发了，要获取dom元素

事件：用什么方式触发，比如鼠标单击等等

事件调用的函数：要做什么事情

数组splice返回的是被删除之后的数组，它会影响原来那个数组，所以按实际情况看要不要将值返回！！！！这也是一个坑

使用遍历的方式删除一个数组的时候记得i--

arr[arr.length]