原生JS操作DOM的增删改查（实用总结篇）

大家好，我是梅巴哥er。实际项目中，最多的应用就是对DOM树的操作，所以本篇就从实用角度，总结一下原生JS下的DOM的增删改查。

---

增

• 增加元素前，必须先创建或复制元素。然后把创建或复制的元素，插入到DOM树中。

增加元素

• 创建元素

document.createElement('div');

• 复制元素

div.cloneNode(blooean);

这里的blooean是布尔值，如果是true，就克隆div元素和它里面的所有子元素以及css属性。
如果是false，只复制div元素本身，不包含它的子元素。

注意，cloneNode不复制元素的js事件。

• 把元素添加进DOM树

//把div元素添加div1元素的父元素的末尾
div1.parentNode.appendChild(div);

//把div元素添加到div1元素的前面,div2元素的里面
div2.insertBefore(div, div1);

• 在div的父元素里，用div1元素替换div2元素

div.parent.replaceChild(div1, div2);

删

• 删除div里的div1元素

div.removeChild(div1);

• 删除div元素

div.remove();

• 刚发现的一个有趣的方法

div.innerHTML = '';
可以直接删除div元素里的所有节点，把div元素清空

改

• 把div内容改为hello world

div.innerHTML = 'hello world';

还有innerTEXT的方法，但是其实实用性并不强，所以不做介绍。
本篇只从实用性角度做介绍，不做无用扩展。

• 把div的类名改为opacity1

div.className = 'opacity1';

查（获取）

• 获取元素

document.getElementById('box');//获取id为box的元素
document.getElementsByTagName('div')[0];//注意，这个方法获取到的是所有div元素，通过[]获取具体的某个div元素
document.getElementsByClassName('box')[0];//获取所有类名为.box的元素，也是一个数组形式

更实用 的方法是document.querySelector();
一般可以这样写：
var $ = document.querySelector.bind(document);
$('div');//获取标签名为div的第一个元素
$('.box');//获取类名为box的第一个元素
$('#box');//获取id为box的元素

如果要获取所有的同类元素，就要用到这种方法：
var $$ = document.querySelectorAll.bind(document);
$$('div');//获取所有div元素，结果是一个数组
$$('.box');//获取所有类名为box的元素，结果也是一个数组

• 获取属性和值

$('div').innerHTML; //获取div元素的内容
$('input').value;//获取input的value值

• 获取html元素

var html = document.documentElement;

• 获取body元素

var body = document.body;

---

操作属性

• 获取属性

$('a').getAttribute('href');//获取a标签的href属性

• 设置属性

$('a').setAttribute('href', 'www.baidu.com');

• 设置css属性

//改变单一属性的值
div.style.color = 'pink';
div.style.backgroundColor = 'purple';
这里注意一点，如果div原有'display: flex;'，然后再这样设置
div.style.display = 'block';
就会把原有设置的felx布局给取消掉。
所以这一句用的时候注意点。
如果实在需要让元素消失或显示，可以用别的方法：
div.className = 'box opacity0';
给opacity0在css里添加属性，如
.opacity {
  display: none;
}


//改变并覆盖之前的所有css属性和值
div.style.cssText = 'color: pink; background-color: purple;';
如果之前div还有其他css属性，会被覆盖或取消，这条慎用。

• 获取css属性

这里比较特殊的是，
直接获取是无法获取到的，比如
div.style.display 是获取不到display属性的。

可以通过如下方式获取：
window.getComputedStyle(document.querySelector('div'),null).getPropertyValue('display');

---

以上就是常用的dom操作。目前市面上常用的还是js和jq对dom操作，如果学懂原生js的操作，再用其他技术，将会方便很多。如有需要补充，可以评论指出。