关于前端学习: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

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