增
可以增加
Element，元素
Attribute，属性
Text，文本
DOM节点创建最常用的便是document.createElement和document.createTextNode方法
<script>
var a = document.createElement("div");
a.id = "aaa";
a.style = "color:red;";
a.innerHTML = "新的DIV";
var text = document.createTextNode("另一个字符");
a.appendChild(text);
document.body.appendChild(a)
</script>
还有DocumentFragment：也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，DocumentFragment不是文档树的一部分，它是保存在内存中的，大量操作DOM时用它可以大大提升性能。
<body>
<div id="div">aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</body>
<script>
var fr = document.createDocumentFragment()
var first = document.getElementById("div");
var div;
for (var i = 0; i < 10; i++){
div = document.createElement("div");
div.innerHTML = i;
div.style = "color:red";
fr.appendChild(div);
}
first.appendChild(fr)
</script>
删
removeChild用于删除指定的子节点并返回子节点
<body>
<div id="aa">aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</body>
<script>
var div = document.getElementById("aa") //找到对应的节点
var remove = div.parentNode.removeChild(div); //删除，remove指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作
console.log(remove)
</script>
控制台输出被删除的子节点：
改
appendChild() insertBefore() replaceChild()
parent.appendChild(child)：将child追加到parent子节点的后面，如第一个例子所示
parent.insertBefore(a,b)：将a节点插入到另外b节点的前面
<body>
<div id="aa">aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</body>
<script>
var a = document.createElement("div");
var div = document.getElementById("aa");
a.id = "aaa";
a.style = "color:red;";
a.innerHTML = "新的DIV";
document.body.insertBefore(a,div);
</script>
parent.replaceChild(a,b)：将a节点替换另一个b节点
上面的例子稍稍修改<script>里面的内容：
<script>
var a = document.createElement("div");
var div = document.getElementById("aa");
a.id = "aaa";
a.style = "color:red;";
a.innerHTML = "新的DIV";
document.body.replaceChild(a, div);
</script>
查
document.querySelector：返回节点子树内与之匹配的第一个Element节点。如果没有匹配的节点，则返回null
document.querySelectorAll：返回一个包含节点子树内所有与之匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表。
<body>
<div class="div">aa</div>
<div class="div">bb</div>
<div class="div">cc</div>
<div class="div">dd</div>
</body>
<script>
console.log(document.querySelector(".div"));
console.log(document.querySelectorAll(".div"));
</script>
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.getElementsByName
-
getElement*，querySelector区别：
getElement* 的实时性体现在返回集合的时候，getElementsBy*和querySelectorAll返回的都是一个节点集合，类似于数组，两种方法的区别就在于这个集合会不会自动更新。
querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List，可能会导致无限循环的问题。
https://www.zhihu.com/question/24702250
节点之间的关系
属性操作
setAttribute：给元素设置属性，或者修改已经存在的属性
getAttribute：返回指定的特性名相应的特性值，如果不存在，则返回null：
<div id="div">aa</div>
<script>
var div = document.getElementById("div");
div.setAttribute("id","aa")
div.setAttribute("class","bb")
console.log(div.getAttribute("id"),div.getAttribute("class"))
</script>
最终会输出 aa bb
参考
http://luopq.com/2015/11/30/javascript-dom/
http://www.cnblogs.com/liuxianan/p/javascript-dom-api.html
https://segmentfault.com/a/1190000004076145
网友评论