学习python的第十七天

最新推荐文章于 2024-11-14 16:23:37 发布

lx_59_59

最新推荐文章于 2024-11-14 16:23:37 发布

阅读量101

点赞数

文章标签：学习 javascript 前端 html python

本文链接：https://blog.csdn.net/qq_57257042/article/details/125771274

版权

这篇博客介绍了JavaScript中对DOM元素的操作，包括通过ID、类名和标签获取节点，获取和设置节点内容及属性，添加和删除节点。此外，还讲解了如何使用JavaScript进行浏览器操作，如打开和关闭窗口，页面滚动等。

摘要由CSDN通过智能技术生成

DOM操作获取节点

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','pink','gray']
			for(x in p2){
				p2[x].style = `color:${colors[x]};`
			}
			
			div1 = document.getElementById('p1').parentElement
		</script>
	</body>
</html>

DOM操作添加节点

1. 创建新的节点

document.createElement(标签名)

2.添加节点

节点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</sapn>')
		</script>
		
		<div id="div1">
			<p id="p1">段落</p>
		</div>

		<script>
			document.write('<span>aaaa</sapn>')
		</script>
		
		<script>
			a = document.createElement('a')
			p = document.getElementById('p1')
			document.getElementById('div1')
			.insertBefore(a,p)
		</script>
	</body>
</html>

DOM操作删除节点

remove():删除节点
节点.remove()

<!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>
		p1 = document.getElementById('p1')
		p1.remove()
		
		p = document.getElementsByTagName('p')
		console.log(p)
		p[1].remove
	</script>
</html>

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a>百度<b>一下</b></a>
		
		<script>
			a1 = document.getElementsByTagName('a')
			// a1[0].innerText = 'HTML'
			// a1[0].innerText = 'HTML<b>CSS</b>'
			a1[0].innerHTML = 'HTML<b>CSS</b>'
			
			a1[0].href = 'https://www.baidu.com'
			a1[0].target = '_blank'
			console.log(a1[0])
			a1[0].className = 'a2'
			
		</script>
	</body>
</html>

js操作浏览器

打开浏览器新标签页或窗口：window.open()
关闭浏览器新标签页或窗口：window.close()
页面滚动：window.scrollTo(x,y)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 打开浏览器新标签页：window.open()
			function openwindow1(){
				w1 = window.open('https://www.baidu.com')
			}
			// 关闭浏览器新标签页
			function close1(){
				w1.close()
			}
			// 打开新的窗口
			function openwindow2(){
				w2 = window.open('https://www.baidu.com','_blank','width:400,height:500')
				w2.moveTo(500,200)
			}
			// 关闭新窗口
			function close2(){
				w2.close()
			}
			// 关闭当前窗口
			function close3(){
				window.close()
			}
			// 页面滚动
			function to_bottom(){
				// window.scrollTo(x,y)
				y = 0
				y_max = 5000
				while(y<=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>