js DOM ：节点操作（增删改查）

<style>
.box{ width:600px; border:1px solid #e4393c; }
.box>div{ float:left; width:180px; height:200px; margin: 0 10px; background:#eee; }
</style>
<div class="box">
    <p></p>
</div>

<div class="box">
    <p></p>
</div>

<div class="box">
    <p></p>
</div>

获取元素

var box = document.getElementsByClassName('box')[0];

创建元素

// 创建一个div元素
var div = document.createElement('div');

将div元素添加到box中

box.appendChild(div);

若需要创建多个相同元素进行添加，需要进行遍历生成和添加，document.createElement每次创建完只能使用一次

移除节点包括其本身

box.remove();

移除子节点

// 移除box元素下的子元素节点p
var childP = document.querySelector('p');
box.removeChild(childp);

替换节点  父元素.replaceChild(新节点, 旧节点);，参数输出均为dom元素

// 创建子节点元素div
var div = document.createElement('div');
div.textContent = '替换成我啦';
// 将父元素box中的子元素p替换成div元素
box.replaceChild(div, childP);

在节点前添加节点   父元素.insertBefore(新节点, 基准子节点);  参数输出均为dom元素

// 创建div元素
var div = document.createElement('div');
div.textContent = '添加的子节点';
// 在box元素中的子节点元素p前添加子节点div
box.insertBefore(div, childP);

利用类名document.getElementsByClassName()和documen.querySelectAll()t获取dom元素输出的是一个伪数组元素，将其转换为数组形式

var box = document.querySelectAll('.box');
console.log('box ==> ', box);  //  输出一个伪数组元素
box = Array.from(box);
console.log('box ==> ', box);  //  输出一个数组