前端 - DOM元素操作

获取单个 DOM 元素

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="name"]')
document.querySelector('div + p > span')

如果页面上没有指定的元素时，返回 null

获取单DOM 元素集合

document.querySelectorAll('.element')
document.querySelectorAll('#element')
document.querySelectorAll('div')
document.querySelectorAll('[name="name"]')
document.querySelectorAll('div + p > span')

使用 document.querySelectorAll 可以获取一个元素集合，它的传参和 document.querySelector 一毛一样。它会返回一个静态的 NodeList ，如果没有元素被查找到，则会返回一个空的 NodeList 。

以前的开发者会用 getElementsByTagName 和 getElementsByClassName 去获取元素集合，但不同于 querySelectorAll，它们获取的是一个动态的 HTMLCollection，这就意味着，它的结果会一直随着 DOM 的改变而改变。

查找DOM元素的父元素

匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null

<div id="div-01">Here is div-01
  <div id="div-02">Here is div-02
     <div id="div-03">Here is div-03</div>
   </div>
 </div>

var el = document.getElementById('div-03');
var r1 = el.closest("#div-02");  // 返回 id 为 div-02 的那个元素
var r2 = el.closest("div div");  // 返回最近的拥有 div 祖先元素的 div 祖先元素，这里的话就是 div-03 元素本身
var r3 = el.closest("article > div");  // 返回最近的拥有父元素 article 的 div 祖先元素，这里的话就是 div-01
var r4 = el.closest(":not(div)");  // 返回最近的非 div 的祖先元素，这里的话就是最外层的 article

添加DOM元素

一般会这样添加DOM元素

const link = document.createElement('a')
link.setAttribute('href', '/home')
link.className = 'active'
link.textContent = '首页‘

document.body.appendChild(link)

现在可以用方便点的方法

// 插入HTML 字符串
document.body.insertAdjacentHTML(
'beforeend',
'<a href="/home" class="active">首页</a>'
)

// 插入 HTML 元素
document.body.insertAdjacentElement(
'beforebegin',
document.createElement('a')
)

// 插入 文本
document.body.insertAdjacentText(
'afterbegin',
'hello word'
)

这个方法允许你将任何有效的 HTML 字符串插入到一个 DOM 元素的四个位置，这四个位置由方法的第一个参数指定，分别是：

• beforebegin: 元素之前
• afterbegin: 元素内，位于现存的第一个子元素之前
• beforeend: 元素内，位于现存的最后一个子元素之后
• afterend: 元素之后

insertAdjacentElement 也可以用来对已存在的元素进行移动，换句话说：当传入该方法的是已存在于文档中的元素时，该元素仅仅只会被移动（而不是复制并移动）

替换 DOM 元素

oldElement.replaceWith(newElement)

• 如果传入的 newElement 已经存在于文档中，那么方法的执行结果将是 newElement 被移动并替换掉 oldElement
• 如果传入的 newElement 是一个字符串，那么它将作为一个 TextNode 替换掉原有的元素

移除 DOM 元素

以前移除元素，需要用到父元素或者用body，现在只需要在目标元素上执行就好了

const target = document.querySelector('#target')
target.parentNode.removeChild(target)

const target = document.querySelector('#target')
target.remove()

检查 DOM 元素

matches 方法可以判断出一个元素是否匹配一个确定的选择器

<div id="div-01">Here is div-01</div>

const div = document.querySelector('div')

div.matches('div') // true
div.matches('.div-01') // true
div.matches('#01') // false

contains 方法可以检测出一个元素是否包含另一个元素（或者：一个元素是否是另一个元素的子元素）

<div"><h1>h1</h1></div>
<h2>h2</h2>

const div = document.querySelector('div')
const h1 = document.querySelector('h1')
const h2 = document.querySelector('h2')

div.contains(h1) // true
div.contains(h2) // false

DOM属性