【JavaScript】webAPIs一

WebAPI 基础介绍

作用和类型

作用：使用js操作html和浏览器

类型：

DOM(文档对象模型)
BOM(浏览器对象模型)

DOM 树

将 html 文档以树状的结构直观的展示出来

网页内容关系的名词

体现了标签与标签之间的关系

document:

html
- body
  - a
  - div
- head
  - title
  - meta

节点类型：

元素节点
属性节点
文本节点

DOM 对象

浏览器根据 html 标签生成的js对象

特性：

所有的属性标签都可以在这个对象上找到
修改这个对象的属性会自动映射到标签上

获取 DOM 对象

根据 CSS 选择器获取 DOM 元素

document.querySelector()获取匹配的第一个元素，返回一个 HTMLElement 对象
document.querySelectorAll()获取匹配的所有元素，返回一个伪数组

伪数组：

有长度，有索引号
但是没有pop、push等数组方法
通过for循环遍历伪数组

其他方式获取 DOM 元素

1
2
3
4
5
6


// 根据id获取一个元素
document.getElementById('nav')
// 根据标签名获取所有标签
document.getElementsByTagName('nav')
// 根据类名获取所有元素
document.getElementsByClassName('w')

操作元素内容

对象.innerText 属性

innerText 将文本类容添加/更新到任意标签位置

显示纯文本，不解析 html 标签

对象.innerHTML 属性

innerHTML 解析标签

多标签建议使用模版字符串

操作元素属性

操作元素常用属性

常见属性：

href
title
src

语法：

1
2


const nav = document.querySelector('.nav')
nav.src = './images/nav'

操作元素样式属性

通过 `style` 属性修改样式

1
2
3
4
5
6
7
8


// 获取元素
const nav = document.querySelector('.nav')
// 通过style属性修改样式
// 赋值为字符串
// 必须带单位
nav.style.width = '300px'
// 多单词采用小驼峰命名法
nav.style.backgroundColor = 'pink'

通过 `className` 修改样式

style 属性一次只能修改一个属性，className 可以一次修改多个样式属性

1
2
3
4
5
6


const nav = document.querySelector('.nav')
// class是关键字，通过className修改样式
// 值也是一个字符串
nav.className = 'box'
// 多类名
nav.className = 'nav box'

通过 `classList` 修改样式

为了解决 className 容易覆盖以前类名，可以通过 classList 方式追加/删除类名

1
2
3
4
5
6
7


// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
// 有就删除，没有就追加
元素.classList.toggle('类名')

操作表单元素属性

表单有以下常用属性：

type(表单类型：text/password)
value(表单值)
checked(复选框，值为 boolean 类型)
disabled(是否被禁用，值为 boolean 类型)
selected(下拉框是否被选择，值为 boolean 类型)

自定义属性

自定义属性有以下几种方式：

~~setAttribute~~(已弃用)
~~getAttribute~~(已弃用)
html5 新增的 data-自定义属性

自定义属性的使用方式：

标签上以data-开头
DOM 上以dataset对象形式获取

1
2
3
4


// 获取元素
const one = document.querySelector('div')
// 通过元素的dataset对象获取所有的自定义属性
const firstDiv = one.dataset.first

定时器

间歇函数

定时器可以开启和关闭：

setInterval(函数, 间隔时间(单位是毫秒))开启定时器
clearInterval(定时器id号)关闭定时器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 定义函数
function fn() {
  console.log('我是定时器要执行的具名函数')
}
// 开启定时器
// 定时器有一个返回值id全剧唯一
let n = setInterval(fn, 1000)
console.log('n')
// setInterval可以传入匿名函数
let m = setInterval(function () {
  console.log('定时器匿名函数')
}, 1000)
// 关闭定时器
clearInterval(n)