• JavaScript操作BOM&DOM

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

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

    浏览器对象模型

    对象名称

    说明

    window

    窗口对象, 可以用来控制当前窗口, 或打开新的窗口

    screen

    屏幕对象, 获取屏幕相关信息

    navigator

    浏览器对象, 通过这个对象可以判定用户所使用的浏览器

    history

    历史对象, 可以用来前进或后退一个页面

    location

    地址对象, 可以用来获取当前URL的信息

    JavaScript 计时事件

    在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

    localStorage

    SessionStorage

    存储对象, 可以用来存储数据, 和cookie相似, 区别是它是为了更大容量存储设计的, 在使用上也更加方便

     JavaScript 弹窗 

    弹窗

    语法

    说明

     警告框

    window.alert()

    用于确保用户可以得到某些信息

    确认框

    window.confirm()

    用于验证是否接受用户操作

    提示框

    window.prompt()

    用于提示用户在进入页面前输入某个值

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script>
    7. 			function closeWindow(){
    8. 				window.close();
    9. 			}
    10. 			
    11. 			function openBaiDu(){
    12. 				window.open("http://www.baidu.com","_self");
    13. 			}
    14.  
    15. 			function closeWindow(){
    16. 				window.close();
    17. 			}
    18.  
    19. 			function openBaiDu(){
    20. 				window.open("http://www.baidu.com","_blank");
    21. 			}
    22.  
    23. 			var r=confirm("按下按钮!");
    24. 				if (r==true){
    25. 					alert("你按下了【确定】按钮!");
    26. 				}else{
    27. 					alert("你按下了【取消】按钮!");
    28. 				}
    29.  
    30. 			var result=prompt("请输入用户名");
    31. 			alert(result);		
    32. 		script>
    33. 	head>
    34. 	<body>
    35. 		<button onclick="closeWindow()">关闭窗口button>
    36. 		<button onclick="openBaiDu()">打开百度button>
    37. 	body>
    38. html>

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

    语法

    说明

    location.href

    返回当前页面的 URL

    location.pathname

    返回 URL 的路径名

    location.assign()

    加载新的文档

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>Documenttitle>
    5. head>
    6. <body>
    7.     <script>
    8.         //获取href
    9.         var href=location.href;
    10.         alert(href);
    11.     script>
    12. body>
    13. html>

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

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

    查找HTML元素 

    语法

    说明

    document.getElementById

    通过id属性获取对象

    document.getElementsByTagName

    通过标签名获取对象

    document.getElementsByClassName

    通过class属性获取对象

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			#test{
    8. 				color: #f00;
    9. 			}
    10. 			
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<h2 id="test">二级标题标签h2>
    15. 		<h3 class="demo">三级标题标签h3>
    16. 		<p>段落标签1p>
    17. 		<p class="demo">段落标签2p>
    18. 		<ul>
    19. 			<li>无序列表第1项li>
    20. 			<li class="demo">无序列表第2项li>
    21. 			<li>无序列表第3项li>
    22. 			<li>无序列表第4项li>
    23. 		ul>
    24. 	body>
    25. 	
    26. 	<script>
    27. 		// 获取id属性值为test的元素
    28. 		//id属性具有唯一性，所以通过getElementById("id属性值")获取的元素只有一个
    29. 		var ele =document.getElementById("test");
    30. 		console.log(ele);
    31. 		
    32. 		varele=document.getElementById("test");
    33. 		//通过标签名称来获取元素:可能获取多个元素，多个元素存储在类似数组的集合中
    34. 		var pEles=document.getElementsByTagName("p");
    35. 		console.log(pEles);
    36. 		console.log(pEles[0]);
    37. 		console.log(pEles[1]);
    38. 		pEles[1].style.color = "#f00";
    39. 		
    40. 		//通过class属性来获取元素:因为多个标签可以重复使用class属性，所以获取的元素可能有一个或者多个，都会存储到类似数组的集合中
    41. 		var eles=document.getElementsByClassName("demo");
    42. 		console.log(eles);
    43. 		console.log(eles[2]);
    44. 		eles[2].style.color = "#00f";
    45. 		
    46. 	script>
    47. html>

    补充：

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h2 id="test">h2>
    9. 		<h3 class="demo">h3>
    10. 		<ul>
    11. 			<li>无序列表第1项li>
    12. 			<li class="demo">无序列表第2项li>
    13. 			<li>无序列表第3项li>
    14. 			<li>无序列表第4项li>
    15. 			<li>无序列表第5项li>
    16. 		ul>
    17. 	body>
    18. 	<script>
    19. 		var liEle=document.querySelector("li");
    20. 		console.log(liEle);
    21. 		
    22. 		var liEles = document.querySelectorAll("li");
    23. 		console.log(liEles);
    24. 		console.log(liEles[1]);
    25. 		
    26. 		var ele =document.querySelector("#test");
    27. 		console.log(ele);
    28. 		var eles = document.querySelector(".demo");
    29. 		console.log(eles);
    30. 		
    31. 		var demoEles =document.querySelectorAll(".demo");
    32. 		console.log(demoEles);
    33. 	script>
    34. html>

    HTML DOM - 改变 HTML

    语法

    说明

    document.write() 

    改变 HTML 输出流

     对象.innerHTML=新的 HTML

    改变 HTML 内容

    对象.attribute=新属性值

    改变 HTML 属性

    HTML DOM - 改变 CSS

    语法

    说明

    对象.style.property=新样式

    通过id属性获取对象

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			div{
    8. 				width: 200px;
    9. 				height: 200px;
    10. 				background-color: #ccc;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<p>点击按钮修改我的样式p>
    16. 		<div>qwertdiv>
    17. 		<button onclick="changeStyle()">修改段落标签的样式button>
    18. 		<button onclick="hideDiv()">隐藏divbutton>
    19. 	body>
    20. 	<script>
    21. 		function changeStyle(){
    22. 			var pElement=document.querySelector("p");
    23. 			//给获取的p标签设置样式
    24. 			pElement.style.color = "#f00";
    25. 			pElement.style.fontSize="40px";
    26. 			pElement.style.textDecoration = "underline";
    27. 		}
    28. 		
    29. 		function hideDiv(){
    30. 			var divElement = document.querySelector("div");
    31. 			divElement.style.display = "none";
    32. 		}
    33. 		
    34. 	script>
    35. html>

    JavaScript 计时事件

    语法

    说明

    setInterval() 

    间隔指定的毫秒数不停地执行指定的代码

    clearInterval()

    用于停止 setInterval() 方法执行的函数代码

    setTimeout()

    暂停指定的毫秒数后执行指定的代码

    clearTimeout() 

    用于停止执行setTimeout()方法的函数代码

     setInterval()与setTimeout特点及区别

     特点

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

    区别

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="stop()">停止弹出button>
    9. 	body>
    10. 	<script>
    11. 		// setInterval(要执行的函数代码,间隔时间)
    12. 		var demo=setInterval(function start(){
    13. 			alert("我弹出来了");
    14. 		},3000);
    15. 				
    16. 		//clearInterval(间隔执行函数代码的返回值)：停止执行即使计时函数
    17. 		function stop(){
    18. 			clearInterval(demo);
    19. 		}			
    20. 	script>
    21. html>
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="stop()">停止弹出button>
    9. 		<script>
    10. 			var demo =setTimeout(function(){
    11. 				alert("我弹出来了");
    12. 			},3000)
    13. 			
    14. 			function stop(){
    15. 				//停止弹出
    16. 				clearTimeout(demo)
    17. 			}
    18. 		script>
    19. 	body>
    20. html>

  • 相关阅读:
    unity 打包后程序能拓展并能一直显示在屏幕最前端
    web 概要(httpd2.2)
    解密Prompt系列15. LLM Agent之数据库应用设计：DIN & C3 & SQL-Palm & BIRD
    C //例6.8 输入一行字符，统计其中有多少个单词，单词之间用空格分隔开。
    Java设计模式——策略模式
    [vscode]使用cmake时将命令行参数传递给调试目标
    规划兼职工作
    C#学习 - 类型、变量、方法
    14：00面试，14：06就出来了，问的问题有点变态。。。
    【Flutter】 Flutter Material Design 3 组件使用示例 1 FAB/Icon button/Segmented button/Badge/Progress
  • 原文地址：https://blog.csdn.net/qq_69761234/article/details/126316809