DOM常见举例

最新推荐文章于 2024-08-07 17:12:09 发布

原创最新推荐文章于 2024-08-07 17:12:09 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文通过一个具体的HTML页面展示了如何使用JavaScript进行DOM元素的选择、创建、插入、替换及删除等基本操作。通过对这些操作的详细解释，帮助读者理解如何动态地修改网页内容。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom</title>
</head>
<body id="gbd">
	<div id="id1"><p id="p1">锄禾日当午</p></div>
	<div id="id2"><p>窗前明月光</p><p>疑是地上霜</p></div>
	<div id="id3"><p id="p11">春眠不觉晓</p><p id="p12">处处闻啼鸟</p></div>
	<button onclick="test()">切换</button>
	<script>
		var id1 = document.getElementById('id1');
		var newnode = document.createElement('h2');
		newnode.innerHTML = "汗滴禾下土";
		id1.appendChild(newnode);
		var p1 = document.getElementById('p1');
		var newnode2 = document.createElement('h3');
		newnode2.innerHTML = '悯农';
		//inserBefore必须有两个参数，第一个是要插入的节点，第二个是节点的位置
		id1.insertBefore(newnode2,p1);
		var id2 = document.getElementById('id2');
		var rem = id2.removeChild(id2.childNodes[1]);
		document.write('删除的节点是：'+id2.childNodes[1])
		document.write('删除的节点是：'+rem)
		console.log(rem)
		document.write(rem.innerHTML);
		//createTextNode创建文本节点
		var h1 = document.createElement('h1');
		var h1text = document.createTextNode('我们都是路人甲乙丙丁');
		h1.appendChild(h1text);
		var gbd = document.getElementById('gbd');
		gbd.appendChild(h1);
		console.log(document.body)
		//replaceChild()，两个参数必须。第一个节点取代第二个节点。子节点替换
		function test(){
			var p11 = document.getElementById('p11');
			//var p12 = document.getElementById('p12');
			var id3 = document.getElementById('id3');
			var p12 = id3.childNodes[1];
			var h11 = document.createElement('h1');
			var h11text = document.createTextNode('花花世界，鸳鸯蝴蝶');
			h11.appendChild(h11text)
		//id3.appendChild(h11);
			console.log(id3)
			p11.parentNode.replaceChild(h11,p12)
			}
	</script>
</body>
</html>