原文链接：https://note.noxussj.top/?source=helloworld
HTML 模板
<html> <head> <title>我是网站标题</title> </head> <body> <div class="box"> <div class="box1"></div> </div> <div name="xiaoming"></div> <div id="box"></div> </body> </html>
访问节点
通过 id 访问指定节点 getElementById
var node = document.getElementById('box')
通过 name 访问指定节点 getElementsByName
var node = document.getElementsByName('xiaoming')
通过标签名称访问指定节点 getElementsByTagName
var node = document.getElementsByTagName('div')
通过 class 访问指定节点 getElementsByClassName
var node = document.getElementsByClassName('box')
全能访问指定节点 querySelector
// 通过id访问 var node = document.querySelector('#box') // 通过class访问 var node = document.querySelector('.box') // 通过tag访问 var node = document.querySelector('div')
全能访问所有节点 querySelectorAll
// 通过id访问 var node = document.querySelectorAll('#box') // 通过class访问 var node = document.querySelectorAll('.box') // 通过tag访问 var node = document.querySelectorAll('div')
访问子节点 childNodes
node.childNodes
访问父节点 parentNode
node.parentNode
访问下一个兄弟节点 nextElementSibling
node.nextElementSibling
访问上一个兄弟节点 previousElementSibling
node.previousElementSibling
插入节点
插入子节点（排在最后） append
var node = document.querySelector('.box') var newNode = document.createElement('div') node.append(newNode)
插入子节点（排在最后） appendChild
var node = document.querySelector('.box') var newNode = document.createElement('div') node.appendChild(newNode)
在指定子节点前面插入节点 insertBefore
var node = document.querySelector('.box') var childNode = document.querySelector('.box1') var newNode = document.createElement('div') node.insertBefore(newNode, childNode)
创建节点
创建元素节点 createElement
var newNode = document.createElement('div')
创建文本节点 createTextNode
var newTextNode = document.createTextNode('我是内容')
删除节点
删除当前节点 remove
var node = document.querySelector('.box') node.remove()
删除子节点 removeChild
var node = document.querySelector('.box') var childNode = document.querySelector('.box1') node.removeChild(childNode)
修改节点
替换子节点 replaceChild
var node = document.querySelector('.box') var childNode = document.querySelector('.box1') var newNode = document.createElement('div') node.replaceChild(newNode, childNode)