乐趣区

关于前端学习:Javascript操作DOM的API

jiezi

  • 理解 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
退出移动版