WEB 之 Web APIs 系列笔记
WEB 之 Web APIs 系列笔记
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
DOM
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
? W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
获取元素
根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
-
例如:
2019-9-9
根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
-
例如
- 知否知否，应是等你好久11
- 知否知否，应是等你好久22
- 知否知否，应是等你好久33
- 知否知否，应是等你好久44
- 知否知否，应是等你好久55
H5获取元素方式
-
document.getElementsByClassName('类名'); //根据类名返回元素对象集合 -
document.querySelector('选择器'); //根据指定选择器返回第一个元素对象 -
doucument.querSelectorAll('选择器'); //根据指定选择器返回-
注意:
querySelector和querySelectorAll里面的选择器需要加符号,例如:docmument.querySelector('#nav'); -
例如:
盒子1盒子2
-
获取特殊元素 (body, html)
-
获取body元素
document.body //返回body元素对象 -
获取html元素
document.documentElement //返回html元素对象
事件基础
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发--- 响应机制。
执行步骤
- 获取事件源
- 注册时间(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获取鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
改变元素内容(获取或设置)
element.innerText
//从起始位置到终止位置的内容,但去除html标签, 同时空格和换行也会去掉。
element.innerHTML
//起始位置到终止位置的全部内容, 包括html标签, 同时保留空格和换行。
-
例如
某个时间1123
innerText和innerHTML的区别
-
获取内容时
innerTexr会去除空格和换行, 而innerHTML会保留空格和换行
-
设置内容时
innerText不会识别html, 而innerHTML会识别
-
例如
我是文字 123
常用元素的属性操作
innerText innerHTML 改变元素内容
src, href
id, alt, title
-
获取实行的值
元素对象.属性名
-
设置属性的值
元素对象.属性名 = 值
-
例如:
表单元素的属性操作
利用DOM可以操作以下表单元素的属性:
type, value, checked, selected, disabled
- 获取属性的值
元素对象.属性名
- 设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
-
例如
样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
element.style //行内样式操作
element.className //类名样式操作
-
通过style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
-
注意:
- Js里面的样式采取驼峰命名法, 如: fontSize, backgroundColor
- Js 修改style 样式操作, 产生的是行内样式, css权重比较高
-
例如
-
-
通过操作className属性
元素对象.className = 值;
因为class是关键字，所有使用className。
-
注意
- 如果样式修改较多, 可以采取操作类名方式更改元素样式。
- class因为是个保留字, 因此使用className来操作元素类名属性。
- className会之间改变元素的类名会覆盖原先的类名。
-
例如:
文本
-