JS DOM相关知识

最新推荐文章于 2024-06-12 11:59:04 发布

左天才右疯子

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量79

点赞数

分类专栏： web 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43609884/article/details/125318013

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是DOM

全称： Document Object Model ，文档对象模型

概念：将网页中标签转换为一个对象节点，就可以使用脚本语言对节点进行操作

如何获取节点

1.通过ID方式找节点

<div id="d1"> HelloWorld </div>
<script>
	var d1 = document.getElementById("d1"); 
	// 找标签，找节点 
	// 为什么找到节点，就可以对div做操作 
	// JS已经把这个节点转换为一个变量 
</script>

2.通过标签名字找节点

<div>HelloWorld </div>
<script>
	var div = document.getElementsByTagName("div"); // 找到多个div，数组集合 
	console.log(div); 
</script>

3.通过class方式找节点

<div class="d2"> HelloWorld </div>
<script>
	var d2 = document.getElementsByClassName("d2"); // 数据类型集合 
	console.log(d2); 
</script>

如何新增节点

通过innerHTML属性进行节点添加：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body><input type="text" name="" id="inps" value="" />&nbsp;&nbsp;<button onclick="comment()">评论</button>
		<p id="p1"></p>
	</body>
	<script>
		function comment() {
			var inps = document.getElementById("inps");
			var cont = inps.value; // 打点获取属性值 
			var p1 = document.getElementById("p1"); 
			p1.innerHTML += cont; 
			 } 
	</script>
</html>

通过appendChild函数，进行节点添加：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body><input type="text" name="" id="inps" value="" />&nbsp;&nbsp;<button onclick="comment()">评论</button>
		<p id="p1"></p>
	</body>
	<script type="text/javascript">
		function comment() {
			var inps = document.getElementById("inps");
			var cont = inps.value;
			var div = document.createElement("div"); // 创建新节点 
			div.innerHTML = cont; // 添加内容
			var p1 = document.getElementById("p1");
			p1.appendChild(div); // 添加新节点 
			} 
	</script>
</html>

每次输出节点内容都会使用新的div区域，所以形成了隔行的效果。

如何删除节点

使用removeChild函数进行节点删除：

<!-- 通过找到父节点，在找到子节点，然后删除 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="p1">Hello world<button onclick="del()">删除</button></p>
	</body>
	<script>
		function del() {
			var parent = document.getElementsByTagName("body");
			var child1 = document.getElementById("p1");
			console.log(parent);
			console.log(child1);
			console.log(parent[0]);
			parent[0].removeChild(child1);
		}
	</script>
</html>

通过父节点调用函数来删除子节点

如何改变节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1"></div> <button onclick="changeDiv()">改变节点</button>
	</body>
	<script>
		function changeDiv() {
			var d1 = document.getElementById("d1"); // 了解改变样式
			d1.style.width = "200px"; d1.style.height = "150px"; d1.style.backgroundColor = "#27F9A6"; d1.setAttribute("title", "改变div的样式"); d1.innerHTML = "xxxxx"; } 
	</script>
</html>