JS复习-WebApi（1）

思维导图在第一章，有需要的小伙伴可以去看下。有任何疑问也可以随时练习我。

WebAPI概念介绍

• 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

JavaScript组成三个部分

1. ECMAScript - JavaScript的语法核心
2. DOM - 文档对象模型（一套操作页面元素的API）
3. BOM - 浏览器对象模型（通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等）

DOM

查

查询元素

• 获取单个元素 document.querySelector('选择器')

  1. 如果选择器存在，则获取DOM对象
  2. 如果选择器不存在，则获取null

• 获取多个元素 document.querySelectorAll('选择器')

  1. 如果选择器存在，则获取 伪数组
  2. 如果选择器不存在，则获取 空数组

• 区别

  document.querySelector 获取dom对象，可以字节修改dom树

  document.querySelectorAll 获取伪数组，不可以直接修改dom树

  伪数组有三要数（下标，元素，长度，但是没有数组方法）

查询属性

任何属性操作前，一定要先获取元素

• 内容属性

  ​ 元素.innerText : (获取文本）

  ​ 元素.innerHTML :（获取文本和标签）

  区别：

  ​ a. innerText 无法解析字符串中的标签

  ​ b. innerHTML 可以解析字符串的标签

• HTML属性 ：

  ​ a.href

  ​ img.src

  注意：要想修改元素属性，一定要先获取元素

• css属性

  ​ (1)修改单个样式： 元素.style.样式名 = 样式值

  ​ (2)修改多个样式： 元素.className='类名'会覆盖原来的类名

  ​ (3)修改多个样式： 元素.classList.add('类名') 不会覆盖原来的类名 （类权重）

  细节 css中带-的属性（font- magin-）都需要转成小驼峰命名

  ​ （1）. 去掉-

  ​ （2）. -后面的首字母大写

查询类名

• 获取类名：元素.className

  a. 因为class是js中的关键字

  类名（类权重）

• 新增类名 元素.classList.add('类名'） 不会覆盖原来的类名

• 移除类名 元素.classList.remove('类名'）

• 切换类名 元素.classList.toggle('类名'）

• 判断类名 元素.classList.contains('类名'）

表单元素

1. 表单元素里面的内容都是由value决定的

   • disabled：是否禁用
   • cheked：是否选中（radio、checkbox）
   • selected：是否选中（option）

2. 获取数组：一定要取下标先取出dom对象，才可以使用dom语法

   let inputList = document.querySelector('input')
   console.log('inputList')	//数组
   

3. 表单内容： 表单元素.value

   console.log(inputList[0].innerText)	//''  表单元素不能用innerText 这是错误的
   console.log(inputList[0].value)		//'显示表单里这个标签的文字'
   

4. 表单状态：

   inputList[1].checked = true		//选中表单标签里的元素
   inputList[1].checked = false		//不选中表单标签里的元素
   

事件

事件三要素：

1. 事件源：获取元素
2. 事件类型：点击、移动等
3. 事件处理：

注册事件

• 给元素添加交互功能

事件原理及注意点

​ (1)事件处理函数在注册的时候不会执行. (函数在声明的时候不会执行)

​ (2)事件处理函数只有两种情况可以执行

​ 第一种： 用户主动触发交互， 浏览器会捕捉交互，底层会自动帮我们调用对象的方法

​ 第二种： 手动调用对象事件处理函数

常用事件

​ 鼠标单击：onclick

​ 鼠标双击：ondblclick

​ 鼠标移入：onmouseenter

​ 鼠标移出：onmouseleave

​ 键盘输入：oninput