前端开发工程师 - 03.DOM编程艺术 - 期末考试

期末考试客观题

返回

 

 倒计时： 01:24

1

单选(2分)

以下选项中不是节点类型的是

• A.

  COMMENT_NODE

• B.

  DOCUMENT_NODE

• C.

  BODY_NODE

• D.

  ELEMENT_NODE

2

单选(2分)

如果html元素

<div>欢迎<a href="/profile">Jerry</a>同学!</div>

对应的DOM节点是element，那么element.childNodes.length的值为

• A.

  3

• B.

  2

• C.

  1

• D.

  6

3

单选(2分)

如果html元素

<button id="ok" disabled>确定</button>

对应的DOM节点为ok， 那么ok. getAttribute('disabled')的值为

• A.

  "disabled"

• B.

  ""

• C.

  false

• D.

  true

4

单选(2分)

如果html元素

<input id="userName">

对应的DOM节点为userName， 那么userName.type的值为

• A.

  true

• B.

  ""

• C.

  "text"

• D.

  undefined

5

单选(2分)

在当前域和当前路径下，有一个cookie值为"name=netease"。以下哪一种方式不能立即删除该cookie值

• A.

  document.cookie = "name=netease; max-age=0"

• B.

  document.cookie = "name=netease; expires=Thu, 01 Jan 1970 00:00:00 GMT"

• C.

  document.cookie = "name=; expires="+new Date().toUTCString()

• D.

  document.cookie = "name=netease; expires=Fri, 31 Dec 2046 23:59:59 GMT"

6

单选(2分)

要在浏览器当前窗口载入新的url，并且旧的url不记录进浏览历史，可以调用location对象的哪个方法

• A.

  goto

• B.

  skip

• C.

  replace

• D.

  assign

7

单选(2分)

如果html元素

<div id="user"><span id="name" class="name">jordan</span></div>

对应的DOM节点是user，那么以下选项获取不到id为name的节点的是

• A.

  user.getElementsByTagName("span")[0]

• B.

  user.getElementById("user")

• C.

  user.childNodes[0]

• D.

  user.lastChild

8

单选(2分)

如果html元素

<style>

p{width: 200px;margin-bottom: 10px;}

