注意：
该文章由JS小白（本人）编写完成，仅为个人总结和理解，若有纰漏和误解，还望多多指出，共同成长😋
JS DOM操作
DOM:document object model 提供了和页面内容相关的一些操作
创建元素节点
var oDiv = document.createElement("div"); // 获取节点对象
document.body.appendChild(oDiv); // 追加节点 追加到调用这个方法的元素中。此处会把div添加到body中。
var oTxt = document.createTextNode("文本"); // 创建文本节点
oDiv.appendChild(oTxt); // 把文本节点放到div里
查询元素节点
var oSpan = document.getElementById("sp"); // 无兼容性
var aDiv = document.getElementsByTagName("div"); // 无兼容性
// 取到的值是集合 通过索引取到具体的DOM对象之后才能操作
console.log(aDiv[0].innerText);
aDiv[0].style.color = "red";
var aTest = document.getElementsByClassName("test");
// 取到的值是集合 通过索引取到具体的DOM对象之后才能操作
var aSp = document.getElementsByName("sp");
var oDiv = document.querySelector("div"); // 有兼容性
// 返回匹配指定选择器的第一个元素
var aDiv = document.querySelectorAll(".test"); // 有兼容性
返回文档中匹配指定 CSS 选择器的所有元素
取到的值是集合 通过索引取到具体的DOM对象之后才能操作
修改元素节点
replaceChild() 方法可将某个子节点替换为另一个。
新节点可以是文本中已存在的，或者是你新创建的
node.replaceChild(newnode,oldnode)
var oSpan = document.createElement("span");
var oSpan1 = document.querySelectorAll("span")[1];
var oP = document.getElementsByTagName("p")[0];
document.body.replaceChild(oSpan,oP);
// 用新创建的节点去替换某个节点
document.body.replaceChild(oSpan1,oP);
// 用已存在的节点去替换某个节点，挪位置
克隆元素节点
cloneNode() 方法可创建指定的节点的精确拷贝。
cloneNode() 方法 拷贝所有属性和值。
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
document.body.replaceChild(oSpan1.cloneNode(true),oP);
// 用克隆节点去替换某个节点，被克隆的节点还在原来的位置上
移除元素节点
node.removeChild(node)
removeChild() 方法可从子节点列表中删除某个节点。
如删除成功，此方法可返回被删除的节点，如失败，则返回NULL。
var oTest = document.getElementById("test");
var oP = document.querySelectorAll("p")[1];
oTest.removeChild(oP);
以上是关于JS第十五小节的总结，下次再见😘
