webapis知识总结-dom的操作及属性1.什么是DOM 2.DOM的作用 3.什么是DOM树 4.如何获取DOM对象

1.什么是DOM

Document Object Mode  文档对象模型

2.DOM的作用

浏览器提供 操作 HTML 页面的 属性与方法
对标签的属性 增删改查
对标签 增删改查

3.什么是DOM树

浏览器把HTML文档以树状的结构展示  标签与标签的关系 看起来很清晰
说人话:把HTML文档以树状结构表现出来
**DOM树本身是一个对象

4.如何获取DOM对象

1.document.querySelector(‘css选择器’)
  1.1 获取成功 dom对象
  1.2 获取失败 null
  1.3 获取第一个 dom 对象
  
2.document.querySelectorAll(‘css选择器’)
  2.1 获取成功有元素的伪数组
  2.2 获取失败 空数组
  2.3 获取多个 dom 对象
  
**注意:  querySelectorAll 一定会返回伪数组
 伪数组: 只有数组三要素(元素,下标,长度),没有数组方法
 
 两者区别
   document.querySelector  获取dom对象,可以直接修改DOM树
   document.querySelectorAll 获取伪数组,不可以直接修改DOM树,必须要先通过下标取出dom对象之后才可以修改dom树

5.操作元素内容

1.元素.innerText  获取文本
2.元素 innerHtml  获取标签和内容

innerText和innerHtml 异同点
 相同:都是获取字符串
 不同:获取内容不同
innerText : 获取文本,无法解析字符串的标签
innerHTML :获取内容,可以解析字符串的标签

6.操作标签的属性

1.标签自带的属性
  1.1 dom对象.属性
  1.2 dom对象.属性 = 值
  
2.操作标签的行内样式
  2.1 dom对象.style.css属性
  2.2 dom对象.style.css属性

3.操作class属性 
  3.1 dom对象.className
  3.2 dom对象.className = '值'
  
4.classList
  4.1 添加类名 对象.classList.add('类名')
  4.2 移除类名 对象.classList.remove('类名')
  4.3 切换类名 对象.classList.toggle('类名')

7.操作表单属性

1 disabled  
表单对象.disabled = true  禁用
表单对象.disabled = false 启用

2checked
表单对象.checked=true  打√
表单对象.checked=false 不打√

8.自定义属性

什么是自定义属性 
程序员给 标签 添加的属性 data- 开头的属性
获取自定义的属性值 对象.dataset.xxx

8.定时器

1.定时器作用 ：  一段代码  时间间隔 重复执行
 2.定时器语法 ：
 永久定时器 一旦开启,自动永久换行 只能手动清除
         开启定时器:  let ID = setInterval(function(){},间隔时间)
         清除定时器:  clearInterval(ID)