JS的DOM操作详解

最新推荐文章于 2023-10-01 13:21:02 发布

原创最新推荐文章于 2023-10-01 13:21:02 发布 · 440 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

DOM，全称Document Object Model，文档对象模型，是通过JS操作HTML元素的关键。

文章目录

DOM树

类似族谱图，h5页面中的元素也有层级关系，我们叫做DOM树，如下

所以元素之间也有几种关系

兄弟节点
父子节点
根节点

知道了这些关系就方便对元素进行查找，修改，添加和删除的操作了。

获取标签

不管要如何操作标签，首先必须要先获取到目的标签对象。DOM中的获取标签方法都是以document.getElement或者document.getElements开头。

修改index.html如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>				
	</head>
	<body>	
	<div id="div1"></div>
	<div class='div2'></div>
	<div class='div2'></div>
	<p>This is p</p>
	
	<script type="text/javascript">
		div1=document.getElementById('div1');
		div2=document.getElementsByClassName('div2');
		p=document.getElementsByTagName('p');
		// console.log(p);
	</script>
	</body>
</html>

这里就演示了三种，分别根据id，class和标签名来获取标签的方法。如果是id就只会返回单个对象，其余的都会返回标签集合。

获取和操作标签属性

首先来对标签的属性进行操作，注意不是css属性，而只是标签的属性。

方法一是利用点号，但是这只适用于官方的属性，所以不是很推荐；方法二是利用标签对象的getAttribute()方法，适用于自定义属性。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>				
	</head>
	<body>	
	<input type="text" name="inputbox" id="inputbox" value="" />
	
	<script type="text/javascript">
		inputbox=document.getElementById('inputbox');
		console.log(inputbox.getAttribute('type'));
		inputbox.setAttribute('placeholder','This is placeholder');
	</script>
	</body>
</html>

这里反别利用了getAttribute和setAttribute方法去获取和设置属性。

获取和修改文本节点

想要直观改变页面内容，修改页面中的文字是最直观的。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>				
	</head>
	<body>	
	<p>This is p</p>
	<button type="button" onclick="changeText()">Change!</button>
	<script type="text/javascript">
		var p=document.getElementsByTagName('p')[0];
		console.log(p.innerHTML);
		console.log(p.innerText);
		function changeText(){
			p.innerText='Life is awesome.'
		}
	</script>
	</body>
</html>

这里用两种方法获取了p标签的文本内容，innerHTML是把p标签内部连同样式也一起获取了，例如换行。而innerText只会获取纯文本内容，使用的较多，同时也方便使用纯文本进行赋值。

获取css样式表

标签的css可以是行内样式，可以是内部样式，也可以是外部样式。行内样式可以根据上面说的标签属性来获取，但是另外两种就不行了。所以获取css统一采用下面的方法来做。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>				
	</head>
	<style type="text/css">
		#box {
			background-color: beige;
			height: 200px;
			width: 600px;
			top: 20px;
			left: 20px;
		}
		p {
			text-align: center;
			line-height: 200px;
		}
	</style>
	<body>	
	<div id="box">
		<p>Change me!</p>
	</div>
	<button type="button" onclick="changeDiv()">Boom!</button>
	<script type="text/javascript">
		var box=document.getElementById('box');

		function changeDiv(){
			var h = window.getComputedStyle(box,null)['height'];
			var w = window.getComputedStyle(box,null)['width'];
			var bc = window.getComputedStyle(box,null)['background-color'];
			console.log(window.getComputedStyle(box,null))
			box.innerHTML="<p>Height: "+h+'; Width: '+w+'; Backgound-color: '+bc+'</p>';
		}
	</script>
	</body>
</html>

这里分别获取了div元素的高、宽以及背景色三个css属性，并且通过innterHTML方法点击按钮显示出来。通过打印window.getComputedStyle来看看有哪些css属性可以被操作，第二个参数是伪类，没有就放null即可。

这里不能用innerText来显示，不然p标签的css就没了

修改css样式表

修改css就可以直接用前面的修改标签属性来做了。

修改index.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			background-color: beige;
			height: 100px;
			width: 100px;
			top: 0px;
			left: 0px;
			position: relative;
		}
		p {
			text-align: center;
			line-height: 100px;
		}
	</style>
	<body>	
	<div id="box">
		<p>Move me!</p>
	</div>
	<button type="button" onclick="changeDiv()">Boom!</button>
	<button type="button" onclick="stopChangeDiv()">Stop!</button>
	<script type="text/javascript">
		var box=document.getElementById('box');
		var timer;
		function changeDiv(){
			var x=10;
			var y=10;
			timer = window.setInterval(()=>{
				var left=parseInt(window.getComputedStyle(box,null)['left']);
				var top=parseInt(window.getComputedStyle(box,null)['top']);
				box.style.left=left+x+'px';
				box.style.top=top+y+'px';
				console.log(left,x,top,y);
			},100)
		}
		
		function stopChangeDiv(){
			window.clearInterval(timer);
		}
	</script>
	</body>
</html>

页面有两个按钮，点击其中一个小方块会向右下方移动，点击另外一个小方块会停止移动。注意这里的parseInt方法是提取第一个数字到第一个非数字之间的内容，所以可以顺利去掉单位，但是赋值回去的时候要记得加上单位。通过改变left和top属性成功使得小方块移动。

这里用到了《JS的BOM操作详解》中的定时器操作

做为进阶练习，大家可以试着制作一个可以在浏览器内自由反弹的小方块，我会在下一篇博客分享我的代码给大家。

动态创建标签

在动态加载页面的时候就需要用到动态创建标签了。

修改index.html如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
		<title></title>				
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
	</style>
	<body>	
	<button type="button" onclick="change1()">Boom!</button>
	<button type="button" onclick="change2()">Boom!</button>
	<div id="box">
		<p>I am p1</p>
		<p>I am p2</p>
		<p>I am p3</p>
	</div>
	<script type="text/javascript">
		var box = document.getElementById('box');
		var p = box.getElementsByTagName('p');
		
		function change1(){
			var new_p = document.createElement('p');
			new_p.innerText='I am new P';
			new_p.style.backgroundColor='yellowgreen';
			box.appendChild(new_p);
		}
		function change2(){
			var new_p = document.createElement('p');
			new_p.innerText='I am new P';
			new_p.style.backgroundColor='yellowgreen';
			box.insertBefore(new_p,p[2])
		}
	</script>
	</body>
</html>