Web APIs-DOM-获取DOM元素、修改属性

Web API 基础

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

DOM对象

根据CSS选择器来获取DOM元素 (重点)

选择单个元素

document.querySelector('CSS选择器')

let myspan = document.querySelector('span')

返回值 CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null

选择多个元素

document.querySelectorAll('CSS选择器')

let myspan = document.querySelectorAll('span')

返回值： CSS选择器匹配的NodeList 对象集合 是一个伪数组，可以遍历不能pop push等

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

修改DOM元素内容

document.write() 方法

只能将文本内容追加到 </body> 前面的位置 可以解析标签

对象.innerText 属性

将文本内容添加/更新到任意标签位置 不可以解析标签

对象.innerHTML 属性

将文本内容添加/更新到任意标签位置 可以解析标签

设置/修改DOM元素属性

最常见的属性比如： href、title、src 等

对象.属性=值 myinput.value = 'jack'

设置/修改DOM元素属性

对象.style.样式属性='值'

myinput.style.height = '100px'  设置高度100px
myinput.style.fontSize = '40px'  小驼峰命名设置字体大小

设置/修改元素样式属性

className

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

classList

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

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

设置/修改 表单元素 属性

获取: DOM对象.属性名 设置: DOM对象.属性名 = 新值 表单.value = '用户名' 表单固有属性 disabled、checked、selected

定时器

开启

定时器函数可以开启和关闭定时器

setInterval(函数名,时间) 时间以ms为单位 没有单位

关闭

let 变量名 = setInterval(函数名, 时间)
    clearInterval(变量名)