面试题 DOM 操作

た入场券 2022-11-11 14:53 213阅读 0赞

## 题目 ##

*  融合识别浏览器的类型
 *  分析拆解 url 各个部分

### 知识点 ###

*  navigator
 *  screen
 *  location
 *  history  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

> W3C标准没有规定任何js基础相关的东西（变量、原型、作用域、异步）；定义了用于浏览器中js操作页面的API和全局变量

#### 1、DOM ####

###### 1.1、DOM本质 ######

> DOM可理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型

\#\#\#\#\#\#1.2、DOM节点操作

var div1 = document.getElementById('div1');  // 元素
    var div2 = document.getElementsByTagName('div2');  //集合
    var div3 = document.getElementsByClassName('div3');  //集合
    var div4 = document.querySelectorAll('div4');  //集合

1.3、DOM结构操作

var div1 = document.getElementById('div1');
    // 新增节点
    var p1 = document.creatrElement('p');
    p1.innerHTML = 'this is p1';
    div1.appendChild(p1);  // 增加新创建的元素 
    // 移动已有节点
    var p2 = document.getElementById('p2');
    div1.appendChild(p2);
    // 获取父节点
    var parent = div1.parentElement;
    // 获取子节点
    var childs = div1.childNodes;
    // 删除节点
    div1.removeChild(childs[0])

###### 1.4、DOM属性（待完善） ######

> Attribute和property区别？

> Attribute 是对html标签属性的修改  
> property 是对js对象属性的修改

#### 2、BOM ####

###### 2.1、navigator ######

> Navigator 对象  
> Navigator 对象包含有关浏览器的信息。  
> 注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

###### Navigator 对象集合 ######

<table> 
 <thead> 
  <tr> 
   <th>集合</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>plugins[]</td> 
   <td>返回对文档中所有嵌入式对象的引用。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>虽然 plugins[] 数组是由 IE 4 定义的，但是在 IE 4 中它却总是空的，因为 IE 4 不支持插件和 Plugin 对象。</td> 
  </tr> 
 </tbody> 
</table>

###### Navigator 对象属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appCodeName</td> 
   <td>返回浏览器的代码名。</td> 
  </tr> 
  <tr> 
   <td>appCodeName</td> 
   <td>返回浏览器的代码名。</td> 
  </tr> 
  <tr> 
   <td>appMinorVersion</td> 
   <td>返回浏览器的次级版本。</td> 
  </tr> 
  <tr> 
   <td>appName</td> 
   <td>返回浏览器的名称。</td> 
  </tr> 
  <tr> 
   <td>appVersion</td> 
   <td>返回浏览器的平台和版本信息。</td> 
  </tr> 
  <tr> 
   <td>browserLanguage</td> 
   <td>返回当前浏览器的语言。</td> 
  </tr> 
  <tr> 
   <td>cookieEnabled</td> 
   <td>返回指明浏览器中是否启用 cookie 的布尔值。</td> 
  </tr> 
  <tr> 
   <td>cpuClass</td> 
   <td>返回浏览器系统的 CPU 等级。</td> 
  </tr> 
  <tr> 
   <td>onLine</td> 
   <td>返回指明系统是否处于脱机模式的布尔值。</td> 
  </tr> 
  <tr> 
   <td>platform</td> 
   <td>返回运行浏览器的操作系统平台。</td> 
  </tr> 
  <tr> 
   <td>systemLanguage</td> 
   <td>返回 OS 使用的默认语言。</td> 
  </tr> 
  <tr> 
   <td>userAgent</td> 
   <td>返回由客户机发送服务器的 user-agent 头部的值。</td> 
  </tr> 
  <tr> 
   <td>userLanguage</td> 
   <td>返回 OS 的自然语言设置。</td> 
  </tr> 
 </tbody> 
</table>

###### 2.2、screen ######

###### Navigator 对象方法 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>javaEnabled()</td> 
   <td>规定浏览器是否启用 Java。</td> 
  </tr> 
  <tr> 
   <td>taintEnabled()</td> 
   <td>规定浏览器是否启用数据污点 (data tainting)。</td> 
  </tr> 
 </tbody> 
</table>

Navigator 对象描述  
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。

Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

###### 2.3、location ######

> Location 对象  
> Location 对象  
> Location 对象包含有关当前 URL 的信息。  
> Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

###### Location 对象属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hash</td> 
   <td>设置或返回从井号 (#) 开始的 URL（锚）。</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>设置或返回主机名和当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>设置或返回当前 URL 的主机名。</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>设置或返回完整的 URL。</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>设置或返回当前 URL 的路径部分。</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>设置或返回当前 URL 的端口号。</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>设置或返回当前 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>设置或返回从问号 (?) 开始的 URL（查询部分）。</td> 
  </tr> 
 </tbody> 
</table>

###### Location 对象方法 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>assign()</td> 
   <td>加载新的文档。</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>重新加载当前文档。</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>用新的文档替换当前文档。</td> 
  </tr> 
 </tbody> 
</table>

> Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

> 不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。

> 除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外，还可以修改部分 URL，只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL，其中的一部分与原来的 URL 不同，浏览器会将它装载并显示出来。例如，假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。同样，如果设置了 search 属性，那么浏览器就会重新装载附加了新的查询字符串的 URL。

> 除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。

###### 2.4、history ######

###### History 对象 ######

> History 对象包含用户（在浏览器窗口中）访问过的 URL。

> History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

> 注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

###### History 对象属性 ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>返回浏览器历史列表中的 URL 数量。</td> 
  </tr> 
 </tbody> 
</table>

###### History 对象方法 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>back()</td> 
   <td>加载 history 列表中的前一个 URL。</td> 
  </tr> 
  <tr> 
   <td>forward()</td> 
   <td>加载 history 列表中的下一个 URL。</td> 
  </tr> 
  <tr> 
   <td>go()</td> 
   <td>加载 history 列表中的某个具体页面。</td> 
  </tr> 
 </tbody> 
</table>

###### History 对象描述 ######

> History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221022/e2ca61257dbe4054abaf4e9356e10658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210321104101475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210321104146413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size_16,color_FFFFFF,t_70