学习是我快乐第十七天

最新推荐文章于 2023-04-21 09:21:46 发布

Mr_suyi

最新推荐文章于 2023-04-21 09:21:46 发布

阅读量97

点赞数

分类专栏： HTML python 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/Mr_suyi/article/details/125767544

版权

python 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

Day 017

一、DOM操作获取节点

1.DOM（document object model）操作

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

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

a. 直接获取节点
document.getElementById（id属性值）-通过id属性值获取标签
document.getElementByClassName（classs属性值）
document.getElementsByTagName（classs属性值）

b. 获取父节点：节点.parentElement - 获取指定节点的父节点。

c. 获取子节点：

节点.children - 获取指定节点的所有子节点。
节点.firstElementChildren - 获取指定节点的第一个子节点。
节点.lastElementChildren - 获取指定节点的最后一个子节点。

d. 添加节点

例：


<!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">
			// 通过id取节点
			p1=document.getElementById('p1')
			console.log(p1)
			// 颜色写法1
			p1.style.color = 'red'
			
			// 颜色写法2
			// p1.style = 'color:red;'
			
			// 通过标签获取节点
			p2 = document.getElementsByTagName('p')
			console.log(p2)
			
			// 通过for 循环更改颜色
			colors = ['blue','green','pink']
			for(x in p2){
				// p2[x].style.color=colors[x]
				 p2[x].style = `color : ${colors[x]};`
				
			}
			
			// 获取父节点法：
			div1 = document.getElementById('p1').parentElement
			console.log(div1)
		</script>
		
	</body>
</html>

二、DOM操作删除节点

.1.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>
		
		<script>
			//remove()删除节点
			//节点.remove()
			p1 = document.getElementById('p1')
			p1.remove()
			// 取出页面所有p标签 进行打印根据下标删除对应的段落
			p = document.getElementsByTagName('p')
			console.log(p)
			p[1].remove()
		</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>
			// script 也为一个标签，遵循标签的先后顺序
			document.write('<span>aaa</span>')
		</script>
		
		<div id='div1'>
			<p p = 'p1'>段落</p>
		</div>
		
		<script>
			// 直接向body标签添加子标签
			document.write('<span>aaa</span>')
		</script>
		
		<script>
			// 向p标签前添加新标签
			
			a = document.createElement('a')
			
			p = document.getElementById('p1')
			
			div1 = document.getElementById('div1').insertBefore(a,p)
		</script>
	</body>
</html>

四、04-DOM操作节点中添加内容和属性

1.节点.innerText — 标签内部的文字（子标签也属于文字）

2. 节点.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'
			a1[0].innerHTML='HTML<b>CSS</b>'
			// 节点.属性=属性值  ---- 向节点内添加或者修改属性
			a1[0].href = 'https://www.baidu.com'
			a1[0].target='_blank'
			
			a1[0].className='a2'
		</script>
	</body>
</html>

五、JavaScript操作浏览器

1.操作在浏览器中用打开新的窗口

打开窗口：window.open
关闭窗口：w1.close
移动窗口位置：.moveTo(x,y）

例：创建一个新的窗口并且可针对瀑布式加载进行滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 打开浏览器新标签页
			function openwindow1(){
				w1=window.open('https://www.baidu.com')
			}
			
			// 关闭刚打开的新标签页
			function close1(){
				w1.close()
			}
			
			// 打开新的窗口
			function openwindow2(){
				w2 = window.open('https://www.baidu.com','_blank','width=1920,height=1080')
				//w2.moveTo(500,200)
			}
			// 关闭新的窗口
			function close2(){
				w2 = window.open('https://www.baidu.com','_blank','width=1920,height=1080')
				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>