• JavaScript操作BOM和DOM

    目录

    JavaScript组成

    BOM操作

    浏览器对象模型

     JavaScript 弹窗

     window.location 对象

     DOM操作

    获取HTML元素

    HTML DOM - 改变 HTML

     HTML DOM - 改变 CSS

    JavaScript 计时事件 

    JavaScript组成

    ECMAScript是一种语法标准

            语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象 

    编码遵循ECMAScript标准

    BOM操作

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

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

    浏览器对象模型

    对象名称

    说明

    window

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

    screen

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

    navigator

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

    history

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

    location

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

    JavaScript 计时事件

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

    localStorage

    SessionStorage

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

     JavaScript 弹窗

    弹窗

    语法

    说明

     警告框

    window.alert()

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

    确认框

    window.confirm()

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

    提示框

    window.prompt()

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

    alert()方法：语法：alert("需要弹出的文本信息") 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			alert('欢迎你');
    10. 		script>
    11. 	body>
    12. html>

    confirm()方法：语法：confirm("对话框中显示的纯文本")

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="deleteDate()">删除button>
    9. 		<script>
    10. 			function deleteDate(){
    11. 				/*
    12. 					confirm()弹出一个带有确定按钮和取消按钮的对话框，点击确定按钮返回true，点击取消按钮返回false
    13. 					我们可以根据返回的true或者false来执行不同的操作
    14. 				*/
    15. 				var result =confirm('确认删除吗？');
    16. 				console.log(result);
    17. 				if(result){
    18. 					console.log("数据删除成功");
    19. 				}else{
    20. 					console.log("你取消了删除操作");
    21. 				}
    22. 			}
    23. 	
    24. 		script>
    25. 	body>
    26. html>

    prompt()方法:语法：prompt(msg（要在对话框中显示的纯文本）,defaultText（默认的输入文本）)

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			//prompt():从页面中输入数据，得到的数据类型是string类型，你不输入数据，直接点击确定按钮，得到的内容是空内容，类型还是string,如果你点击取消按钮，得到的数据是null，数据类型是object
    10. 			
    11. 			// var age = prompt();
    12. 			//弹出输入框，输入框有提示信息
    13. 			// var age = prompt("请输入你的年龄：");
    14. 			//弹出输入框，输入框有提示信息和默认值
    15. 			var age = prompt("请输入你的年龄：",18);
    16. 			console.log(age);
    17. 			console.log(typeof age);
    18. 		script>
    19. 	body>
    20. html>

     window.location 对象

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

    语法

                    说明

    location.href

    返回当前页面的 URL

    location.pathname

    返回 URL 的路径名

    location.assign()

    加载新的文档

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="newPath()">加载新的文档button>
    9. 		<script>
    10. 			console.log(location.href);
    11. 			console.log(location.pathname);
    12. 			
    13. 			function newPath(){
    14. 				location.assign("https://www.baidu.com/");
    15. 			}
    16. 			
    17. 			
    18. 		script>
    19. 	body>
    20. html>

     DOM操作

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

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

    获取HTML元素

    语法

                           说明

    document.getElementById

    通过id属性获取对象

    document.getElementsByTagName

    通过标签名获取对象

    document.getElementsByClassName

    通过class属性获取对象

    getElementById("id属性值")：通过id属性值来获取元素，因为id具有唯一性，所以通过此函数获取的元素只有一个

    getElementsByTagName("标签名")：通过标签名称来获取元素，因为一个页面中可能有多个同名的标签，所以此函数将获取来的元素放在一个类似于数组的集合中（HTMLCollection）

    getElementsByClassName("class属性值")：通过class属性值来获取元素，因为class属性值可以被不同的标签重复使用，所以此函数获取的元素可能有多个，将获取的元素放在一个类似数组的集合中（HTMLCollection）

    querySelector("#id属性值/.class属性值/标签名")：此函数只获取页面中满足要求的第一个元素

    querySelectorAll(".class属性值/标签名")：因为class属性值可以被不同的标签使用/一个页面中可以有多个同名的标签，此函数获取的元素可能会有多个，此函数会将获取的元素存放在一个类似数组的节点结合中（NodeList）

            注意：使用getElementsByTagName("标签名")/getElementsByClassName("class属性值")/querySelectorAll("标签名/.属性值")获取元素，哪怕只有一个元素满足条件，也会将获取的这一个元素放入类似数组的集合（HTMLCollection）或者节点集合（NodeList）中

            在CSS中和JS中，如果你要操作HTML元素，第一步要做的事情都是找到这个元素，CSS中是通过选择器来找，JS中是通过上述函数来找 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 		<h2 class="demo">我是2级标题标签1h2>
    10. 		<h2>我是2级标题标签2h2>
    11. 		<p class="demo">我是段落标签1p>
    12. 		<p>我是段落标签2p>
    13. 		<p id="test">我是段落标签3p>
    14. 		<ul>
    15. 			<li>列表项第1项li>
    16. 			<li class="demo">列表项第2项li>
    17. 			<li>列表项第3项li>
    18. 			<li>列表项第4项li>
    19. 			<li>列表项第5项li>
    20. 		ul>
    21. 		<h3>我是3级标题标签h3>
    22. 	body>
    23. 	
    24. 	<script>
    25. 		//获取HTML元素
    26. 		//getElementById("id属性值")：通过id属性值来获取元素，因为id具有唯一性，所以通过此函数获取的元素只有一个
    27. 		var idTestEle=document.getElementById('test');
    28. 		console.log(idTestEle);
    29. 		
    30. 		//getElementsByTagName("标签名")：通过标签名称来获取元素，因为一个页面中可能有多个同名的标签，所以此函数将获取来的元素放在一个类似于数组的集合中（HTMLCollection）
    31. 		var pEles =document.getElementsByTagName("p");
    32. 		console.log(pEles);
    33. 		console.log(pEles[1]);
    34. 		console.log("-----------------------");
    35. 		//输出所有的p元素
    36. 		for(var i =0;ilength;i++){
    37. 			console.log(pEles[i]);
    38. 		}
    39. 		
    40. 		console.log("-----------------------");
    41. 		
    42. 		//getElementsByClassName("class属性值")：通过class属性值来获取元素，因为class属性值可以被不同的标签重复使用，所以此函数获取的元素可能有多个，将获取的元素放在一个类似数组的集合中（HTMLCollection）
    43. 		var classDemoEles=document.getElementsByClassName("demo");
    44. 		console.log(classDemoEles);
    45. 		//获取里面第1个元素
    46. 		console.log(classDemoEles[0]);
    47. 		console.log('元素个数：'+classDemoEles.length);
    48. 		//for-in循环遍历所有的元素
    49. 		for(var i in classDemoEles){
    50. 			if(i<3){
    51. 				console.log(classDemoEles[i]);
    52. 			}
    53. 			
    54. 		}
    55. 		
    56. 		console.log("------------------------------------------------------");
    57. 		
    58. 		//querySelector("#id属性值/.class属性值/标签名");此函数只获取页面中满足要求的第一个元素
    59. 		var testIdEle=document.querySelector("#test");
    60. 		console.log(testIdEle);
    61. 		
    62. 		var demoClassEle=document.querySelector(".demo");
    63. 		console.log(demoClassEle);
    64. 		
    65. 		var liEle =document.querySelector('li');
    66. 		console.log(liEle);
    67. 		
    68. 		console.log("------------------------------------------------------");
    69. 		
    70. 		//querySelectorAll(".class属性值/标签名");因为class属性值可以被不同的标签使用/一个页面中可以有多个同名的标签，此函数获取的元素可能会有多个，此函数会将获取的元素存放在一个类似数组的节点结合中（NodeList）
    71. 		var demoClassElements=document.querySelectorAll('.demo');
    72. 		console.log(demoClassElements);
    73. 		
    74. 		var liElements =document.querySelectorAll('li');
    75. 		console.log(liElements);
    76. 		for(var i =0;ilength;i++){
    77. 			console.log(liElements[i]);
    78. 		}
    79. 		
    80. 		//注意：使用getElementsByTagName("标签名")/getElementsByClassName("class属性值")/querySelectorAll("标签名/.属性值")获取元素，哪怕只有一个元素满足条件，也会将获取的这一个元素放入类似数组的集合（HTMLCollection）或者节点集合（NodeList）中
    81. 		var h3Eles=document.querySelectorAll("h3");
    82. 		console.log(h3Eles);
    83. 		var h3Elements = document.getElementsByTagName('h3');
    84. 		console.log(h3Elements);
    85. 		
    86. 		//总结：在CSS中和JS中，如果你要操作HTML元素，第一步要做的事情都是找到这个元素，CSS中是通过选择器来找，JS中是通过上述函数来找
    87. 		
    88. 	script>
    89. html>

    HTML DOM - 改变 HTML

    语法

                    说明

    document.write()

    改变 HTML 输出流

     对象.innerHTML=新的 HTML

    改变 HTML 内容

    对象.attribute=新属性值

    改变 HTML 属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		
    9. 	body>
    10. 	<script>
    11. 		document.write('大湖名城，创新高地');
    12. 		document.write('
      中国·合肥
      '      );
    13. 		document.write('百度一下');
    14. 	script>
    15. html>
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<h2>大湖名城，创新高地h2>
    9. 		<p>我是段落标签p>
    10. 		<button onclick="addEle()">点我一下button>
    11. 	body>
    12. 	<script>
    13. 		//注意：如果页面中的HTML元素已经加载完毕之后，你再通过JS里的write()改变HTML，那么输出的元素会覆盖之前加载完毕的HTML元素
    14. 		function addEle(){
    15. 			document.write('中国·合肥，科教城市');
    16. 		}
    17. 		
    18. 	script>
    19. html>

    对象.innerHTML：获取对象中的元素（标签和内容一起）

    对象.innerText：获取对象中的内容（标签不获取）

    注意：
                使用innerHTML向元素中插入内容，内容中包含标签的时候，浏览器会将标签进行解析
                使用innerText向元素中插入内容，内容中包含标签的时候，浏览器不会对标签进行解析，将标签当做文本直接输出

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<ul>
    9. 			<li>1111li>
    10. 			<li>2222li>
    11. 			<li>3333li>
    12. 		ul>
    13. 	body>
    14. 	<script>
    15. 		//获取ul元素
    16. 		var ulEle =document.querySelector('ul');
    17. 		console.log(ulEle);
    18. 		
    19. 		//对象.innerHTML：获取对象中的元素（标签和内容一起）
    20. 		var result1=ulEle.innerHTML;
    21. 		console.log(result1);
    22. 		
    23. 		//对象.innerText：获取对象中的内容（标签不获取）
    24. 		var result2=ulEle.innerText;
    25. 		console.log(result2);
    26. 		
    27. 	script>
    28. html>

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			div{
    8. 				width: 300px;
    9. 				height: 200px;
    10. 				background-color: #ccc;
    11. 				margin: 20px;
    12. 			}
    13. 			
    14. 		style>
    15. 	head>
    16. 	<body>
    17. 		<div>div>
    18. 		<div>div>
    19. 	body>
    20. 	<script>
    21. 		//获取两个div元素
    22. 		var divEles = document.querySelectorAll('div');
    23. 		
    24. 		//使用对象.innerHTML向第一个div元素中添加内容
    25. 		divEles[0].innerHTML = '
      大湖名城，创新高地
      '      ;
    26. 		
    27. 		//使用对象.innerText向第二个div元素中添加内容
    28. 		divEles[1].innerText = '
      大湖名城，创新高地
      '      ;
    29. 		
    30. 		/*
    31. 		注意：
    32. 			使用innerHTML向元素中插入内容，内容中包含标签的时候，浏览器会将标签进行解析
    33. 			使用innerText向元素中插入内容，内容中包含标签的时候，浏览器不会对标签进行解析，将标签当做文本直接输出
    34. 		*/
    35. 	script>
    36. html>
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<img src="img/car.jpg" width="300px"/>
    9. 	body>
    10. 	
    11. 	<script>
    12. 		//第一步：获取img标签
    13. 		var imgEle =document.querySelector('img');
    14. 		
    15. 		console.log(imgEle);
    16. 		var srcAttr =  imgEle.src;
    17. 		console.log(srcAttr)//http://127.0.0.1:8848/Day09BOM%E5%92%8CDOM/img/car.jpg
    18. 		//获取图像的名称
    19. 		//1、从后面开始往前查找图像路径中的/位置
    20. 		var index =srcAttr.lastIndexOf('/');
    21. 		//2.从srcAttr这个字符串中截取你想要的内容，从index+1的位置开始截取,截取到最后位置
    22. 		var imgName =srcAttr.substring(index+1);
    23. 		console.log(imgName);
    24. 		
    25. 		//将上面图像换成另外一张图片
    26. 		imgEle.src = 'img/runCar.jpg';
    27. 		
    28. 	script>
    29. html>

     HTML DOM - 改变 CSS

    语法

                                       说明

    对象.style.property=新样式

    通过id属性获取对象

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<p>我是一个段落标签p>
    9. 		<button onclick="changePeleStyle()">改变p标签的样式button>
    10. 	body>
    11. 	
    12. 	<script>
    13. 		//定义函数changePeleStyle
    14. 		function changePeleStyle(){
    15. 			//第一步：获取p元素
    16. 			var pEle = document.querySelector('p');
    17. 			//第二步：对p元素设置样式
    18. 			pEle.style.fontSize = '40px';
    19. 			pEle.style.color = '#f00';
    20. 			pEle.style.backgroundColor='#ccc';
    21. 			pEle.style.width = '400px';
    22. 			pEle.style.height = '100px';	
    23. 			
    24. 		}
    25. 		
    26. 	script>
    27. html>

    JavaScript 计时事件 

    语法

    说明

    setInterval()

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

    clearInterval()

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

    setTimeout()

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

    clearTimeout()

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

    setInterval()方法：语法：setInterval("调用的函数",间隔的毫秒数)

    clearInterval()方法：语法：clearInterval(setInterval()返回的ID值)

    setTimeout()方法：语法：setTimeout("调用的函数",等待的毫秒数)

    clearTimeout()方法：语法：clearTimeout(setTimeOut()返回的ID值)

            clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="showAlert()">你点我一下button>
    9. 		<button onclick="stopAlert()">停止button>
    10. 		
    11. 		<button onclick="showOneAlert()">你也点我一下button>
    12. 		<button onclick="stopOneAlert()">停止一次弹出button>
    13. 	body>
    14. 	
    15. 	<script>
    16. 		//点击“你点我一下”按钮，执行showAlert()函数，该函数中包含一个计时器，这个计时器实现每隔3秒种弹出一次警告窗
    17. 		var interVal;
    18. 		var timeOut;
    19. 		
    20. 		function showAlert(){
    21. 			interVal=setInterval(function(){
    22. 				alert('你点我干什么？')
    23. 			},3000);
    24. 		}
    25. 		
    26. 		//点击“停止”按钮，将第一个按钮里的操作停止
    27. 		function stopAlert(){
    28. 			clearInterval(interVal)
    29. 		}
    30. 		
    31. 		//点击“你也点我一下”按钮，执行showOneAlert()函数，该函数中包含一个计时器，这个计时器实现在指定毫秒数后弹出一个警告窗，警告窗只弹出1次
    32. 		function showOneAlert(){
    33. 			timeOut=setTimeout(function(){
    34. 				alert('我弹出来了，我只弹出1次');
    35. 			},4000);
    36. 		}
    37. 		
    38. 		//点击“停止一次弹出”按钮，将第二个计时器实现的效果停止
    39. 		function stopOneAlert(){
    40. 			clearTimeout(timeOut);
    41. 		}
    42. 		
    43. 	script>
    44. html>

    setInterval()与setTimeout特点及区别

    特点

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

    区别

            setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式

  • 相关阅读:
    《从0开始写一个微内核操作系统》6-GIC中断
    YARN 应用提交过程
    MongoDB使用及命令大全(一）
    ZooKeeper(一)——基础知识
    13、Python -- while 循环、嵌套循环
    day02 spring-ioc
    keepalived高可用，nginx+keepalived+apache架构的实现
    python解析word拆分Excel选择题格式(3、判断题)
    代码随想录训练营第25天|LeetCode 216.组合总和III、17.电话号码的字母组合
    7、android 高级控件（1）（下拉列表）
  • 原文地址：https://blog.csdn.net/qq_51810428/article/details/126951501