原文链接：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)
