获取DOM对象的方式

document.querySelector

获取的是满足条件的第一个一定只有一个
获取的是dom元素，可以直接操作
如果没有获取到，就返回null Cannot read properties of null (reading 'style'):不能使用null读取属性style

document.querySelectorAll

获取的是满足条件的所有DOM对象返回的是一个集合-NodeList--伪数组 获取的是伪数组，无法直接操作,必须通过下标才能操作，所以我们对伪数组进行遍历 for - forEach 就算没有获取到元素也返回一个伪数组--对象

设置/修改元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.就是操作对象使用的点语法

为标签设置标签之间的内容针对于双标签而言

innerText只关注内容, 不关注标签

innerHTML 可以解析标签如果要解析标签内容，就使用innerHTML 动态渲染富文本框 使用: 不明确数据的安全性的情况下, 使用innerText

设置/修改元素属性

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.就是操作对象使用的点语法

为标签设置标签之间的内容针对于双标签而言

innerText 只关注内容, 不关注标签

innerHTML 可以解析标签如果要解析标签内容，就使用innerHTML 动态渲染富文本框

使用: 不明确数据的安全性的情况下, 使用innerText

设置/修改元素属性设置/修改常用（内置）属性:href、title、src

style操作css

每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。

如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中-会被解析成减号）

style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

操作类名(className)

由于class是关键字, 所以使用className去代替

className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

            classList
		添加：add(class1, class2, ...)
		删除：remove(class1, class2, ...)
		切换：toggle(class)
		是否包含：contains(class),包含返回true,不包含返回false
	对比className和style、classList的区别
		修改大量样式的更方便
		修改不多样式的时候方便

classList 是追加和删除不影响以前类名

设置/修改表单属性

	正常的有属性有取值的 跟其他的标签属性没有任何区别
		获取: DOM对象.属性名
		设置: DOM对象.属性名 = 新值
	表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
	常见表单属性
		value、disabled、checked、selected`

定时器-间歇函数

间隔一段时间之后重新执行对应的代码

let timerId = setInterval(回调函数, 间隔时间)

清除定时器clearInterval(timerId)

注意点: 定时器也是需要等待, 所以后面的代码先执行每一次调用定时器,都会产生一个新的定时器

WebApi DOM-获取元素、修改属性