常见DOM操作

增

创建元素节点

var oDiv = document.createElement("div");   //创建一个div
var oP = document.createElement("p");       //创建一个p标签

创建文本节点

var oText = document.createTextNode("文本信息");

把创建的节点追加到方法调用者的尾部

document.body.appendChild(oDiv);   //把div放入body中
oDiv.appendChild(oP);              //把P标签放入div中
oP.appendChild(oText);             //把文本信息放入P标签中

查

<div id="box" name="de">div</div>
<div class="test">div</div>
<div>div</div>
<p class="test" name="de">段落</p>

通过id名

var oDiv = document.getElementById("box");

通过标签名

var aDiv = document.getElementsByTagName("div");
aDiv[0].innerText = "给第一个div标签修改内容";

通过类名

var aTest = document.getElementsByClassName("test");
aTest[1].innerText = "给第二个类名为test的标签修改内容";

通过name名

var aDe = document.getElementsByName("de");

通过选择器

var oDiv = document.querySelector("#box");  //一般用于通过id名查找
var aDiv = document.querySelectorAll(".test");  //用于括号内查找

改

<div id="box" name="de">div</div>
<div class="test">div</div>
<div>div</div>
<p class="test" name="de">段落</p>

新创建span节点，把id为box的div节点换掉

var oSpan = document.createElement("span");
var oDiv = document.getElementById("box");
document.body.replaceChild(oSpan,oDiv);

已有节点替换

var oDiv = document.getElementById("box");
var oP= document.querySelectorAll("p")[0];
document.body.replaceChild(oP,oDiv);      //挪位置
var cloneNode = oP.cloneNode(true);
document.body.replaceChild(cloneNode,oDiv);

删

var oDiv = document.getElementById("box");
var oP= document.querySelectorAll("p")[0];
document.body.removeChild(oP);