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

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

  • A.4

  • B.5

  • C.2

  • D.1

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

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

  • A.false

  • B.0

  • C.1

  • D.true

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

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

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

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

  • A.e.returnValue = false

  • B.e.preventDefault()

  • C.e.stopImmediatePropagation()

  • D.e.stopPropagation()

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

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

  • A.选中

  • B.目标

  • C.冒泡

  • D.捕获

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

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

  • A.1~100

  • B.1~10

  • C.0~100

  • D.0~1

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

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

  • A.appVersion

  • B.appName

  • C.platform

  • D.userAgent

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

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

  • A.window

  • B.iframe

  • C.alert

  • D.prompt

解:选D。

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

  • A.400

  • B.200

  • C.404

  • D.500

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

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

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

  • A.http

  • B.expires

  • C.path

  • D.name

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

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

  • A."multipart/form-data"

  • B."image/png"

  • C."text/plain"

  • D."text/html"

解:选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"

  • A.element.getAttribute("first-name")

  • B.element.dataset["data-first-name"]

  • C.element.dataset.firstName

  • D.element.getAttribute("data-first-name")

解:选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"的有

  • A.element.style.substring(13,-1)

  • B.element.style.lineHeight

  • C.element.style.cssText.slice(13,-1)

  • D.element.style.cssText.lineHeight

解:选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分)
下面属于鼠标事件的有

  • A.input

  • B.mousedown

  • C.mouseenter

  • D.click

解:选BCD

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

  • A.focus

  • B.click

  • C.load

  • D.input

解:选AB。

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

解:选BCD。

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

A.port

B.url

C.protocol

D.host

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

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

  • A.path

  • B.domain

  • C.name

  • D.secure

解:选ABC。

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

  • A.path

  • B.domain

  • C.name

  • D.value

解:选ABCD。

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

  • A.mysql

  • B.cookie

  • C.indexedDB

  • D.localStorage

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

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

  • A.age.options.add()

  • B.document.createElement("option")

  • C.age.add()

  • D.new Option()

解:选BD

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

  • A.×

  • B.√

解:A。

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

  • A.×

  • B.√

解:A。element.className。

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

  • A.×

  • B.√
    解:A,element.style是一个样式对象。

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

  • A.×

  • B.√

解:A。

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

  • A.√

  • B.×

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

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

  • A.×

  • B.√

解:选A。

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

  • A.√

  • B.×

解:选B。

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

  • A.×

  • B.√

解:选A。

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

  • A.√

  • B.×

解:选A。

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

  • A.×

  • B.√
    解:setTimeout和setInterval才可以自定义时间间隔,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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • 【1】7,9,-1,5,( ) A、4;B、2;C、-1;D、-3 分析:选D,7+9=16;9+(-1)=8;(...
    Alex_bingo阅读 18,760评论 1 19
  • 人为什么不能接受别人意见? 背后大部分原因不是自以为是、心胸狭小……这是只是表象,真正的原因是内心深深的自卑。 自...
    国仕空间阅读 400评论 0 0
  • 坚持,是一个烂在人们耳边的话。一个饱含人生哲理的废话。同时又逃不开成为成功的秘诀之一。 世上努力的人很多,坚持努力...
    爱面包的四夕阅读 312评论 0 4
  • 大部分人缺失的根本不是钱,而是对生活的热情、对美好生活的向往和追求,以及这些强烈的追求和热情所激发出来的奇思妙想。...
    菲乐阅读 214评论 0 2