dom对原生节点、操作篇
在原生中,对dom节点的操作,例如 创建,添加,替换,克隆,删除节点等.....
1.创建节点
document.createElement(标签名)
var odiv=document.createElement(div) console.log(odiv) odiv.innerHTML=这是一个新建的div
2.尾部添加
document.添加的地方.appendChild(标签名) 类似于数组的push 尾部添加
在html文件中新建一个select框
<section> <p>1</p> <p>2</p> <p>3</p> </section>
把刚才新建的div 尾部添加到select框 后方之中
var sec=document.getElementsByTagName(section)[0] document.body.appendChild(odiv) sec.appendChild(odiv)
3. 父节点添加 insertBefore(新节点,旧节点) 也称为头部添加
console.log(sec.children[2])//获取子节点不包括空 var span1=document.createElement(span) span1.innerHTML=这是一个新建的span sec.insertBefore(span1,sec.children[0])
后续的节点操作类似相同,这里本人懒了一下就不举例子了。
4.替换节点 replaceChild(新节点,旧节点)
5.克隆节点 需要克隆的节点.cloneNode(true) true表示里面的所有 false仅表示标签
6.删除 父元素.removeChild(需要删除的元素)