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);