Javascript——操作DOM的API

  • 了解DOM

    • DOM (Document Object Model) 是文档对象模型
    • 提供了使用JavaScript对 HTML页面的操作,对元素进行增删改查、设置元素属性、设置元素样式、给元素添加事件等API
  • 了解DOM树

    DOM基本结构
    image.png
    DOM树
    image.png

  • 获取DOM元素API

    • 获取html元素:document.documentElement
    • 获取head元素:document.head
    • 获取body元素:document.body
    • 通过id属性获取元素:
      document.getElementById('id名')
      返回值:匹配id的元素,id不存在返回null
    • 通过标签名获取元素:
      document.getElementByTagName('标签名')
      返回值:有匹配标签名的元素返回一个存储了所有匹配的元素伪数组,没有匹配标签名的元素返回一个空伪数组
    • 通过class名获取元素:
      document.getElementsByClassName('class名')
      返回值:有匹配class名的元素返回一个存储了所有匹配的元素伪数组,没有匹配class名的元素怒返回一个空伪数组
    • 通过name属性获取元素:
      document.getElementsByName('name属性值')
      返回值:有匹配name属性值的元素返回一个存储了所有匹配的元素伪数组,没有匹配name属性值的元素怒返回一个空伪数组
    • 通过选择器获取元素
      获取一个:document.querySelector('选择器')
      返回值:返回值:匹配 选择器的元素,选择器 不存在返回null
      获取多个:document.querySelectorAll('选择器')
      返回值:一个存储 匹配 选择器 的所有元素 的伪数组,没有匹配 选择器 的元素 则是一个空伪数组
  • 操作元素属性API

  • 原生属性:HTML标签自带的属性,如 id、class、style等
    操作语法:

    获取属性值语法:获取元素的变量.属性名
    设置、修改属性值语法:获取元素的变量.属性名
  • 自定义属性:由自己定义的属性和属性值
    操作语法:

      获取属性值语法:获取元素的变量.getAttribute('属性名')
      设置属性值语法:获取元素的变量.setAttribute('属性名','属性值')
      删除属性值语法:获取元素的变量.removeAttribute('属性名')
  • H5自定义属性:由 H5 推出的标准化自定义属性方法,格式为:data-xxx
    操作语法:

      获取属性值:获取元素的变量.dataset.属性名
      设置属性值:获取元素的变量.dataset.属性名='属性值'
  • 操作元素类名的API

  • 设置类名获取元素的变量.className = '类名'
  • 修改类名获取元素的变量.className = '类名'
  • 追加类名获取元素的变量.className += '类名'
  • 设置类名获取元素的变量.className = '不写要删除的类名'
  • H5 推出的新API,内部有一个 classList属性

    • 添加类名:获取元素的变量.classList.add('类名')
    • 删除类名:获取元素的变量.classList.remove('类名')
    • 切换类名:获取元素的变量.classList.toggle('类名')
      没有这个类名时为添加,有这个类名时删除
  • 操作页面结构

  • 操作页面超文本结构内容

    • 获取元素内所有超文本和文本内容:获取元素的变量.innerHTML
      返回值:返回标签+文本的字符串形式
    • 将内容插入到元素中:获取元素的变量.innerHTML= '插入内容'
      注意:完全覆盖元素中之前的内容,插入内容中的标签会自动解析
  • 操作页面普通文本内容

    • 获取元素内所有普通文本内容:获取元素的变量.innerText
      返回值:返回文本的字符串形式
    • 将内容插入到元素中:获取元素的变量.innerText= '插入内容'
      注意:完全覆盖元素中之前的内容,插入内容中的标签不会自动解析
  • 操作表单元素中value属性值

    • 获取表单元素内的value属性值:获取元素的变量.value
      返回值:返回value属性值
    • 设置value属性值:获取元素的变量.value= '插入内容'
  • 操作元素样式API

    操作元素样式时一些规范语法:添加或修改样式时,如果使用 点语法 操作,多单词样式名使用驼峰式格式,如果使用数组关联语法可直接写样式名

  • 行内样式的操作

    • 获取元素样式
    获取全部样式语法:获取元素的变量.style
    返回值:一个包含所有可设置样式的对象
    
    获取指定样式语法:获取元素的变量.style.样式名
    返回值:样式的值
    • 设置元素样式
    设置样式的值:获取元素的变量.style.样式名='样式值'
  • 非行内样式的操作
    注意点:只能获取样式,不能直接设置样式

    • 标准浏览器操作方法:
    获取全部样式:window.getComputedStyle(获取元素的变量)
    返回值:一个包含所有可设置样式的对象
    
    获取单个样式值:window.getComputedStyle(获取元素的变量).样式名
    • IE浏览器操作方法:
    获取全部样式:获取元素的变量.currentStyle
    返回值:一个包含所有可设置样式的对象
    
    获取单个样式值:获取元素的变量.currentStyle.样式名
    • 兼容语法
    var div = document.getElementById('div');
    // 接收返回的样式信息对象
    var style = null;
    if (div.currentStyle) {
      //兼容IE
      colorStr = div.currentStyle
    } else {
      // 标准浏览器
      colorStr = window.getComputedStyle(div)
    }
    
    var 变量 = window.getComputedStyle(获取元素的变量) || 获取元素的变量.currentstyle
19 声望
2 粉丝
0 条评论
19 声望
2 粉丝
宣传栏