网易微专业之《前端工程师》学习笔记（16）-DOM单元测试客观题

2016-02-15  本文已影响5221人  荷小音

一、单选(2分)
如果html元素’<div>欢迎<a href="/profile">Jerry</a>同学!</div>’对应的DOM节点是element，那么element.children.length的值为

解：选D。这题考的是children的知识点，children和childNodes的区别是，children只返回元素子节点，ChildNodes可以返回很多类型的节点，之所以会出现children这个属性，也是因为在IE9以前版本与其他浏览器在处理文本节点中的空白节点的时候出现差异。children选择的子节点由于是只选择元素节点，所以作为文本节点的空白节点是不会被选择的，而childNodes则会。childNodes的空白符在IE的childNodes是不包含空白符 其他浏览器包含空白符。

二、单选(2分)
如果html元素’ <button disabled></button>’对应的DOM节点是button，那么button.disabled的值为

解：选D。disabled=true默认是默认值，是使按钮失效。

可以拿下面的代码去chorme的调试工具里测试下。

var button=document.getElementsByTagName("button");
button[0].disabled；
//true

三、单选(2分)
W3C定义用来阻止a标签默认事件的方法是

解：选B。e.preventDefault()方法是用于取消事件的默认行为，一般cancelable为true时候可以使用这个方法，但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。e.stopImmediatePropagation是取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用。e.stopPropagation是取消事件的进一步捕获或冒泡，如果bubbles为true的时候，可以用这个方法。bubbles是判断事件是否冒泡。

四、单选(2分)
事件模型的第一个阶段是

解：选D，事件的模型一般分为三个阶段：捕获-->目标-->冒泡。

五、单选(2分)
多媒体的音量属性volume的取值范围是

解：选D。音量属性volume的取值必须是介于 0.0 与 1.0 之间的数字。

六、单选(2分)
根据navigator的以下哪个属性，可以判断出浏览器的内核信息

解：选D，appVersion是完整的浏览器版本，appName是浏览器名称，platform是平台的名称，比如Win32。userAgent 属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值。一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。这题AD都可以的估计，保险起见选D了。

七、单选(2分)
下面哪个对话框允许用户输入

解：选D。

八、单选(2分)
以下表示请求成功的http状态码是

解：选B。这些http的状态码分别代表的意思是：

状态码 描述
400 1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。2、请求参数有误。
200 请求已成功
404 请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
500 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。

九、单选(2分)
通过设置以下哪个cookie属性可以删除一个cookie值

解：选B。一般设置cookie的失效时间没也就是应该被删除的时间戳，就可以删除cookie。

十、单选(2分)
如果在表单中通过’<input type="file">’元素上传png格式的图片文件，表单的enctype值为

解：选A。BD是错误的，没有这个值。enctype的值如下：

enctype值 描述
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

十一、多选(4分)
如果html元素’ <div id="user" data-first-name="Wei">aq</div>’对应的DOM节点是element，那么以下选项中哪些值为"Wei"

解：选CD。这题考的是自定义属性该怎么获取。有两种方式吧。一种是用getAttribute，只不过element.getAttribute(完整属性名)，参数是必须填的。第二种办法就是用dataset，这其实是个API[element.datasetAPI]从火狐6和Chrome8起就开始对它有了支持。这个API能够让用户get或setHTML页面元素上的data-*属性。用法看下面：

用点使用data-*属性名时，要把名称转变成驼峰式命名(Camel-Case)，比如像C选项那样的，使用dataset的话可以省略data，直接写下面的属性名。比如举个栗子：

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

要想获取这个data-id属性，你的代码应该写成这样：

var element = document.getElementById("myDiv");
var id = element.dataset.id;

要想获取data-my-custom-key属性值，你的代码应该写成这样：

var customKey = element.dataset.myCustomKey;

十二、多选(4分)
如果html元素’ <p style="line-height: 200px;">网易一线资深工程师</p>’对应的DOM节点是element，那么以下表达式中值为"200px"的有

解：选BC。首先这是内部样式表，所以用element.style。如果是外部样式表，或者写在<style></style>里的，就用element.sheet.cssRule[下标].style.lineHeight了。看下面的栗子。

//css
<style>
p{line-height: 200px;}
</style>

//html
<p >网易一线资深工程师</p>
就用
element.sheet.cssRule[0].style.lineHeight

如果是行内样式的话

<p style="line-height: 200px;">网易一线资深工程师</p>

就用
element.style.lineHeight

cssText是读写都是整条读写的，所以D是会报错的。substring（开始位置，结束位置）是提取字符串的返回子串的方法，slice（开始位置，结束位置）是选取一部分的方法。，不同的是element.style是一个样式的list对象，所以A会报错的。