.user{float: left; color: #fff;}

</style>

对应的DOM节点为element， 那么以下表达式中值为"200px"的是

• A.

  element.styleSheet.rules[0].style[0]

• B.

  element.sheet.cssRules[1].style.width

• C.

  element.sheet.cssRules[0].style.width

• D.

  element.styleSheet.cssRules[0].style.width

9

单选(2分)

以下哪个HTTP状态码表示“未找到资源”

• A.

  500

• B.

  404

• C.

  200

• D.

  301

10

单选(2分)

以下XMLHttpRequest对象的方法调用顺序不正确的是

• A.

  open->send->abord

• B.

  open->setRequestHeader->send

• C.

  open->setRequestHeader->send->abord

• D.

  setRequestHeader->send->open

11

多选(4分)

以下选项中属于事件流的三个阶段的有

• A.

  spread

• B.

  target

• C.

  capture

• D.

  bubble

12

多选(4分)

当Ajax请求完成时，以下哪些事件会被触发

• A.

  loadstart

• B.

  start

• C.

  load

• D.

  readystatechange

13

多选(4分)

如果要改变cookie的值，需要指定相同的

• A.

  domain

• B.

  path

• C.

  name

• D.

  max-age

14

多选(4分)

下面哪些方式可以实现浏览器当前窗口跳转到"http://www.163.com"

• A.

  window.goto("http://www.163.com")

• B.

  window.moveto("http://www.163.com")

• C.

  window.location.replace("http://www.163.com")

• D.

  window.location.assign("http://www.163.com")

15

多选(4分)

如果html元素

<div class="user"></div>

对应的DOM节点为element, 那么以下表达式的值为"user"的有

• A.

  element.className

• B.

  element ['class']

• C.

  element.class

• D.

  element. getAttribute('class')

16

判断(1分)

如果html元素

<p>hello, <span id="s0"> world </span> </p>

对应的DOM节点是element，那么element.firstChild为文本节点。

• A.
  ×
• B.
  √

17

判断(1分)

如果html元素

<button onclick="alert(1);">保存</button>

对应的DOM节点是element，那么element.onclick的值为"alert(1);"。

• A.
  ×
• B.
  √

18

判断(1分)

document.styleSheets是页面中外联样式表的集合。

• A.
  √
• B.
  ×

19

判断(1分)

如果html元素

<h1 style="font-size: 20px">网易公开课</h1>

对应的DOM节点为element， 那么element.style的值为"font-size: 20px"。

• A.
  √
• B.
  ×

20

判断(1分)

BOM就是Window对象。

• A.
  √
• B.
  ×

21

判断(1分)

如果head元素对象的DOM节点为element，那么element.parentNode对应body元素

• A.
  ×
• B.
  √

22

判断(1分)

如果html元素

<link rel="stylesheet" href="css/style.css">

对应的DOM节点是link， 那么link.sheet表示"css/style.css"样式表对象。

• A.
  √
• B.
  ×

23

判断(1分)

Ajax是Asynchronous JavaScript and XML的简称，所以它只支持XML作为通信的数据格式。

• A.
  √
• B.
  ×

24

判断(1分)

设置一个cookie值，如果不指定它的有效期，那么它将永久有效。

• A.
  ×
• B.
  √

25

判断(1分)

当浏览器窗口弹出alert对话框时，浏览器的JavaScript线程会被阻塞。

• A.
  √
• B.
  ×

26

填空(2分)

如果html元素

<div id="user" data-first-name="Wiliams" data-last-name="Tom" data-gender="male" data-age="12">tom</div>

对应的DOM节点为user， 那么user.__________________的值为 {firstName: "Wiliams", lastName: "Tom", gender: "male", age: "12"}

27

填空(2分)

以下代码用于获取画布对象canvas的2d渲染上下文，请补全代码：

canvas._________________("2d");

28

填空(2分)

XMLHttpRequest对象的________________属性表示文本形式的响应主体

29

填空(2分)

根据Navigator对象的_____________属性，可以判断出浏览器的内核信息

30

填空(2分)

如果html元素

<div>欢迎<span id="x">你</span>，来到<span id="y">网易云课堂</span></div>

对应的DOM节点为element, 那么element._________________属性可以获取到id为y的元素。

31

填空(2分)

如果html元素

<div>欢迎<span id="x">你</span>，来到<span id="y">网易云课堂</span></div>

中id为y的元素对应的DOM节点为y, 那么y.___________________属性可以获取到id为x的元素。

32

填空(2分)

如果html元素

<ul id="nums"><li>1</li><li>2</li><li>3</li></ul>

对应的DOM节点为nums，那么以下代码：

nums._________________(nums.lastChild, nums.firstChild);

运行后，nums对应的html为

<ul id="nums"><li>3</li><li>2</li></ul>

33

填空(2分)

如果html元素

<div id="lesson">云课堂是<a href="http://www.163.com">网易</a>公司倾力打造的在线学习平台</div>

对应的DOM节点为lesson，那么以下代码：

lesson._________________(lesson.lastChild);

运行后，lesson对应的html为

<div id="lesson">云课堂是<a href="http://www.163.com">网易</a></div>

34

填空(2分)

如果用户名输入框

<input id="userName">

对应的DOM节点是userName，现在要设置输入框的值为"jerry"，以下是实现这个操作对应的代码，请补全代码：

userName.________________("value" ,    "jerry");

35

填空(2分)

服务器可以通过Response Headers的_________________字段来设置浏览器的cookie

期末考试主观题

http://www.jianshu.com/p/cb0c7dafd2cc

1

（5分）

请写出以下DOM树对应的HTML

<div>
    <h3><a href="">乔丹</a></h3>
    <p>NBA<em>最伟大</em>的球员</p>
</div>

 

 

2

（20分）

下图是网易博客“关于我”页面编辑生日时的日期级联下拉选择框的效果图：

初始的html代码如下：

<select name="year" id="year">

<option value="0">--</option>

<option value="1999">1999</option>

<option value="2000">2000</option>

<option value="2001">2001</option>

</select>年

<select name="month" id="month">

<option value="0">--</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>月

<select name="date" id="date">

<option value="0">--</option>

</select>日

现需求如下：

1. “年”或“月”发生变化且为有效值时，“日”下拉选择框显示相应的项。

2. “年”下拉选择框为初始状态（即值为0）时， “月”、“日”下拉选择框一定为初始状态（即值为0）。

3. “月”下拉选择框为初始状态（即值为0）时， “日”下拉选择框一定为初始状态（即值为0）。

请写出以上需求的实现代码，要求浏览器兼容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期末主观题2--页面编辑生日时的日期级联下拉选择框</title>
    <script type="text/javascript">

    function addEvent (elem, type, listener, useCapture) {
        if (document.addEventListener) {
            elem.addEventListener(type, listener, useCapture);
        } else {
            elem.attachEvent('on' + type, listener);
        }
    }

    function process() {
        var elementYear = document.getElementById('year');
        var elementMonth = document.getElementById('month');
        var elementDate = document.getElementById('date');
        var year, month, date;
        getCurrentInput();

        function getDays (year, month) {
            var days = 0;
            if(year!=0 && month!=0) {
                // year and month are set
                days = new Date(year, month, 0).getDate();
            }
            return days;
        }

        function addDayOptions(numdays) {
            // reset days and append new number of days
            elementDate.innerHTML = '<option value="0">--</option>';
            for(var i = 1; i <= numdays; i++) {
                var option = document.createElement('option');
                 option.appendChild(document.createTextNode(''+i));
                 option.setAttribute('value',''+i);
                 elementDate.appendChild(option);
            }
        }

        function getCurrentInput () {
            year = elementYear.options[elementYear.selectedIndex].value;
            month = elementMonth.options[elementMonth.selectedIndex].value;
            date = elementDate.options[elementDate.selectedIndex].value;
        }

        function check () {
            getCurrentInput();
            if (year == 0) {
                // if year has not been set yet
                elementMonth.options[0].selected = true;
            }
            addDayOptions(getDays(year, month));
        }

        addEvent(elementYear, 'change', check);

        addEvent(elementMonth, 'change', check);
    }

    addEvent(window,'load', process);

    </script>
</head>
<body>
    <select name="year" id="year">
        <option value="0">--</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
    </select>年
    <select name="month" id="month">
        <option value="0">--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>月
    <select name="date" id="date">
        <option value="0">--</option>
    </select>日
</body>
</html>