Dom操作

最新推荐文章于 2024-08-20 16:48:16 发布

qq_45991003

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量276

点赞数

分类专栏：前端文章标签： javascript 前端 css3 chrome html

本文链接：https://blog.csdn.net/qq_45991003/article/details/122964814

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

qq_45991003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom操作

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
复制链接

扫一扫

专栏目录