OneYoung

Appearance

1.介绍 ​

DOM 全意即为 Document Object Model，文档对象模型。

它将整个网页视作一份文档，文档当中包含许多节点，如文本节点、属性节点以及元素节点。

另外它提供了一系列用来操作更改这些节点的方法与属性。

2.方法 ​

2-1.选择器 ​

  • document.getElementById() 根据 id 获取唯一元素。
  • document.getElementsByClassName() 根据类名获取所有元素。
  • document.getElementsByTagName() 根据标签名获取所有元素。
  • document.querySelector() 根据 id、className 或者 tagName 获取唯一元素。
  • document.querySelectorAll() 根据 id、className 或者 tagName 获取所有元素。

2-2.节点操作 ​

  • document.createElement() 创建元素节点。

  • document.createTextNode() 创建文本节点。

  • document.createAttribute() 创建属性节点。

  • appendChild() 添加子节点。

  • removeChild() 删除子节点。

  • replaceChild() 替换子节点。

  • insertBefore() 在节点前插入节点。

2-3.属性操作 ​

  • getAttribute() 获取属性值。
  • setAttribute() 修改属性值。
  • hasAttribute() 是否含有某一属性值。
  • removeAttribute 移除属性。

3.属性 ​

说到 DOM属性，用的最广泛的应该是 style 属性。但是值得注意的，利用该属性只能得到行内属性，而不是元素的计算属性。

TIP

如果不仅仅要获取元素的行内属性的话，可以使用 window.getComputedStyle(element, pseudoElt) 这个方法。

也可以使用 offset 系列的部分相关属性，后一章我们会详细说明。

简单介绍下：

window.getComputedStyle(element, pseudoElt) 可以用来获取目标元素的计算样式。

也可以利用第二个参数 pseudoElt 来获取目标元素的伪元素（before、afetr）的计算样式。

js
const root = document.querySelector('#root')
const target = window.getComputedStyle(root)
// 获取具体样式时，有两种方法。假设要获取 ‘背景颜色’.
// ① 直接利用获取对象属性的方式
console.log(target.backgroundColor)
// ② 利用 element.getPropertyValue(property)
console.log(target.getPropertyValue('background-color'))

// 第二种方式相对第一种方式，更友好的一点在于，不用在考虑JS中的驼峰命名，直接利用css的写法即可。

此外，常用的属性还有：

  • childNodes 子节点，可能会包含文本节点、元素节点。
  • children 子节点，只有元素节点。
  • previousSibling 前一个兄弟节点。
  • nextSibling 下一个兄弟节点。
  • parentNode 父节点(可能是元素节点、文本节点或者文档片段节点)。
  • parentElement 父元素节点。
  • firstChild 第一个子节点。
  • lastChild 最后一个子节点。