• ✿✿✿JavaScript --- BOM、DOM对象

    目  录

    一、BOM浏览器对象模型

    1.Window窗口对象

    (1)与弹出有关的方法

    (2)与定时器有关的方法

    (3)与打开关闭有关的方法

    (4) 获取其他对象的属性

    2.Location地址栏对象 

    3.History历史记录对象

    二、DOM文档对象模型

    1.Document文档对象

    (1)获取Element对象

    (2)创建其他对象

     2.标签对象的属性

    创建删除DOM元素案例：

    一、BOM浏览器对象模型

    BOM（Browser Object Model） 浏览器对象模型。也就是将浏览器的各个组成部分封装为对象。主要特点就是BOM对象不能由我们程序员自己创建，当文档加载进内存，浏览器自动创建。BOM中常见的对象如下:

    1.Window窗口对象

    使用方式： window.方法名();   或   方法名();（ window 可以省略）。 该对象常用到的方法如下：

    (1)与弹出有关的方法

    • alert()                                                 显示带有一段消息和一个确认按钮的警告框。
    • confirm()                                            显示带有一段消息以及确认按钮和取消按钮的对话框。 
    • prompt()                                             显示可提示用户输入的对话框。 

    (2)与定时器有关的方法

    • setInterval()                                        按照指定的周期（以毫秒计）来调用函数或计算表达式。 循环执行
    • clearInterval()                                     取消由 setInterval() 设置的 timeout。  
    • setTimeout()                                       在指定的毫秒数后调用函数或计算表达式。 只执行一次
    • clearTimeout()                                    取消由 setTimeout() 方法设置的 timeout。 

    (3)与打开关闭有关的方法

    • open()                                                 打开新窗口。参数：打开目标的URL。返回值：返回新打开窗口的window引用
    • close()                                                 关闭窗口。注：谁调用我 ， 我关谁

    (4) 获取其他对象的属性

    • history                                                 对 History 对象的只读引用。请参数 History 对象。 
    • location                                               用于窗口或框架的 Location 对象。请参阅 Location 对象。 
    • Navigator                                            对 Navigator 对象的只读引用。请参数 Navigator 对象。 
    • Screen                                                对 Screen 对象的只读引用。请参数 Screen 对象。 
    • document                                            对 Document 对象的只读引用。请参阅 Document 对象。 

    2.Location地址栏对象 

    获取方式：可以用window对象中的属性获取。常用的属性 ---->  href：设置或获取当前的URL。

    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<title>title>
    5. 		<script>
    6. 			function intoPage() {
    7. 				//window.open()
    8. 				if (confirm("你即将跳转到外部网站，确认吗？")) {
    9. 					//window.open()
    10. 					location.href = "http://www.163.com"
    11. 				}
    12. 			}
    13. 		script>
    14. 	head>
    15. 	<body>
    16. 		<a href="http://www.163.com">进入网易a>
    17. 		<button onclick="intoPage()">进入页面button>
    18. 		<a href="index.html?username=zhangsan&password=123456">进入首页a>
    19. 		<button onclick="location.reload()">刷新页面button>
    20.  
    21. 	body>
    22. html>
    23.

    3.History历史记录对象

    获取方式：可以用window对象中的属性获取。 常用的方法：go()；注：1表示前进，-1表示后退。

    补：Navigator浏览器对象。以及Screen显示器屏幕。基本不用仅作了解！！Screen的属性如下：

    • availHeight                                            获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。     
    • availWidth                                             获取系统屏幕的工作区域宽度，排除 Windows 任务栏。     
    • height                                                    获取屏幕的垂直分辨率。 
    • width                                                      获取屏幕的水平分辨率。 
    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<title>title>
    5.  
    6. 	head>
    7. 	<body>
    8. 		<a href="A.html">进入A页面a>
    9. 		<a href="javascript:void(history.go(1))">前进a>
    10. 	body>
    11. html>

    二、DOM文档对象模型

    DOM（Document Object Model） 文档对象模型，将标记语言文档的各个组成部分封装为对象。

    1.Document文档对象

    用window对象中的属性获取，window.document。常用的属性：

    • body                                                        可以获取body标签对象
    • title                                                          属性获取文档标题
    • lastModified                                             获取文档最后一次修改时间
    • URL                                                         获取地址栏中的地址

    常用的方法如下：

    (1)获取Element对象

    • getElementById()                                    通过id属性值获取唯一的元素
    • getElementsByTagName()                      通过标签名称获取元素对象数组
    • getElementsByName()                            通过name属性值获取元素对象数组
    • getElementsByClassName()                   通过class属性值获取元素对象数组                
    • querySelector()                                        根据css的选择器语法来选择的,获取的是第一个是个单数
    • querySelectorAll(".myclass")                    根据css的选择器语法来选择的,获取的是多个

    (2)创建其他对象

    • createElement                                           创建元素对象
    • createAttribute                                           创建属性对象
    • createComment                                         创建注释对象
    • createTextNode                                         创建文本对象
    • setAttribute()                                              给属性对象设置值
    • remove()                                                    删除自己
    • removeChild()                                            移除子元素
    • removeAttribute("align")                             根据属性名来移除标签上的属性
    • removeAttributeNode(attr)                          移除属性对象。传入的是一个属性对象
    • replaceChild(h4,h)                                      站在父元素的角度，替换子元素，值1：新的元素，值2：是要替换的旧元素。
    • insertBefore(h5,h1)                                     站在父标签的角度，在这个h1标签对象的前面插入h5这个标签对象。
    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<title>title>
    5. 	head>
    6. 	<body id="bd">
    7. 		<h1 id="myh">aaah1>
    8. 		<h2 class="myclass">000000001h2>
    9. 		<h2 class="myclass">000000002h2>
    10. 		<h2 class="myclass">000000003h2>
    11. 		<h2 class="myclass">000000004h2>
    12. 		<h2 class="myclass">000000005h2>
    13. 		<h2 class="myclass">000000006h2>
    14. 		<h2 class="myclass">000000007h2>
    15. 		<h2 class="myclass">000000008h2>
    16. 		<h2 class="myclass">000000009h2>
    17. 		<h2 class="myclass">000000010h2>
    18.  
    19. 		<h3>0000001h3>
    20. 		<h3>0000002h3>
    21. 		<h3>0000003h3>
    22. 		<h3>0000004h3>
    23. 		<h3>0000005h3>
    24. 		<h3>0000006h3>
    25. 		<h3>0000007h3>
    26. 		<h3>0000008h3>
    27. 		<h3>0000009h3>
    28. 		<h3>0000010h3>
    29. 	body>
    30.  
    31. 	<script>
    32. 		/*  获取Element对象 */
    33. 		var myh = document.getElementById("myh");
    34. 		var bd = document.getElementById("bd");
    35. 		//根据类名获取多个标签对象数组,这个数组是伪数组，
    36. 		var eleArr = document.getElementsByClassName("myclass");
    37. 		for (let i = 0; i < eleArr.length; i++) {
    38. 			if (i % 2 == 0) {
    39. 				eleArr[i].style.background = "yellow";
    40. 			} else {
    41. 				eleArr[i].style.background = "red";
    42. 			}
    43. 		}
    44.  
    45. 		var eleArr2 = document.getElementsByTagName("h3");
    46. 		for (let i = 0; i < eleArr2.length; i++) {
    47. 			if (i % 2 == 0) {
    48. 				eleArr2[i].style.background = "pink";
    49. 			} else {
    50. 				eleArr2[i].style.background = "blue";
    51. 			}
    52. 		}
    53. 	script>
    54. html>

     2.标签对象的属性

    • nnerHTML属性                                            获取或设置 元素的 子内容
    • innerTEXT属性                                            获取标签之间的文本内容
    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<title>title>
    5. 	head>
    6. 	<body>
    7. 		<input type="text" name="username" />
    8.  
    9. 		<input type="checkbox" name="hobby" />学习
    10. 		<input type="checkbox" name="hobby" />游戏
    11. 		<input type="checkbox" name="hobby" />娱乐
    12. 		<input type="checkbox" name="hobby" />音乐
    13.  
    14. 		<h1 class="hehe">0000001h1>
    15. 		<h1 class="hehe">0000002h1>
    16. 		<h1 class="hehe">0000003h1>
    17. 		<h1 class="hehe">0000004h1>
    18. 		<h1 class="hehe">0000005h1>
    19. 		<h1 class="hehe">0000006h1>
    20. 		<h1 class="hehe">0000007h1>
    21. 		<h1 class="hehe">0000008h1>
    22. 		<h1 class="hehe">0000009h1>
    23. 		<h1 class="hehe">0000010h1>
    24.  
    25. 		<div>
    26. 			<div>
    27. 				<h3><a href="#">hehhea>h3>
    28. 			div>
    29. 		div>
    30. 	body>
    31.  
    32. 	<script>
    33. 		//注意返回的是数组
    34. 		//针对表单项标签，有个特定方法 getElementsByName()
    35. 		var eleArr = document.getElementsByName("username");
    36. 		var ele = eleArr[0];
    37. 		alert(ele);
    38.  
    39. 		var v = document.querySelector(".hehe");
    40. 		v.style.color = "red";
    41.  
    42. 		var arr = document.querySelectorAll(".hehe");
    43. 		alert(arr.length);
    44.  
    45. 		var aEle = document.querySelector("div>div>h3>a");
    46. 		aEle.style.fontSize = "50px";
    47. 	script>
    48. html>

    创建删除DOM元素案例：

    2. 	<head>
    3. 		<meta charset="utf-8">
    4. 		<title>title>
    5. 	head>
    6. 	<body>
    7. 	body>
    8. 	<script>
    9. 		//创建标签对象
    10. 		var myDiv = document.createElement("div");
    11. 		var bd = document.body;
    12. 		//给父元素添加子元素
    13. 		bd.appendChild(myDiv);
    14. 		//创建文本对象 
    15. 		var text = document.createTextNode("这是一段文本");
    16. 		myDiv.appendChild(text);
    17. 		//创建属性对象
    18. 		var attr = document.createAttribute("style");
    19. 		attr.value = "color:red;font-size:30px";
    20. 		//给标签设置属性
    21. 		myDiv.setAttributeNode(attr);
    22. 		//创建注释对象
    23. 		var zhshi = document.createComment("这是一段注释");
    24. 		bd.append(zhshi);
    25.  
    26. 		var myH1 = document.createElement("h1");
    27. 		bd.appendChild(myH1);
    28. 		var text2 = document.createTextNode("这是一段文本222222");
    29. 		myH1.appendChild(text2);
    30. 		//给标签设置属性
    31. 		myH1.setAttribute("id", "myh1");
    32. 		myH1.setAttribute("style", "color:blue;background:yellow");
    33.  
    34. 		//删除元素
    35. 		//myH1.remove(); 站在自身的角度来删除自己
    36. 		//bd.removeChild(myDiv);
    37.  
    38. 		//删除属性
    39. 		//myH1.removeAttributeNode(属性对象) //
    40. 		myH1.removeAttribute("id");
    41. 		//站在父元素的角度，替换子元素，值1：新的元素，值2：是要替换的旧元素。
    42. 		var myH2 = document.createElement("h2");
    43. 		bd.replaceChild(myH2, myH1);
    44. 		//站在父标签的角度，在这个h1标签对象的前面插入h5这个标签对象。
    45. 		var myH3 = document.createElement("h3");
    46. 		bd.insertBefore(myH3, myDiv);
    47. 	script>
    48. html>

    (小编也在努力学习更多哟!以后再慢慢分享的啦!)

    希望对友友们有所帮助!!!

     

  • 相关阅读:
    docker安装和优化
    数据压缩与管理：掌握Linux VDO和LVM的力量
    CSS常见选择器详解以及应用场景案例
    算法通过村第十一关黄金挑战——位运算如何实现压缩储存
    --initialize specified but the data directory has files in it. Aborting. 问题解决
    【Linux】之Jumpserver堡垒机的部署/搭建
    [0xgame 2023] week2-Crypto
    基于人工智能的智能化指挥决策和控制
    mjpg-streamer 使用入门
    R语言实现多变量孟德尔随机化分析（1）
  • 原文地址：https://blog.csdn.net/naoguoteng/article/details/128054966