学习 Python 的Day17,DOM操作

最新推荐文章于 2024-04-24 22:52:03 发布

KathAmy

最新推荐文章于 2024-04-24 22:52:03 发布

阅读量444

点赞数

分类专栏： HTML 文章标签： python html

本文链接：https://blog.csdn.net/qq_67780151/article/details/125768311

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Day17 DOM操作

1. DOM（document object model）操作

js提供了一个document，指向的是HTML，在js中通过document对象
可以直接或者间接获取页面内容对应的标签。

DOM操作具体内容 - 操作节点（节点就是标签）

直接获取节点

document.getElementById(id属性值) - 通过id属性值获取标签
document.getElementByClassName(class属性值)
document.getElementsByTagName(标签名)

获取父节点：节点.parentElement - 获取指定节点的父节点
获取子节点：节点.children - 获取指定节点的所有子节点。

节点.firstElementChild - 获取指定节点的第一个子节点。
节点.lastElementChild - 获取指定节点的最后一个子节点。

添加节点
删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">
			<p id="p1">段落</p>
		</div>
		<div id="box2">
			<a href="">百度</a>
			<p id="p2">段落</p>
		</div>
		<div id="box3">
			<p id="p3">段落</p>
		</div>

		<script type="text/javascript">
			p1 = document.getElementById('p1')
			console.log(p1)
			p1.style.color = 'red'
			p1.style = 'color:red;'
			
			p2 = document.getElementsByTagName('p')
			console.log(p2)
			
			colors = ['blue','green','pink']
			for(x in p2){
				p2[x].style = `color:${colors[x]};`
			}
			
			div1 = document.getElementById('p1').parentElement
			console.log(div1)
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

2. DOM操作添加节点

创建新的节点
document.createElement(标签名)
添加节点
节点1.appendChild(节点2) - 在节点1的最后添加节点2（节点1和节点2是父子）
节点1.insertBefore(节点2,节点3) - 在节点1中节点3的前边添加节点2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			document.write('<span>aaaa</span>')
		</script>
		
		<div id='div1'>
			<p>段落</p>
		</div>

		<script>
			// 直接向body标签添加子标签
			document.write('<span>aaaa</span>')
		</script>
		
		<script>
			// 在 p 标签前添加新标签
			a = document.createElement('a')
			p = document.getElementById('p1')
			div1 = document.getElementById('div1')
			.insertBefore(a,p)
		</script>
	</body>
</html>

3. DOM操作删除节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id='p1'>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
	</body>
	<script>
		//remove() - 删除节点
		// 节点.remove()
		p1 = document.getElementById('p1')
		p1.remove()
		
		p = document.getElementsByTagName('p')
		console.log(p)
		p[1].remove()
	</script>
	
</html>

5. DOM操作向节点中添加内容和属性

<!-- 
节点.innerText  --- 标签内部的文字（子标签也属于文字）
节点.innerHTML --- 标签内部的文字（包括子标签内部的文字）
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a class="a1">百度<b>一下</b></a>
		<script>
			a1 = document.getElementsByTagName('a')
			
			// a1[0].innerText='HTML'
			// a1[0].innerText='HTML <b>CSS</b>'
			// a1[0].innerHTML='HTML'
			a1[0].innerHTML = 'HTML<b>CSS</b>'
			
			// 节点.属性 = 属性值 --> 向节点内添加或修改属性
			a1[0].href = 'http://www.baidu.com'
			a1[0].target = '_blank'	
		</script>
	</body>
</html>

6. js操作浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 打开浏览器新标签页：window.open()
			function openwindow1(){
				w1 = window.open('http://www.baidu.com')
			}
			
			// 关闭刚打开的新标签页
			function close1(){
				w1.close()
			}
			
			// 打开新的窗口
			function openwindow2(){
				w2 = window.open('https://www.baidu.com','_blank','width=1200,height=800')
				// w2.moveTo(500,200)
			}
				
				
			function close2(){
				w2.close()
			}
			
			关闭当前窗口
			function close3(){
				window.close()
			}
			
			// 页面滚动（应用：瀑布式加载页面）
			function to_bottom(){
				// windows.scrollTo(x,y)
				y=0
				y_max=5000
				while(x <= y_max){
					y += 500
					window.scrollTo(0,y)
				}
			}
			
		</script>

		<input type="submit" value="打开新窗口" onclick="openwindow2()">
		<input type="submit" value="关闭新窗口" onclick="close2()">
		<br>
		<input type="submit" value="打开新标签页" onclick="openwindow1()">
		<input type="submit" value="关闭标签页" onclick="close1()">
		<br>
		<input type="submit" value="关闭当前窗口" onclick="close3()">
		<input type="submit" value="滚动到页面底部" onclick="to_bottom()">
		
		<div style="height:5000px;"></div>
		<p>页面底部</p>
	</body>
</html>