JavaScript系列（二）---JavaScript中的BOM和DOM知识汇总

妖狐艹你老母 2022-05-10 19:16 189阅读 0赞

# `BOM`和`DOM`的简介 #

JavaScript是一种网络脚本（客户端）语言，实际上包含了三部分的内容：`ECMAScript`，`BOM`和`DOM`。

*  `ECMAScript`，描述该语言的语法和对象；
 *  浏览器对象模型（`BOM`），描述与浏览器进行交互的方法和接口；
 *  文档对象模型（`DOM`），描述处理网页内容的方法和接口。

# `BOM`汇总 #

`BOM`（浏览器对象模型）提供了很多东西（对象），用于访问浏览器的功能，这些对象与具体的网页内容无关。

## `window`对象 ##

`BOM`的核心对象是`window`对象，表示的是浏览器的一个实例。在浏览器中，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的`Global`对象。因此，全局定义的变量、对象或函数，`window`都有权访问。

测试的JS代码如下：

var name = "zhenye"
    function sayHi(){ 
      console.log("Hi," + this.name + "!")
    }
    console.log(window.name)
    console.log("---分隔线---")
    window.sayHi();

测试效果图如下：

![window对象作用域测试的效果图][window]

与窗口相关的方法汇总如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法表达式</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">open(url)</td> 
   <td align="left">打开一个新窗口，url为新窗口的地址栏</td> 
  </tr> 
  <tr> 
   <td align="left">close()</td> 
   <td align="left">关闭当前窗口</td> 
  </tr> 
  <tr> 
   <td align="left">setTimeOut(fun,time)</td> 
   <td align="left">超时调用，延迟time后调用方法fun</td> 
  </tr> 
  <tr> 
   <td align="left">clearTimeOut(fun)</td> 
   <td align="left">清除该超时调用</td> 
  </tr> 
  <tr> 
   <td align="left">setInterval(fun,time)</td> 
   <td align="left">定时调用，每隔time后调用方法fun</td> 
  </tr> 
  <tr> 
   <td align="left">clearInterval(fun)</td> 
   <td align="left">清除该定时调用</td> 
  </tr> 
  <tr> 
   <td align="left">confirm(message)</td> 
   <td align="left">打开系统对话框，提示内容为message</td> 
  </tr> 
 </tbody> 
</table>

测试定时和延时方法的代码如下：

var intervalFun = setInterval(function(){ 
    	console.log("这是定时方法，每隔3秒打印当前时间：" + new Date().toLocaleTimeString())
    },3000);
    var setTimeOutFun = setTimeout(function(){ 
    	console.log("这是延时方法，10秒后的时间是：" + new Date().toLocaleTimeString());
    	console.log("即将清除定时方法---" + clearInterval(intervalFun))
    },10000);

定时和延时方法的测试效果图如下：

![定时和延时方法的测试效果图][70]

## `location`对象 ##

`location`对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。它既是`window`对象的属性，也是`document`对象的属性。

`location`中常用的汇总方法如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法表达式</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">assign(String url)</td> 
   <td align="left">改变当前页面的url</td> 
  </tr> 
  <tr> 
   <td align="left">replace(String url)</td> 
   <td align="left">改变当前页面的url,无法跳回前一页</td> 
  </tr> 
  <tr> 
   <td align="left">reload(Boolean force)</td> 
   <td align="left">重新加载页面，force表示强制重新加载</td> 
  </tr> 
 </tbody> 
</table>

## `navigator`对象 ##

`navigator`对象，是所有支持JavaScript的浏览器所共有的对象，用来可以识别客户端浏览器。常用属性或方法汇总如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性或方法</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">appName</td> 
   <td align="left">完整的浏览器名称</td> 
  </tr> 
  <tr> 
   <td align="left">cookieEnabled</td> 
   <td align="left">是否启用了cookie</td> 
  </tr> 
  <tr> 
   <td align="left">plugins</td> 
   <td align="left">浏览器中安装的插件数组</td> 
  </tr> 
  <tr> 
   <td align="left">hasPlugin(pluginName)</td> 
   <td align="left">浏览器是否安装了该插件</td> 
  </tr> 
 </tbody> 
</table>

`navigator`对象测试代码如下：

console.log("浏览器名称：" + navigator.appName);
    var count = navigator.plugins.length;
    console.log("浏览器的插件有：" + count + "个");
    for (var i = 0;i < count;i++) { 
      console.log("该插件的名称为：" + navigator.plugins[i].name);
    }

`navigator`对象测试效果图如下：

![navigator对象测试效果图][navigator]

## `screen`对象 ##

`screen`对象，是用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。常用属性汇总如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">屏幕的像素高度</td> 
  </tr> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">屏幕的像素宽度</td> 
  </tr> 
 </tbody> 
</table>

## `history`对象 ##

`history`对象保存着用户上网的历史记录，是从窗口被打开的那一刻算起的。常用属性或方法汇总如下:

<table> 
 <thead> 
  <tr> 
   <th align="left">属性或方法</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">length</td> 
   <td align="left">保存着所有页面历史记录的数量</td> 
  </tr> 
  <tr> 
   <td align="left">go(num)</td> 
   <td align="left">表示前进num页—num为负数时后退</td> 
  </tr> 
  <tr> 
   <td align="left">back()</td> 
   <td align="left">后退一页，相当于go(-1)</td> 
  </tr> 
  <tr> 
   <td align="left">forward()</td> 
   <td align="left">前进一页，相当于go(1)</td> 
  </tr> 
 </tbody> 
</table>

# `DOM`汇总 #

