JavaScript之BOM和DOM总结

我就是我 2022-05-26 00:52 231阅读 0赞

**1、BOM**

**BOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。**

*  BOM是browser object model的缩写，简称浏览器对象模型
 *  BOM提供了独立于内容而与浏览器窗口进行交互的对象
 *  由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
 *  BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
 *  BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
 *  BOM最初是Netscape浏览器标准的一部分

BOM结构

![70][]

从上图可以看出：DOM是属于BOM的一个属性。

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。

**1.2 BOM导图**

**![70 1][]**

### 1.3、window对象 ###

window对象在浏览器中具有双重角色：它既是ECMAscript规定的全局global对象，又是javascript访问浏览器窗口的一个接口。

**Window 对象代表一个浏览器窗口或一个框架。**Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

*  **对象方法如图1、2、3**

**图一:**

![70 2][]

**图二:**

![70 3][]

**图三：**

**![70 4][]**

###  ###

### 1.4、history对象 ###

history对象保存着用户上网的历史记录，使用go()实现在用户的浏览记录中跳转：

### history.go(-1) 等价于history.back()   history.go(1) 等价于 history.forward()   history.go(1) //前进两页   history.go('jb51.net') ###

###  ###

### 1.5、navigator对象 ###

这个对象代表浏览器实例，其属性很多，但常用的不太多。如下：

navigator.userAgent：用户代理字符串，用于浏览器监测中、

navigator.plugins:浏览器插件数组，用于插件监测

navigator.registerContentHandler 注册处理程序，如提供RSS阅读器等在线处理程序。

### 1.6、location对象 ###

location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。

location.hash　　\#contents　　返回url中的hash，如果不包含\#后面的内容，则返回空字符串

location.host　　best.cnblogs.com:80　　返回服务器名称和端口号

location.port　　80　　返回端口号

location.hostname　　best.cnblogs.com　　返回服务器名称

location.href　　http://best.cnblogs.com　　返回当前加载页面的完整url

location.pathname　　/index.html　　返回url中的目录和文件名

location.protocol http　　返回页面使用的协议

location.search　　?q=javascript　　返回url中的查询字符串

改变浏览器的位置：location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录，用户不能回到前一个页面。

location.reload()：重置当前页面，可能从缓存，也可能从服务器；如果强制从服务器取得，传入true参数

**2、DOM**

**DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。**

**在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。**

**每个载入浏览器的 HTML 文档都会成为 Document 对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象.**

*  将HTML代码分解为DOM节点层次图:

![70 5][]

### DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。    ###

1)节点类型:

DOM规定文档中的每个成分都是一个节点（Node）,HTML文档可以说由节点构成的集合，DOM节点有:

<table style="font-weight:700;width:780px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td>类型</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>元素节点（Element）</td> 
 <td>上图中&lt;html&gt;、&lt;body&gt;、&lt;p&gt;等都是元素节点，即标签。&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;文本节点（Text）</td> 
 <td>向用户展示的内容，如&lt;li&gt;...&lt;/li&gt;中的JavaScript、DOM、CSS等文本。</td> 
 </tr> 
 <tr> 
 <td>属性节点（Attr）</td> 
 <td>元素属性，元素才有属性,如&lt;a&gt;标签的链接属性href="http://www.baidu.com"。&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

** 2） DOM节点三大属性（XML DOM）**

<table style="width:780px;color:rgb(69,69,69);font-size:16px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>nodeName</td> 
 <td>元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。&nbsp;</td> 
 </tr> 
 <tr> 
 <td>nodeType</td> 
 <td>元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、&nbsp;</td> 
 </tr> 
 <tr> 
 <td>nodeValue</td> 
 <td>元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。</td> 
 </tr> 
 </tbody> 
</table>

**2.1 DOM 常见操作**

**Node为所有节点的父接口，其定义了一组公共的属性和方法，如下：**

<table style="border-spacing:0px;border:1px solid rgb(204,204,204);text-align:center;margin-top:.54em;clear:both;color:rgb(34,34,34);font-family:tahoma, arial, 'Microsoft YaHei';font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">nodeType</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">返回节点类型的数字值（1~12）</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">nodeName</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">nodeValue</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">parentNode</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">父节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">parentElement</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">父节点标签元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">childNodes</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">所有子节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">children</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">第一层子节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">firstChild</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">第一个子节点，Node 对象形式</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">firstElementChild</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">第一个子标签元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">lastChild</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">最后一个子节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">lastElementChild</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">最后一个子标签元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">previousSibling</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">上一个兄弟节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">previousElementSibling</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">上一个兄弟标签元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">nextSibling</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">下一个兄弟节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">nextElementSibling</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">下一个兄弟标签元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">childElementCount</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">第一层子元素的个数(不包括文本节点和注释)</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">ownerDocument</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">指向整个文档的文档节点</td> 
 </tr> 
 </tbody> 
</table>

节点关系方法：

hasChildNodes() 包含一个或多个节点时返回true  
contains() 如果是后代节点返回true  
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true  
compareDocumentPostion() 确定节点之间的各种关系

### 2.2 选择器 ###

### 2.3、样式操作方法style ###

### 2.4元素节点ELEMENT ###

