- webapi是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
- JavaScript组成三个部分
- ECMAScript - JavaScript的核心
- DOM - 文档对象模型
- 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)
- 事件介绍及类型
事件的三要素:组成事件的三要素
事件源:什么元素
事件类型: 发生了什么 比如鼠标移入移出点击等等
事件处理函数:做什么事情
注册事件:本质是给元素属性赋值
事件源.事件类型 = 事件的处理函数
Box.onclick = function ( ) { }
其中事件在注册的时候不会执行
事件类型:
Onclick (鼠标的单击)
Ondblclick (鼠标的双击)
Onmouseenter (鼠标移入)
Onmouseleave (鼠标移出)
Oninput (用户输入事件)
- 获取元素语法补充
- getElementById() 根据id获取元素
- getElementsByTagName() 根据标签名获取元素
- getElementsByClassName() 根据类名获取元素
- getElementsByName() 根据name属性获取表单元素