0
点赞
收藏
分享

微信扫一扫

Dom操作

夜空一星 2022-02-16 阅读 70

Dom:文档对象模型

1,获得Dom节点

<div id="father">
			<p id="p1">p1</p>
			<p class="p2">p2</p>
		</div>
		<script type="text/javascript">
			var he1=document.getElementById('p1');
			var he2=document.getElementsByClassName('p2');
			var father=document.getElementById('father');
		</script>

2更新dom节点

<div id="id1"></div>
<script>
		var id=document.getElementById('id1');
		id1.innerText='123'
</script>

3,删除dom节点

现获取父节点,再通过父节点删除自己
var father =document.getElementById(father);
father.removeChild(p1);

4,

创建和插入节点

我们获得某个dom节点,假设这个节点是空的,通过innerHTML可以增加一个元素,但是这个节点已经存在了元素,如果增加了,会产生覆盖

追加

<body>
		<p id="js">javascript</p>
		<div id="list">
			<p id="se">javase</p>
			<p>javase</p>
			<p>javase</p>
			<p>javase</p>
		</div>
		<script>
			var js=document.getElementById('js');
			var list=document.getElementById('list');
			list.appendChild(js);
			var newp=document.createAttribute('p');//创建一个p标签
			newp.id='newsp';
			newp.innerText='hello';
			
			list.appendChild(p);
			//创建一个标签节点
			var sc=document.createElement('script');
			sc.setAttribute('type','text/javascript');
			//通过body改属性
			var body=document.getElementsByTagName('body');
			body.style.backgroundColor='#eeeeee';
		</script>
举报

相关推荐

0 条评论