• 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>

  • 相关阅读:
    诚迈科技董事长王继平出席中国（太原）人工智能大会并发表演讲
    SpringSecurity源码学习五：跨域与跨站请求伪造
    工作分配问题——算法设计与分析（C实现）
    哪个版本的JVM最快？
    Centos 安装Java库的多种方式
    企业内部审核知识产权内部审核有哪些步骤？
    Java - @Transaction 异常不回滚
    深入区块链技术（一）
    Pycharm远程连接服务器不能debug问题
    【Essential C++学习笔记】第四章 基于对象的编程风格
  • 原文地址：https://blog.csdn.net/qq_69761234/article/details/126316809