DOM 文档对象模型
原文链接：https://note.noxussj.top/?source=sifou
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)最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要再花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。
原文链接：https://note.noxussj.top/?source=sifou