Web API 1：DOM

前言

JavaScript包含ECMAScript与Web APIs两个部分。
其中Web APIs又包括DOM和BOM两大类。

一、DOM对象

• DOM对象：浏览器根据html标签生成的JS对象。
• DOM的核心思想
• 把网页内容当做对象来处理
• 所有的HTML标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

二、获取DOM对象的方法

• 获取一个DOM对象

const 变量 = document.querySelector('css选择器')

注意：

• 类选择器：记得加“.”
• id选择器：记得加“#”
• 获取多个DOM对象

const 变量名 = document.querySelectorAll('css选择器')

注意：

• 类选择器：记得加“.”
• id选择器：记得加“#”

三、获取与设置DOM对象属性的方法

• 获取-设置标签里面内容
• innerHTML属性

// 获取标签里面的内容
const 内容 = dom对象.innerHTML

// 设置标签里面的内容
dom对象.innerHTML = '修改的内容'

• innerText属性

// 获取标签里面的内容
const 内容 = dom对象.innerText

// 设置标签里面的内容
dom对象.innerText = '修改的内容'

注意：
1、innerHTML：获取和设置元素里面的html内容。
2、innerText：获取和设置元素里面的文本内容。
3、无论是innerText还是innerHTML ，都会覆盖元素中原有的内容。

• 获取-设置元素的属性的值
• 获取元素的属性的值

const 变量 = dom对象.标签属性名

• 给元素的属性设置值

dom对象.标签属性 = 值

• 获取-设置元素样式属性
• 获取标签的行内样式属性值

const 变量名 = dom对象.style.css属性名

• 设置标签的行内样式属性

dom对象.style.样式名称 = '值'

注意：
1、css属性名带有中横线，则去掉中横线，将中横线后面的字母变为大写（小驼峰法）。
2、css属性值有单位需要加单位并且需要用引号。

• 获取-设置表单元素常见属性
• 获取value属性值

const 变量 = dom对象.value

• 设置value属性的值

dom对象.value = 值

• 获取-设置表单元素特殊属性
• checked属性语法

// 获取 checked 属性值
const 变量 = dom对象.checked

// 设置 checked 属性的值
dom对象.checked = 布尔值
checked：true 表示打勾，false 表示不打勾。

• disabled属性语法

// 获取 disabled 属性值
const 变量 = dom对象.disabled

// 设置 disabled 属性的值
dom对象.disabled = 布尔值
disabled：true 表示禁用，false 表示启用。

四、className属性

• 获取元素的类名

const 变量 = dom对象.className

• 给元素添加类名

dom对象.className = '新值'

五、classList属性

• 添加类名

dom对象.classList.add('类名')

• 删除类名

dom对象.classList.remove('类名')

• 切换类名

dom对象.classList.toggle('类名')
//如果标签里面没有这个类名就添加，有则移除。

六、定时器

• 开启定时器语法

setInterval(执行的程序, 间隔的时间)

注意：

• 执行的程序，一般要用一个函数。
• 间隔的时间，单位是毫秒（1秒 = 1000毫秒）。
• 如果执行的程序是具名函数，不要加小括号，直接写函数名。
• 清除定时器语法

let intervalID = setInterval(执行的程序, 间隔的时间)
clearInterval(intervalID)

返回值intervalID是一个非零数值，用来标识通过setInterval()创建的定时器，这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。