DOM和BOM部分笔记

一、DOM

1.1DOM对象

• DOM对象：浏览器根据html标签生成的js对象。层级最高的是document对象，其次是html对象，
• DOM的核心思想：把网页内容当做对象来处理。
• document对象：是DOM里提供的一个对象；它提供的属性和方法都是用来访问和操作网页内容的，例如，document.write()；网页所有内容都在document里面。

1.2获取DOM对象

• 根据css选择器获取DOM元素

// 获取匹配的第一个元素，一个HTMLElement对象。
document.querySelector('css选择器')  
// 获取匹配的所有元素。得到的是一个伪数组，有长度有索引号的数组，但是没有pop()push()等数组方法。
document.querySelectorAll('css选择器')  

• 其他方法

// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素，获取页面所有div
document.getElementByTagName('div')
// 根据类名获取元素，所有类名为w的
document.getElementByClassName('w')

1.3操作元素内容

目标：能够修改元素的文本更换内容。

对象.innerText属性。纯文本，不解析标签。

对象.innerHTML属性

1.4操作元素属性

• 操作元素常用属性
• 操作元素样式属性
• 操作表单元素属性

通过value获取值，通过type控制表单类型（text，password）。

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示。（disabled、checked、selected）

• 自定义属性

在h5中推出专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。

1.5定时器-间歇函数

功能：每隔一段时间需要自动执行一段代码，不需要手动去触发。例如倒计时。

目标：能够使用定时器函数重复执行代码；定时器函数可以开启和关闭定时器。

let 变量名 = setInterval(function,间隔时间)
clearInterval(变量名)

定时器返回的是一个id数字。