Javascript——操作DOM的API

• 了解DOM

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

• 了解DOM树

  DOM基本结构
  
  DOM树
  

• 获取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