十三、多选(4分)
下面属于鼠标事件的有

解：选BCD

十四、多选(4分)
下面哪些事件可以冒泡

解：选AB。

十五、多选(4分)
下面哪些方式可以实现浏览器当前窗口跳转到“http://www.163.com”

解：选BCD。

十六、多选(4分)
两个页面如果属于同源，那么它们的url中哪几项是相同的?

A.port

B.url

C.protocol

D.host

解：选ACD。url包括如下，同源的意思是host一致，protocol一致，端口一致。

十七、多选(4分)
以下哪几个属性的组合是可以唯一标识一个cookie值

解：选ABC。

十八、多选(4分)
以下哪些是cookie的属性

解：选ABCD。

十九、多选(4分)
以下哪些方案可以进行浏览器端的存储

解：BCD。A是服务器端的存储。

二十、多选(4分)
如果html元素’<select id="age"></select>’对应的DOM节点是age，那么以下选项中可以创建age元素的选项(即option元素)的有

解：选BD

二十一、判断(1分)
head元素里的内容不会在页面中显示, 因此也不会解析成文档树中的节点

解：A。

二二、判断(1分)
如果html元素对应的DOM节点为element,那么element.class能够获取到该元素的类名

解：A。element.className。

二十三、判断(1分)
如果html元素对应的DOM节点为element,那么element.style能够获取到该元素的实际样式

二四、判断(1分)
如果html元素对应的DOM节点为element, element.sheet能够获取到该元素的实际样式

解：A。

二五、判断(1分)
<audio>的属性autoplay和preload可以同时生效

解：选B。preload属性规定是否在页面加载后载入音频。 如果设置了 autoplay属性,则忽略该属性。

二六、XMLHttpRequest对象发送请求前，一定要先设置http头部信息

解：选A。

二七、判断(1分)
调用XMLHttpRequest.open()方法，会向服务器发送数据

解：选B。

二八、判断(1分)
调用XMLHttpRequest.send()方法，一定要传入参数

解：选A。

二九、判断(1分)
cookie是存储在浏览器端的

解：选A。

三十、判断(1分)
requestAnimationFrame可以自定义时间间隔

三一、填空(2分)
如果html元素’ <ul id="courses"><li id="x">实用技能</li><li id="y">高等教育</li></ul>’中id为x的元素对应的DOM节点为x, 那么x.__________________属性可以获取到id为courses的元素。

解：parentNode

三二、填空(2分)
如果表单’ <form><input id="userName" name="userName"></form>’对应的DOM节点是form，现在要获取input节点, 以下是实现这个操作对应的代码，请补全代码:
var input = document._________________ ('userName');

解：getElementById。

三三、填空(2分)
如果要创建html为’<label>用户名：</label>’的DOM节点, 以下是实现这个操作对应的代码，请补全代码:
var label = document._________________('label');
label.textContent = "用户名：";

解：createElement。

三四、填空(2分)
如果表单’ <form><input id="userName" name="userName"></form>’对应的DOM节点是form， input元素对应的DOM节点为input, 现在在form下面添加节点label，添加后form对应的html元素为’ <form><label>用户名：</label><input id="userName" name="userName"> </form>’, 以下是实现这个操作对应的代码，请补全代码:
form._________________(label, input);

解：insertBefore。

三五、填空(2分)
如果手机号输入框’<input id="mobile" type="text">’对应的DOM节点是mobile，现在要获取该输入框的type属性，以下是实现这个操作对应的代码，请补全代码：
mobile.__________________("type" );

解：getAttribute。

三六、填空(2分)
如果内部样式表
<style>
.m-nav{font-size: 14px;}
.m-nav li{width: 100px;padding-left: 20px;}
</style>
对应的DOM节点是element，那么要获取样式表中第二条规则中padding-left的属性值, 以下是实现这个操作对应的代码，请补全代码:
element.sheet.cssRules[1].style._____________
解：paddingLeft

三七、填空(2分)
通过audio元素的_______________方法可以测试浏览器对音频资源的兼容性

解：canPlayType检查浏览器是否能够播放指定的音频类型。

三八、填空(2分)
在form的________________事件响应函数中可以阻止表单提交。

解：onsubmit

三九、填空(2分)
使用form的____________方法可以重置表单。

解：reset。

四十、填空(2分)
如果手机号输入框’ <input id="mobile" value="13565346787">’对应的DOM节点是mobile，那么以下代码实现选中输入框中的内容，请补全代码:
mobile._______________();

解：select

上一篇 下一篇

猜你喜欢

热点阅读