Web前端面试题第六道—链接标记target与Dom，Bom

2023-04-09 08:23:02JavaScript017

Web前端面试题第六道—链接标记target与Dom，Bom,第1张

(1)链接标记target属性的_self、_top、_parent、_blank、main、left、top各有何用处?

target属性的_self、_top、_parent都是针对框架的。比如你写了这样一个网页page，网页page分成frame1、frame2，frame1又分成frame1-1、frame1-2，frame1-1又分成frame1-1-1，frame1-1-2。

假如你在frame1-1-1中放了一个链接。

如果这个链接的target="_self"，那么链接会在frame1-1-1中打开。

如果target="_parent"，那么链接会在frame1-1中打开。

如果target="_top"，那么链接会在page中打开。

如果target="_blank"，浏览器会另开一个新窗口显示page文档。

未经验证，根据说法应该是这个意思。

(2)链接标记target属性的main、left、top各有何用处?

main、left、top是由Adobe Dreamweaver生成的主、左、上框架集的框架默认名。

(3)什么是Bom什么是Dom?你如何理解Dom?

DOM和BOM是JS的三大组成部分之一，下面讲解BOM与DOM以及两者的关系

DOM讲解

DOM即文档对象模型，通过创建节点树来表示文档，是HTML和XML的应用程序接口（API），描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点以及设置文档中标签的属性。将一个html文档用DOM树表示如下图所示。

HTML的DOM树节点包括:

1. 元素节点：上图中<html>、<body>、<p>都是元素节点即标签

2. 文本节点：向用户展示的内容，如<li>...</li>中的javascript、Dom、CSS等文本。

3. 属性节点：元素属性，如<a>标签的链接属性

BOM讲解

BOM是browser object model的缩写，简称浏览器对象模型。简单说即是javascript访问，操作浏览器的一个中介。

BOM主要用于管理浏览器窗口之间的通讯，由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。通过BOM我们可以学到与浏览器窗口交互的一些对象，可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。因此它的核心对象是window。

Window对象是BOM中所有对象的核心，是BOM中所有对象的父对象。所以，尽管frame ,history……都是window的子对象，我们只要知道BOM操作的是对象是浏览器窗口（window），那么这些对象就可以直接使用，无需通过“window.”来访问

BOM和DOM的关系

要想操作网页，需要DOM来进行访问，但是仅仅只是网页内容。浏览器除了有显示的内容，还有一个重要的部分就是一个载体，它承载我们看到的内容。好比是一个框架，而操作这个载体的对象我们把它叫做BOM。所以这样的结构，使得BOM，DOM各司其职，BOM负责跟浏览器框架打交道，DOM负责浏览器内容Document打交道。从上图中能更好的理解两者的关系。

1.eventLoop

2.setTimeout 误差原因

3.深浅拷贝

4.跨域原因及解决方案

5.css放在头部，js放在尾部

6.css触发bfc

7.webpack plugin和loader区别

8.前端优化

9.协商缓存

10.长列表优化

11.webview交互

12.vue响应式原理