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
发表回复