<table style="border-spacing:0px;border:1px solid #C0C0C0;text-align:center;margin:0px;clear:both;background-color:rgb(255,255,255);font-size:16px;max-width:850px;font-family:'microsoft yahei';color:rgb(0,0,0);padding:0px;"> 
 <tbody style="padding:0px;margin:0px;"> 
 <tr style="padding:0px;margin:0px;"> 
 <td style="margin:0px;padding:3px;border-color:#C0C0C0;border-collapse:collapse;font-family:'microsoft yahei';">nodeName</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">访问元素的标签名</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">tagName</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">访问元素的标签名</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">createElement()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">创建节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">appendChild()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">末尾添加节点，并返回新增节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">insertBefore()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">参照节点之前插入节点，两个参数：要插入的节点和参照节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">insertAfter()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">参照节点之后插入节点，两个参数：要插入的节点和参照节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">replaceChild()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">替换节点，两个参数：要插入的节点和要替换的节点(被移除)</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">removeChild()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">移除节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">cloneNode()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">克隆，一个布尔值参数，true为深拷贝，false为浅拷贝</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">importNode()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点)</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">insertAdjacentHTML()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">插入文本，两个参数：插入的位置和要插入文本 
 <ul style="margin-bottom:0px;margin-left:25px;padding-top:.3em;padding-bottom:.3em;list-style:decimal;line-height:25px;"> 
 <li style="margin-top:0px;margin-left:0px;padding:0px;">"beforebegin",在该元素前插入</li> 
 <li style="margin-top:0px;margin-left:0px;padding:0px;">"afterbegin",在该元素第一个子元素前插入</li> 
 <li style="margin-top:0px;margin-left:0px;padding:0px;">"beforeend",在该元素最后一个子元素后面插入</li> 
 <li style="margin-top:0px;margin-left:0px;padding:0px;">"afterend",在该元素后插入</li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

### 2.5、属性节点attributes ###

### 2.6、文本节点TEXT ###

<table style="border-spacing:0px;border:1px solid rgb(204,204,204);text-align:center;margin-top:.54em;clear:both;color:rgb(34,34,34);font-family:tahoma, arial, 'Microsoft YaHei';font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">nnerText</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">所有的纯文本内容，包括子标签中的文本</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">outerText</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">与innerText类似</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">innerHTML</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">所有子节点(包括元素、注释和文本节点)</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">outerHTML</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">返回自身节点与所有子节点</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">textContent</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">与innerText类似，返回的内容带样式</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">data</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文本内容</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">length</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文本长度</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">createTextNode()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">创建文本</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">normalize()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">删除文本与文本之间的空白</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">splitText()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">分割</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">appendData()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">追加</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">deleteData(offset,count)</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">从offset指定的位置开始删除count个字符</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">insertData(offset,text)</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">在offset指定的位置插入text</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">replaceData(offset,count,text)</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">替换，从offset开始到offscount处的文本被text替换</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">substringData(offset,count)</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">提取从ffset开始到offscount处的文本</td> 
 </tr> 
 </tbody> 
</table>

### 2.7文档节点 Document ###

<table style="border-spacing:0px;border:1px solid rgb(204,204,204);text-align:center;margin-top:.54em;clear:both;color:rgb(34,34,34);font-family:tahoma, arial, 'Microsoft YaHei';font-size:14px;background-color:rgb(255,255,255);"> 
 <tbody> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.documentElement</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">代表页面中的&lt;html&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.body</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">代表页面中的&lt;body&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.doctype</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">代表&lt;!DOCTYPE&gt;标签</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.head</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">代表页面中的&lt;head&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.title</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">代表&lt;title&gt;元素的文本，可修改</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.URL</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">当前页面的URL地址</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.domain</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">当前页面的域名</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.charset</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">当前页面使用的字符集</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.defaultView</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">返回当前&nbsp;document对象所关联的&nbsp;window&nbsp;对象，没有返回&nbsp;null</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.anchors</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文档中所有带name属性的&lt;a&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.links</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文档中所有带href属性的&lt;a&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.forms</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文档中所有的&lt;form&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.images</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">文档中所有的&lt;img&gt;元素</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.readyState</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">两个值:loading(正在加载文档)、complete(已经加载完文档)</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">document.compatMode</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启</td> 
 </tr> 
 <tr> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">write()、writeln()、open()、close()</td> 
 <td style="margin:0px;padding:.2em .46em;border-color:rgb(204,204,204);">write()文本原样输出到屏幕、writeln()输出后加换行符、open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档</td> 
 </tr> 
 </tbody> 
</table>

##  ##

## 附：DOM基本操作思维导图 ##

![70 6][]

## 附： window对象思维导图 ##

![70 7][]

[70]: /images/20220526/76561f98864e4cb69e8655666a268bd4.png
[70 1]: /images/20220526/e58a3428e9fe4627b920748cf382e8ac.png
[70 2]: /images/20220526/b9a63b0494594fd5ac3e3afcacf2023c.png
[70 3]: /images/20220526/4febbb37e7334bdfb1a968ab981115ca.png
[70 4]: /images/20220526/e042db03323d4932bc492e993782a010.png
[70 5]: /images/20220526/f083d3caa9c24c0a852daf15eda1b321.png
[70 6]: /images/20220526/1ad6d6c0142e43b5857b3f4cced0bf96.png
[70 7]: /images/20220526/291cec03ea9a47ae93ee3d526c42b674.png