DOM主要知识点汇集

115 阅读2分钟

一:如何获取元素 1.querySelector():获取满足条件的第一个元素,获取到的元素是dom元素,意味着可以直接操作 2.querySelectorAll():获取满足条件的所有元素,获取到的是伪数组,伪数组不能直接操作,需要遍历伪数组,获取里面的每一个值进行操作 3.参数:传入选择器

  二:设置标签之间的文本内容
  1.innerText:设置标签的文本内容,不会解析标签,如果没有赋值就是取值,取值会忽略标签
  2.innerHTML:设置标签的文本内容,会解析标签,如果没有赋值就是取值,取值会返回标签内容的完整的html结构

  三:设置元素的属性
  1. dom元素.内置属性:如果没有赋值就是取值
  2.操作样式
    》 style:样式属性对象。它是一个对象,包含着当前元素所有可设置的样式属性,使用时通过  dom元素.style.样式 = 值。它的作用是设置行内样式
    》 设置元素的类名: className可以设置元素的类名,它会覆盖元素之前的类名样式
    》 操作classList:当前元素的类样式列表
      1.add:添加新样式,不会修改元素之前的类样式
      2.remove:移除样式
      3.toggle:切换样式
      4.contains:判断元素是否包含某个样式

  四:表单元素的属性
    1.input: value属性可以设置和获取文本框的内容
    2.checked,disabled,readonly类似的属性,也可以通过点语法可设置和获取
      > 如果没有赋值就是取值,它的值是bool值,特别对于checked属性,选中就是true,否则就是false

    3.button 标签的文本内容需要使用innerText/innerHTML, input/type=button需要使用value来设置
    3.textarea:它的内容设置需要使用value/innerHTML


  五:定时器:每隔一段时间就重复做一个操作
    1.语法: setInterval(执行的函数,时间间隔)
    2.停止定时器:
      > let timeId = setinterval()
      > clearInterval(timeId)