WEB前端 | JS基础——(7)DOM

最新推荐文章于 2024-09-27 15:27:45 发布

Erosvan

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量659

点赞数

文章标签： dom Web前端 javascript html5

本文链接：https://blog.csdn.net/Erosvan/article/details/52912506

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>DOM初识</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<h2>我是大哥</h2>
		<div id="firstdiv">
			文本
			<!-- 注释 -->
			<p id="p1">你是P</p>
		</div>
		<section>你是三弟</section>
	</body>
	<script type="text/javascript">
		// DOM Document Object Model
		var firstdiv = document.getElementById('firstdiv');
		console.log(firstdiv);
		
		// 插入一个新节点
		var h3 = document.createElement('h3');
		h3.innerHTML = "123";
		firstdiv.appendChild(h3);
		var wenben = document.createTextNode('我插入了');
		h3.appendChild(wenben);
	
		
		var oldtext = firstdiv.childNodes[0];
		var newtext = document.createTextNode('文字');
		firstdiv.replaceChild(newtext,oldtext);
		
		for(var i = 0 ; i < firstdiv.childNodes.length; i++) {
			if (firstdiv.childNodes[i].id == 'p1') {
				var oldP = firstdiv.childNodes[i];
			}
		}
		var newSpan = document.createElement('span');
		firstdiv.insertBefore(newSpan,oldP);
		firstdiv.removeChild(oldP);
	</script>
</html>