JavaScript操作BOM&DOM

水沉草木

已于 2022-09-25 10:20:46 修改

阅读量155

点赞数

文章标签： javascript 前端 servlet

于 2022-08-15 10:13:41 首次发布

本文链接：https://blog.csdn.net/qq_69761234/article/details/126316809

版权

BOM：Browser Object Model（浏览器对象模型）

提供了独立于内容与浏览器窗口进行交互的对象

浏览器对象模型

对象名称	说明
window	窗口对象, 可以用来控制当前窗口, 或打开新的窗口
screen	屏幕对象, 获取屏幕相关信息
navigator	浏览器对象, 通过这个对象可以判定用户所使用的浏览器
history	历史对象, 可以用来前进或后退一个页面
location	地址对象, 可以用来获取当前URL的信息
JavaScript 计时事件	在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
localStorage SessionStorage	存储对象, 可以用来存储数据, 和cookie相似, 区别是它是为了更大容量存储设计的, 在使用上也更加方便

JavaScript 弹窗

弹窗	语法	说明
警告框	window.alert()	用于确保用户可以得到某些信息
确认框	window.confirm()	用于验证是否接受用户操作
提示框	window.prompt()	用于提示用户在进入页面前输入某个值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function closeWindow(){
				window.close();
			}
			
			function openBaiDu(){
				window.open("http://www.baidu.com","_self");
			}

			function closeWindow(){
				window.close();
			}

			function openBaiDu(){
				window.open("http://www.baidu.com","_blank");
			}

			var r=confirm("按下按钮!");
				if (r==true){
					alert("你按下了【确定】按钮!");
				}else{
					alert("你按下了【取消】按钮!");
				}

			var result=prompt("请输入用户名");
			alert(result);		
		</script>
	</head>
	<body>
		<button onclick="closeWindow()">关闭窗口</button>
		<button onclick="openBaiDu()">打开百度</button>
	</body>
</html>

window.location 对象：用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

语法	说明
location.href	返回当前页面的 URL
location.pathname	返回 URL 的路径名
location.assign()	加载新的文档

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <script>
        //获取href
        var href=location.href;
        alert(href);
    </script>
</body>
</html>

DOM：Document Object Model（文档对象模型）

是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

查找HTML元素

语法	说明
document.getElementById	通过id属性获取对象
document.getElementsByTagName	通过标签名获取对象
document.getElementsByClassName	通过class属性获取对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#test{
				color: #f00;
			}
			
		</style>
	</head>
	<body>
		<h2 id="test">二级标题标签</h2>
		<h3 class="demo">三级标题标签</h3>
		<p>段落标签1</p>
		<p class="demo">段落标签2</p>
		<ul>
			<li>无序列表第1项</li>
			<li class="demo">无序列表第2项</li>
			<li>无序列表第3项</li>
			<li>无序列表第4项</li>
		</ul>
	</body>
	
	<script>
		// 获取id属性值为test的元素
		//id属性具有唯一性，所以通过getElementById("id属性值")获取的元素只有一个
		var ele =document.getElementById("test");
		console.log(ele);
		
		varele=document.getElementById("test");
		//通过标签名称来获取元素:可能获取多个元素，多个元素存储在类似数组的集合中
		var pEles=document.getElementsByTagName("p");
		console.log(pEles);
		console.log(pEles[0]);
		console.log(pEles[1]);
		pEles[1].style.color = "#f00";
		
		//通过class属性来获取元素:因为多个标签可以重复使用class属性，所以获取的元素可能有一个或者多个，都会存储到类似数组的集合中
		var eles=document.getElementsByClassName("demo");
		console.log(eles);
		console.log(eles[2]);
		eles[2].style.color = "#00f";
		
	</script>
</html>

补充：

document.querySelector：用于接收一个CSS选择符，返回与该模式匹配的第一个元素

document.querySelectorAll：用于选择匹配到的所有元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2 id="test"></h2>
		<h3 class="demo"></h3>
		<ul>
			<li>无序列表第1项</li>
			<li class="demo">无序列表第2项</li>
			<li>无序列表第3项</li>
			<li>无序列表第4项</li>
			<li>无序列表第5项</li>
		</ul>
	</body>
	<script>
		var liEle=document.querySelector("li");
		console.log(liEle);
		
		var liEles = document.querySelectorAll("li");
		console.log(liEles);
		console.log(liEles[1]);
		
		var ele =document.querySelector("#test");
		console.log(ele);
		var eles = document.querySelector(".demo");
		console.log(eles);
		
		var demoEles =document.querySelectorAll(".demo");
		console.log(demoEles);
	</script>
</html>

HTML DOM - 改变 HTML

语法	说明
document.write()	改变 HTML 输出流
对象.innerHTML=新的 HTML	改变 HTML 内容
对象.attribute=新属性值	改变 HTML 属性

HTML DOM - 改变 CSS

语法	说明
对象.style.property=新样式	通过id属性获取对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<p>点击按钮修改我的样式</p>
		<div>qwert</div>
		<button onclick="changeStyle()">修改段落标签的样式</button>
		<button onclick="hideDiv()">隐藏div</button>
	</body>
	<script>
		function changeStyle(){
			var pElement=document.querySelector("p");
			//给获取的p标签设置样式
			pElement.style.color = "#f00";
			pElement.style.fontSize="40px";
			pElement.style.textDecoration = "underline";
		}
		
		function hideDiv(){
			var divElement = document.querySelector("div");
			divElement.style.display = "none";
		}
		
	</script>
</html>

JavaScript 计时事件

语法	说明
setInterval()	间隔指定的毫秒数不停地执行指定的代码
clearInterval()	用于停止 setInterval() 方法执行的函数代码
setTimeout()	暂停指定的毫秒数后执行指定的代码
clearTimeout()	用于停止执行setTimeout()方法的函数代码

setInterval()与setTimeout特点及区别

特点

setInterval()和setTimeout()用来处理延时和定时任务

区别

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，

setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="stop()">停止弹出</button>
	</body>
	<script>
		// setInterval(要执行的函数代码,间隔时间)
		var demo=setInterval(function start(){
			alert("我弹出来了");
		},3000);
				
		//clearInterval(间隔执行函数代码的返回值)：停止执行即使计时函数
		function stop(){
			clearInterval(demo);
		}			
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="stop()">停止弹出</button>
		<script>
			var demo =setTimeout(function(){
				alert("我弹出来了");
			},3000)
			
			function stop(){
				//停止弹出
				clearTimeout(demo)
			}
		</script>
	</body>
</html>