DOM节点操作
DOM节点操作有:创建，添加，删除，替换
创建元素节点
<script>
var oli=document.createElement("li");
console.log(oli);
</script>
<li></li>
添加元素节点
在指定节点内部末尾添加一个新的子节点 ，父.appendChild(子)。
<body>
<ol></ol>
<script>
var oli=document.createElement("li");
var ol=document.getElementsByTagName("ol")[0];
oli.appendChild(ol);
console.log(ol);
</script>
</body>
<ol>
<li>
</li>
</ol>
创建文本节点 (createTextNode)
<body>
<ol></ol>
<script>
var text=document.createTextNode("卡卡西");//创建文本节点
var ol=document.getElementsByTagName("ol")[0];//获取ol
ol.appendChild(text);//把添加的文本节点添加到ol内部
console.log(ol);
</script>
</body>
<ol>卡卡西</ol>
使用其它方法添加文本到标签内部
<body>
<ol></ol>
<script>
var ol=document.getElementsByTagName("ol")[0];
var oli=document.createElement("li");
oli.innerHTML="卡卡西";
ol.appendChild(oli);
console.log(ol);
<script>
</body>
<ol>
<li>
卡卡西
</li>
</ol>
DOM节点操作
<body>
<ul>
<li>卡卡西</li>
<li>我爱罗</li>
<li>薛之谦</li>
<li>华晨宇</li>
</ul>
<script>
var ul=document.getElementsByTagName("ul")[0];//获取ul
var ul_node=ul.childNodes;//获取ul下的全部字节点
console.log(ul_node);//输出ul下的全部字节点
//结果为NodeList(9){分别为5个text,4个li}
//text为ul与li之间的空格和li与li之间的空格
console.log(ul.firstChild);//输出第一个字节点结果(#text)
console.log(ul.lastChild);//输出最后一个字节点结果(#text)
//parentNode 返回字节点的父节点
var li=document.getElementsByTagName("li");
console.log(li[0].parentNode);//输出li内部是卡卡西的父节点
console.log(li[1].nextSibling);//输出该节点的下一个节点
console.log(li[2].previousSibling);//输出该节点的上一个节点
//输出元素节点 加上Element
console.log(ul.firstElementChild);//输出ul下的第一个元素节点
console.log(ul.lastElementChild);//输出ul下的最后一个元素节点
console.log(li[0].nextElementSibling);//输出第一个li的下一个元素节点
console.log(li[2].previousElementSibling);//第2个节点的上一个元素节点
</script>
</body>
删除节点_remove()
<body>
<ul>
<li>卡卡西</li>
<li>我爱罗</li>
<li>薛之谦</li>
<li>华晨宇</li>
</ul>
<script>
var ul=document.getElementsByTagName("ul")[0];//获取ul
var li=document.getElementsByTagName("li");//获取ul下的li
// 第一种删除的方法 夫.removeChild(子); (子为要删除的元素)
ul.removeChild(ul.firstElementChild);//删除ul下的第一个元素节点
console.log(ul);//输出ul
</script>
</body>
//该方法js中没有但可以单独使用其删除当一起使用时会报错
//第2种删除的方法 (要删除的元素).remove()
li[3].remove();
console.log(ul)//不建议使用
替换节点_replaceChild()
<body>
<div>
<p>卡卡西</p>
</div>
<script>
var div=document.getElementsByTagName("div")[0];
var p=document.getElementsByTagName("p")[0];
var newp=document.createElement("p");
newp.innerHTML="我爱罗";
div.replaceChild(newp,p);
</script>
</body>
after与before添加节点
父.insertBefore(添加节点,位置) 在指定子节点之前插入新的节点
<body>
<ul>
<li>卡卡西</li>
</ul>
<script>
var ul=document.getElementsByTagName("ul")[0];
var ul_li=document.getElementsByTagName("li")[0];
var uli=document.createElement("li");// 父.insertBefore(添加节点,位置) 在指定子节点之前插入新的节点
uli.innerHTML="我爱罗";
ul.insertBefore(uli,ul_li); //在指定子节点之前插入新的节点
ul.after(uli); //之后
ul.before(uli); //之前
</script>
</body>