DOM操作

最新推荐文章于 2022-12-05 18:11:26 发布

王梦翰

最新推荐文章于 2022-12-05 18:11:26 发布

阅读量349

点赞数

文章标签： DOM操作元素节点

本文链接：https://blog.csdn.net/itwangmenghan/article/details/89524996

版权

DOM文档对象模型
是指用来操作HTML对象
DOM是Document Object Model（文档对象模型）的简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				// 创建一个span元素节点
				var span01=document.createElement('span');
				// alert(span01);
				span01.innerText='span标签';
				var div01=document.getElementById('div01');
				
				// 创建一个文本节点   语法：createTextNode(data) 
				var divtxt=document.createTextNode('你老爸是苏大强');
				// 给div01添加文本节点
				div01.appendChild(divtxt);
				
				// 给div元素添加一个名为span01的span标签节点
				// div01.appendChild(span01);
				
				var p01=document.getElementsByTagName('p')[0];
				// 删除p标签节点,注意：p01是一个集合
				// div01.removeChild(p01);
				
				// 用span标签替换p标签
				// 替换子节点,语 法 ：node.replaceChild(newnode,oldnode) 
				// div01.replaceChild(span01,p01);
				// 用你公公是谢广坤替换p标签的内容
				var newtxt=document.createTextNode('你公公是谢广坤');
				// alert(newtxt)
				var oldtext=p01.childNodes[0];
				// alert(oldtext);sss
				p01.replaceChild(newtxt,oldtext);
				
				// 在指定的子节点前面插入新的子节点，在p标签节点前添加span标签节点
				// 语 法 ：node.insertBefore(newnode,existingnode)
				// div01.insertBefore(span01,p01[0]);
				
				
			}
		</script>
	</head>
	<body>
		<div id="div01">
			div
			<p>p标签</p>
		</div>
	</body>
</html>

王梦翰

关注

0
点赞
踩
0

收藏

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

DOM文档对象模型是指用来操作HTML对象DOM是Document Object Model（文档对象模型）的简写<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/java...
复制链接

扫一扫