DOM 文档对象模型使用教程来喽！

原文链接：https://note.noxussj.top/?source=helloworld

HTML 模板

1<html>
2    <head>
3        <title>我是网站标题</title>
4    </head>
5    <body>
6        <div class="box">
7            <div class="box1"></div>
8        </div>
9
10        <div name="xiaoming"></div>
11
12        <div id="box"></div>
13    </body>
14</html>

访问节点

通过 id 访问指定节点 getElementById

1var node = document.getElementById('box')

通过 name 访问指定节点 getElementsByName

1var node = document.getElementsByName('xiaoming')

通过标签名称访问指定节点 getElementsByTagName

1var node = document.getElementsByTagName('div')

通过 class 访问指定节点 getElementsByClassName

1var node = document.getElementsByClassName('box')

全能访问指定节点 querySelector

1// 通过id访问
2var node = document.querySelector('#box')
3
4// 通过class访问
5var node = document.querySelector('.box')
6
7// 通过tag访问
8var node = document.querySelector('div')

全能访问所有节点 querySelectorAll

1// 通过id访问
2var node = document.querySelectorAll('#box')
3
4// 通过class访问
5var node = document.querySelectorAll('.box')
6
7// 通过tag访问
8var node = document.querySelectorAll('div')

访问子节点 childNodes

1node.childNodes

访问父节点 parentNode

1node.parentNode

访问下一个兄弟节点 nextElementSibling

1node.nextElementSibling

访问上一个兄弟节点 previousElementSibling

1node.previousElementSibling

插入节点

插入子节点（排在最后） append

1var node = document.querySelector('.box')
2
3var newNode = document.createElement('div')
4
5node.append(newNode)

插入子节点（排在最后） appendChild

1var node = document.querySelector('.box')
2
3var newNode = document.createElement('div')
4
5node.appendChild(newNode)

在指定子节点前面插入节点 insertBefore

1var node = document.querySelector('.box')
2
3var childNode = document.querySelector('.box1')
4
5var newNode = document.createElement('div')
6
7node.insertBefore(newNode, childNode)

创建节点

创建元素节点 createElement

1var newNode = document.createElement('div')

创建文本节点 createTextNode

1var newTextNode = document.createTextNode('我是内容')

删除节点

删除当前节点 remove

1var node = document.querySelector('.box')
2
3node.remove()

删除子节点 removeChild

1var node = document.querySelector('.box')
2
3var childNode = document.querySelector('.box1')
4
5node.removeChild(childNode)

修改节点

替换子节点 replaceChild

1var node = document.querySelector('.box')
2
3var childNode = document.querySelector('.box1')
4
5var newNode = document.createElement('div')
6
7node.replaceChild(newNode, childNode)