快捷搜索: 王者荣耀 脱发

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(需要删除的元素)

经验分享 程序员 微信小程序 职场和发展