Web全栈~13.BOM和DOM

最新推荐文章于 2021-05-29 16:02:50 发布

算法爱好者丶

最新推荐文章于 2021-05-29 16:02:50 发布

阅读量8.5k

点赞数 23

分类专栏： web 文章标签： web javascript js

本文链接：https://blog.csdn.net/qq_41424688/article/details/112604757

版权

web 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

Web基本笔记~13.BOM

上一期

前言

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器提供商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在，很大程度上是由于它们提供了与浏览器的互操作性。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

常用属性

属性	描述
closed	返回窗口是否已被关闭
document	文档对象
history	客户访问过的URL的信息
location	当前 URL 的信息
navigator	管理浏览器基本信息
opener	返回对创建此窗口的窗口的引用
screen	客户端的屏幕和显示性能的信息
self	返回对当前窗口的引用。等价于 Window 属性
status	设置窗口状态栏的文本
top	返回最顶层的先辈窗口

location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是很特别的一个对象，因为它既是window对象的属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下表列出了location对象的所有属性

在这里插入图片描述

位置操作

使用location对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用assign()方法并为其传递一个URL

location.assign("http://www.baidu.com");

这样，就可以立即打开新URL并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location设置为一个URL值，也会以该值调用assign()方法。例如，下列两行代码与显式调用assign()方法的效果完全一样。

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

另外，修改location对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、hostname、pathname和port属性设置为新值来改变URL。每次修改location的属性（hash除外），页面都会以新URL重新加载。

//假设初始URL为http://www.wrox.com/WileyCDA/
//将URL修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";

//将URL修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";

//将URL修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";

//将URL修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";

//将URL修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;

navigator对象

最早由Netscape Navigator 2.0引入的navigator对象，现在已经成为识别客户端浏览器的事实标准。虽然其他浏览器也通过其他方式提供了相同或相似的信息（例如，IE中的window.clientInformation和Opera中的window.opera），但navigator对象却是所有支持JavaScript的浏览器所共有的。与其他BOM对象的情况一样，每个浏览器中的navigator对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本。

在这里插入图片描述

检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非IE浏览器，可以使用plugins数组来达到这个目的。该数组中的每一项都包含下列属性。

name：插件的名字。description：插件的描述。filename：插件的文件名。length：插件所处理的MIME类型数量。一般来说，name属性中会包含检测插件必需的所有信息，但有时候也不完全如此。在检测插件时，需要像下面这样循环迭代每个插件并将插件的name与给定的名字进行比较。

screen对象

JavaScript中有几个对象在编程中用处不大，而screen对象就是其中之一。screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性，下表列出了所有属性及支持相应属性的浏览器。

在这里插入图片描述

history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。

使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。来看下面的例子。也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做。另外，还可以使用两个简写方法back()和forward()来代替go()。顾名思义，这两个方法可以模仿浏览器的“后退”和“前进”按钮。

//后退一页
history.go(-1);

//前进一页
history.go(1);

//前进两页
history.go(2);

//跳转到最近的wrox.com页面
history.go("wrox.com");

//跳转到最近的nczonline.net页面
history.go("nczonline.net");

//后退一页
history.back();

//前进一页
history.forward();

DOM

DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。1998年10月DOM１级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口。本章主要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript对DOM1级的实现。IE、Firefox、Safari、Chrome和Opera都非常完善地实现了DOM。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点

在这里插入图片描述

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

DOM 方法

在这里插入图片描述

document基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function testGetElementById(){
				//获得名字的id
				var elem = document.getElementById("username");
				//直接打印那条id所在的Input语句
				console.info(elem);
				//
				console.info(elem.type+"  "+elem.id+"  "+elem.name+"  "+elem.value);
				elem.value="修改后的value";
			}
			
			function testGetElementsByName(){
				//获得所有name是hobby的数组
				var arr = document.getElementsByName("hobby");
				for(var i=0;i<arr.length;i++){
					console.log(arr[i]);
				}
				
			}
			
			function testGetElementsByTagName(){
				//获得所有的标签名称,可以是option,也可以是span。
				var arr = document.getElementsByTagName("option");
				for(var i=0;i<arr.length;i++){
					console.log(arr[i]);
				}
				
			}
			
			function testParentNode(){
				var elem = document.getElementById("username");
				console.info(elem);
				var formElem = elem.parentNode.parentNode.parentNode.parentNode.parentNode;
				console.info(formElem);
			}
			
			function testChildNodes(){
				var elem = document.getElementById("professional");
				var arr = elem.childNodes;
				console.info(arr.length);
				for(var i=0;i<arr.length;i++){
					if(arr[i].nodeType==1){
						console.log(arr[i]+ "  "+arr[i].value+"  "+arr[i].nodeType);
					}
					
				}
			}
			function testSiblings(){
				var elem = document.getElementById("p2");
				var elem2 = elem.previousElementSibling;
				console.info(elem2)
			}
			window.onload = testParentNode;
		</script>
	</head>
	<body>
		<form action="" id="form1">
                         用户名：<input  type="text" name="username" id="username" value="请输入姓名" ><br />
                          密码：<input  type="password" name="pwd" id="pwd" /><br />
                          爱好<input  type="checkbox" name="hobby" value="music" checked/>音乐
            <input  type="checkbox" name="hobby" value="sports" />体育
            <input  type="checkbox" name="hobby" value="art" />美术<br />
                           职业：<select name="professional" id="professional">
                   <option value="1">工人</option>
                   <option value="2" id="p2">农民</option>
                   <option value="3" selected="selected">解放军</option>
                   <option value="4">知识分子</option>
           </select><br />           
                                          
           <input  type="button" value="提交" onclick="testGetElementsByTagName()"/>
       </form>

	</body>
</html>

事件

在这里插入图片描述

算法爱好者丶

关注

23
点赞
踩
0

收藏

觉得还不错? 一键收藏
27
评论
Web全栈~13.BOM和DOM

Web基本笔记~13.BOM上一期前言       BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器提供商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在，很大程度上是由于它们提供了与浏览器的互操作性。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HT
复制链接

扫一扫