JavaScript-DOM(1)

Web APIs

​ 作用：使用js来操作浏览器

​ 组成：DOM , BOM

DOM(文档对象模型)

dom树

​ 将html文档以树状结构表现出来

​ 作用：直观地体现了标签与标签之间的关系

dom对象

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

​ 核心思想：把网页内容当作对象来处理

例：

document.write() //document即浏览器窗口中的HTML文档对象

获取元素

常用：根据css选择器来获取dom元素

document.querySelector('css选择器')  //匹配第一个元素

document.querySelectorAll('css选择器')	//匹配多个元素

querySelectorAll不能直接修改元素，得通过遍历数组（伪数组）的方式

伪数组：有长度有索引号的数组，但是没有数组方法 push（）等

​ 哪怕只有一个元素也是一个伪数组

其他（了解）：

document.getElementById('app')  //根据id获取
document.getElementsByTagName('div') //根据标签获取
document.getElementsByClassName('box') //根据类名获取

修改元素

修改获取元素内容

• innerText 纯文字,不解析标签
• innerHTML 能解析标签

修改元素常见属性

对象.属性 = 值

修改元素css样式属性

一 单个修改通过style

元素对象名.style.样式 = '值'  //记得带单位

//如果样式有连接符- ，转换成小驼峰命名法
box.style.marginTop = '10px'

二. 如果修改的样式比较多，可以通过类名操作

元素.className = '类名'

三. 多个类名容易覆盖，可以使用classList

元素.classList.add('类名')  //添加
元素.classList.remove('类名') //删除
元素.classList.toggle('类名') //有就删，没有就加上
元素.classList.contains('类名') //是否包含某个类，是返回true

修改表单的值

​ 表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示

input.checked = true
input.disabled = true

自定义属性

//定义  
<div data-id> </div>
//使用
const div=document.querydocument('div')
console.log(div.dataset.id)

计时器 间歇函数

let a = setInterval(function () {},time)
// 清除
clearInterval(a)