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

JavaScript015

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打交道。从上图中能更好的理解两者的关系。

BOM是浏览器对象模型,用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等。

DOM是文档对象模型,用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值。

BOM的内容不多,主要还是DOM。由于DOM的操作对象是文档(Document),所以dom和浏览器没有直接关系。另外,BOM不具备浏览器兼容性,使用的时候要注意不同浏览器的区别。

131.用原生 JavaScript 的实现过什么功能吗?

参考答案:轮播图、手风琴、放大镜、3D动画效果等,切记,所答的一定要知道实现原理!,不知道还不如不说!

参与互动

132.javascript 代码中的"use strict"是什么意思 ? 使用它区别是什么?

参考答案:意思是使用严格模式,使用严格模式,一些不规范的语法将不再支持

参与互动

133.简述创建函数的几种方式

参考答案:

参与互动

134.window.location.search() 返回的是什么?

参考答案:查询(参数)部分。除了给动态语言赋值以外,我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值 返回值:?ver=1.0&id=timlq 也就是问号后面的!

参与互动

135.window.location.hash 返回的是什么?

参考答案:锚点 , 返回值:#love ;

参与互动

136.window.location.reload() 作用?

参考答案:刷新当前页面

参与互动

137.为什么不能定义 1px 左右的 p 容器?

参考答案: IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如: overflow:hidden | zoom:0.08 | line-height:1px

参与互动

138.BOM 对象有哪些,列举 window 对象?

参考答案:

参与互动

139.简述 readonly 与 disabled 的区别

参考答案:

参与互动

140.为什么扩展 javascript 内置对象不是好的做法?

参考答案:

参与互动

141.什么是三元表达式?“三元”表示什么意思?

参考答案:三元如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2.这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

参与互动

142.我们给一个 dom 同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获

参考答案:所有事件的顺序是:其他元素捕获阶段事件 ->本元素代码顺序事件 ->其他元素冒泡阶段事件 。

参考

参与互动

144.简述一下 Handlebars 的基本用法?

参考答案:没有用过的话说出它是干什么的即可

参与互动

143.简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?

参考答案:

参与互动

145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

参考答案:

参与互动

146.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?

参考答案:Webkit 是浏览器引擎,包括 html 渲染和 js 解析功能,手机浏览器的主流内核,与之相对应的引擎有 Gecko(Mozilla Firefox 等使用)和 Trident(也称 MSHTML,IE 使用)。 对于浏览器的调试工具要熟练使用,主要是页面结构分析,后台请求信息查看,js 调试工具使用,熟练使用这些工具可以快速提高解决问题的效率

参与互动

147.如何测试前端代码? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

参考答案:了解 BDD 行为驱动开发与 TDD 测试驱动开发已经单元测试相关概念

参与互动

148.JavaScript 的循环语句有哪些?

参考答案:while for do while forEach

参与互动

149.作用域-编译期执行期以及全局局部作用域问题

参考答案:js 执行主要的两个阶段:预解析和执行期

参与互动

150.如何添加 html 元素的事件,有几种方法?请列举

参考答案:直接在标签里添加;在元素上添加、使用事件注册函数添加

参与互动

151.列举浏览器对象模型 BOM 里常用的至少 4 个对象,并列举 window 对象的常用方法至少 5 个

参考答案:

对象:Window document location screen history navigator

方法:Alert() confirm() prompt() open() close()

参与互动

152.事件绑定的方式

参考答案:

参与互动

153.事件循环

参考答案:事件循环是一个单线程循环,用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数,则将回调函数出队并推送到调用堆栈中执行。

参与互动

154.事件模型

参考答案:

解析:参考

参与互动

155.如何自定义事件

参考答案:

1.原生提供了 3 个方法实现自定义事件 2.createEvent,设置事件类型,是 html 事件还是 鼠标事件 3.initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件 4.dispatchEvent 触发事件

MDN

参与互动

156.target 和 currentTarget 区别

参考答案:

参与互动

157.prototype 和__proto__的关系是什么

参考答案:

所有的对象都拥有__proto__属性,它指向对象构造函数的 prototype 属性

所有的函数都同时拥有__proto__和 protytpe 属性 函数的__proto__指向自己的函数实现 函数的 protytpe 是一个对象 所以函数的 prototype 也有__proto__属性 指向 Object.prototype

Object.prototype.__proto__指向 null

参与互动

158.什么是原型属性?

参考答案:从构造函数的prototype属性出发找到原型,这时候就把原型称之为构造函数的原型属性

参与互动

159.什么是原型对象?

参考答案:从实例的__proto__出发,找到原型,这时候就把原型称之为实例的原型对象。

参与互动

160.使用 let、var 和 const 创建变量有什么区别

参考答案:

let 和 const 的区别在于:let 允许多次赋值,而 const 只允许一次。