DOM操作

一. 创建节点

createElement，创建新元素，即要创建元素的标签名

const divEl = document.createElement('div')

createTextNode，创建一个文本节点 

const textEl = document.createTextNode('content')

createDocumentFragment，用于创建一个文档碎片，它表示一种轻量级的文档，主要用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中。 

const fragment = document.createDocumentFragment()

createAttribute，创建属性节点，可以是自定义属性 

const dataAttribute = document.createAttribute('custom')

二. 获取节点

querySelector，仅返回第一个匹配的元素

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

querySelectorAll，返回所有匹配的元素

const notLive = document.querySelectorAll('p')

getElementById，getElementsByClassName，getElementsByTagName，等等 

document.getElementById('id属性') // 返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值') // 返回拥有指定class的对象集合
document.getElementsByTagName('标签名') // 返回拥有指定标签名的对象集合
document.getElementsByName('name属性值') //返回拥有指定名称的对象结合

三. 更新节点

inndeHTML，可以修改一个DOM节点的文本内容，还可以通过HTML片段修改DOM节点内部的子树 

let p = document.getElementById('p')
// 设置文本为abc
p.innerHTML = 'ABC'
// 设置HTML
p.innerHTML = 'ABCRED XYZ'

innerText，textContent 

四. 添加节点

innerHTML

appendChild，把一个子节点添加到父节点的最后一个子节点 

JavaScript

  
Java
  
Python
  
Scheme


// 添加一个p元素
const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list')
list.appendChild(js)

//现在HTML结构变成了这样


  
Java
  
Python
  
Scheme
  
JavaScript

insertBefore，把子节点插入到指定的位置

// 子节点会插入到referenceElement之前
parentElement.insertBefore( newElement, referenceElement)

setAttribute，在指定元素中添加一个属性节点，如果元素中已有该属性就会改变该属性的值

const div = document.getElementById('id')
div.setAttribute('class','white') // 第一个参数属性名，第二个参数属性值

五. 删除节点

删除一个节点，首先要获得该节点本身以及它的父节点

然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点
const self = document.getElementById('to-be-removed')
// 拿到父节点
const parent = self.parentElement
// 删除
const removed = parent.removeChild(self)
removed === self // true