Web全栈~13.BOM和DOM

桃扇骨 2023-01-06 11:42 136阅读 0赞

# Web基本笔记~13.BOM #

## [上一期][Link 1] ##

### 前言 ###

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

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

### 常用属性 ###

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

## location对象 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

### 位置操作 ###

使用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对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]

### 检测插件 ###

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

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

## screen对象 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]

## 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 文档中的所有内容都是节点

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 3]

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

### DOM 方法 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 4]

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

## 事件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 5]

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112599960
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/88cb5ea1a1d04aff83a8049ed86d3574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210114140753669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210114141114544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210114143103118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210114143434444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210114160605429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70