前端webapi基础小结

1. webapi是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
2. JavaScript组成三个部分

1. ECMAScript - JavaScript的核心
2. DOM - 文档对象模型
3. BOM - 浏览器对象模型

3.Dom语法

1.查询元素

1.1docunment.querySelector(‘选择器’）

如果选择器存在，则获取dom对象，不存在则获取null

对象可以直接用dom语法修改

2.1docunment.querySelectorAll(‘选择器’）

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

得到的是数组，不可以直接用dom语法进行修改，得先通过取下标再进行修改

2元素属性的操作

2.1内容属性

元素.innerText:      获取元素的文本内容

元素.innerHTML:     获取元素的文本加标签

2.2html属性：元素名.属性名 = 属性值

a.href

img.src

先获取元素，再获取属性（元素 . 属性名），最后设置属性（元素 . 属性名）

2.3样式属性

单个样式： 元素 . Style . 属性名 = 属性值

多个样式： className： 元素.className = ‘类名’

ClassList语法

新增类名  ：元素.classList.add('类名')

移除类名 ： 元素.classList.remove('类名')

切换类名(有则移除，无则新增) ：元素.classList.toggle('类名')

判断类名（true:有 false:没有）： 元素.classList.contains('类名')

3表单元素特殊属性

表单内容 ： 表单元素.value

表单布尔属性：

3.1元素.disabled   获取禁用状态 （布尔类型）

3.2元素.checked  获取选中状态（用于radio/checkbox）

3.3 元素.selected  获取选中状态(用于option)

1. 事件介绍及类型

事件的三要素：组成事件的三要素

事件源：什么元素

事件类型： 发生了什么 比如鼠标移入移出点击等等

事件处理函数：做什么事情

注册事件：本质是给元素属性赋值

事件源.事件类型 = 事件的处理函数

Box.onclick = function ( ) { }

其中事件在注册的时候不会执行

事件类型：

Onclick （鼠标的单击）

Ondblclick （鼠标的双击）

Onmouseenter (鼠标移入）

Onmouseleave （鼠标移出）

Oninput （用户输入事件）

1. 获取元素语法补充

1. getElementById()  根据id获取元素
2. getElementsByTagName()  根据标签名获取元素
3. getElementsByClassName() 根据类名获取元素
4. getElementsByName()  根据name属性获取表单元素