## `DOM`的含义及类型 ##

`DOM`（文档对象模型），是针对HTML和XML文档的一个API汇总。`DOM`是将页面看成一个层次化的节点树，我们对页面进行的操作，可以看成是对这个节点树的增删改操作。

所有的网页内容，实际都是类似如下结构的HTML文件：

这个HTML文件，经过浏览器解析后的效果图如下：

![HTML效果图][HTML]

在HTML中，每一个标签对应是文档元素中的一个节点，如上面的`<html>`标签就是文档元素的根节点。

XML与HTML的不同点，就是HTML文档的根节点，必须是`<html>`。

XML和HTML中标签的类型有：`Node`,`Document`,`Element`,`Text`,`Comment`,`CDATASection`,`DocumentType`,`DocumentFragment`,`Attr`。

它们的含义汇总如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">类型名称</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Node</td> 
   <td align="left">节点，JavaScript的基本类型</td> 
  </tr> 
  <tr> 
   <td align="left">Document</td> 
   <td align="left">文档，<code>document</code>对象是HTMLDocument的一个实例，表示整个页面</td> 
  </tr> 
  <tr> 
   <td align="left">Element</td> 
   <td align="left">元素，提供对元素的标签名、子节点及特性的访问功能</td> 
  </tr> 
  <tr> 
   <td align="left">Text</td> 
   <td align="left">文本，标签内部的纯文本内容</td> 
  </tr> 
  <tr> 
   <td align="left">Comment</td> 
   <td align="left">注释，<code>&lt;!--注释内容--&gt;</code>中的注释内容</td> 
  </tr> 
  <tr> 
   <td align="left">CDATASection</td> 
   <td align="left">XML中的CDATA区域，<code>&lt;!CDATA[不编译的内容]&gt;</code></td> 
  </tr> 
  <tr> 
   <td align="left">DocumentType</td> 
   <td align="left"><code>&lt;!DOCTYPE HTML&gt;</code>中定义的内容</td> 
  </tr> 
  <tr> 
   <td align="left">DocumentFragment</td> 
   <td align="left">轻量级文档，可包含和控制节点</td> 
  </tr> 
  <tr> 
   <td align="left">Attr</td> 
   <td align="left">属性，用来操作节点的属性</td> 
  </tr> 
 </tbody> 
</table>

## `DOM`操作技术 ##

在前面的HTML示例中实践`DOM`操作技术，具体代码如下：

<html>
      <head>
        <title>我是标题</title>
      </head>
      <body>
        <p>我是正文</p>
        <script> var body = document.getElementsByTagName("body")[0]; // 给body添加3个div for (var i = 0;i < 3;i++){ var div = document.createElement("div"); div.id = "div-" + i; div.textContent = "自定义div的内容(" + i + ")"; body.appendChild(div); } // 给body中的div1，添加一个注释 var div2 = document.getElementById("div-1"); var comment = document.createComment("这是注释的内容"); div2.appendChild(comment); </script>
      </body>
    </html>

这段代码的实际效果图如下：

![DOM操作技术的效果图][DOM]

## DOM的选择符API ##

类似于前面样例中方法`getElementById()`和`getElementsByTagName()`可以选取特定元素，还有一种更加通用的方法，就是通过**CSS选择符**查询`DOM`文档取得特定元素的引用。

<table> 
 <thead> 
  <tr> 
   <th align="left">方法名称</th> 
   <th align="left">方法作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">querySelector()</td> 
   <td align="left">返回与传入参数（CSS选择符）定义的模式匹配的第一个元素</td> 
  </tr> 
  <tr> 
   <td align="left">querySelectorAll()</td> 
   <td align="left">返回与传入参数（CSS选择符）定义的模式匹配的元素数组</td> 
  </tr> 
  <tr> 
   <td align="left">matchesSelector()</td> 
   <td align="left">调用元素与传入参数（CSS选择符）定义的模式匹配时返回true</td> 
  </tr> 
 </tbody> 
</table>

CSS选择符API的测试代码如下：

<html>
      <head>
        <title>CSS选择符API测试</title>
      </head>
      <body>
    	<div id="div-1" class="div-class">div-1的内容</div>
    	<div id="div-2" class="div-class">div-2的内容</div>
    	<div id="div-3" class="div-class">div-3的内容</div>
    	<div id="div-4" class="div-class">div-4的内容</div>
    	<div id="div-5" class="div-class">div-5的内容</div>
        <script> // querySelectorAll()的实践 // 查找所有标签名为div的元素 var divs = document.querySelectorAll("div"); console.log("div元素的个数为：" + divs.length); //取得id为"div-3"的元素 var div3 = document.querySelector("#div-3"); console.log("id为div-3的元素，其文本内容为：" + div3.textContent); // 取得类名为"div-class"的第一个元素 var firstDiv = document.querySelector(".div-class"); console.log("类名为div-class的第一个元素，其文本内容为：" + firstDiv.textContent); </script>
      </body>
    </html>

测试效果图如下：

![CSS选择符API的测试效果图][CSS_API]

[window]: /images/20220505/096e66330c364e438f4cfdde52dafa7f.png
[70]: /images/20220505/28f5ae2da15042e3bd3cc1c1a5037860.png
[navigator]: /images/20220505/317892bbb57f4da4a844442f388f392b.png
[HTML]: /images/20220505/510d279fe1874083adf5bb8976d0bfd2.png
[DOM]: /images/20220505/fc6a102887574987865c23ce173aee09.png
[CSS_API]: /images/20220505/8e2f6511de5042ed864d6335ed4b6714.png