网页交互开发高级第七章课后习题及答案

课后习题：

一、 填空题

1. 排他思想的实现步骤是______与______。

2. HTML 5新增了通过______方式设置自定义属性。

3. HTML 5中通过______获取自定义属性。

4. ______属性可以获取元素的所有子元素节点，它是一个可读属性。

5. DOM根据HTML中各节点的不同作用，将文档中的注释单独划分为______。

二、 判断题

1. 使用document.createElement()可以创建元素节点。（  ）

2. 键盘事件对象是KeyBoardEvent。（  ）

3. 低版本的IE浏览器（IE 6~IE 8）中，可以通过event获取事件对象。（  ）

4. appendChild()方法表示将一个节点添加到指定父节点的子节点列表前面。（  ）

5. cloneNode()方法表示返回调用该方法的节点的一个副本，也称为克隆节点。（  ）

三、 选择题

1. 下列选项中，可以实现创建元素的是（  ）。

A. element.push('<p>你好</p>')     B. element.pop('<p>你好</p>')

C. element.innerHtml = '<p>你好</p>'  D. document.createElement("p")

2. 关于添加元素，下列选项描述错误的是（  ）。

A. innerHTML会覆盖原来的元素

B. appendChild 是在父元素内部追加

C. insertBefore是在父元素内部指定的位置添加

D. createElement创建的元素立即会添加到页面中

3. 关于事件对象，描述错误的是（  ）。

A. 事件对象的属性中保存了跟事件相关的一系列信息

B. 事件触发时就会产生事件对象

C. 事件对象的获取有兼容性问题

D. 通过事件对象不可以阻止事件冒泡和默认行为

4. 下列选项，可以正确获取到兼容了各个浏览器的事件对象的是（  ）。

A. document.onclick = function (event) { var e = window.event || event; }

B. document.onclick = function (event) { var e = window.evt || event; }

C. document.onclick = function (event) { var e = window.event || evt; }

D. document.onclick = function (event) { var e = window.evt || evt; }

5. 关于事件监听，描述错误的是（  ）。

A. 可以给同一元素同一事件注册多个监听器

B. addEventListener() 有浏览器兼容问题

C. addEventListener() 方法有两个参数

D. 低版本的IE可以使用attachEvent代替addEventListener

四、 简答题

1. 请简单介绍排他操作的一般实现步骤。

2. 请解释说明childNodes和children的区别。

五、 编程题

完成动态生成表格案例，具体要求如下。

① 使用数组把学生数据模拟出来。

② 动态创建行、单元格。

③ 为单元格填充数据。

④ 提供“删除”链接，可删除所在的行。

案例的实现效果如下图所示。

动态生成表格

答案：

一、 填空题

1. 所有元素全部清除 设置当前元素

2. data-属性名

3. element.dataset.属性 或者 element.dataset['属性']

4. children

5. 注释节点

二、 判断题

1. 对

2. 对

3. 对

4. 错

5. 对

三、 选择题

1. D

2. D

3. D

4. A

5. C

四、 简答题

1. 请简单介绍排他操作的一般实现步骤。

第一步是：所有元素全部清除（排除掉其他的（包括自己））

第二步是：设置当前元素（给自己设置想要实现的效果）

2. 请解释说明childNodes和children的区别。

childNodes：属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合

children: 是一个可读的属性，返回所有子元素节点，只返回子元素节点，其余节点不返回

五、 编程题

1. HTML代码如下：

 <table cellspacing="0">

  <thead>

    <tr>

      <th>姓名</th>

      <th>科目</th>

      <th>成绩</th>

      <th>操作</th>

    </tr>

  </thead>

  <tbody>

  </tbody>

</table>

JavaScript代码如下：

<script>

  // 1.先去准备好学生的数据

  var datas = [{

      name: '张三',

      subject: 'JavaScript',

      score: 100

  }, {

      name: '李四',

      subject: 'JavaScript',

      score: 90

  }, {

      name: '刘五',

      subject: 'JavaScript',

      score: 90

  }];

    // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行

    var tbody = document.querySelector('tbody');

    for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr

        // 1. 创建 tr行

        var tr = document.createElement('tr');

        tbody.appendChild(tr);

        // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]

        for (var k in datas[i]) { // 里面的for循环管列 td

            // 创建单元格 

            var td = document.createElement('td');

            // 把对象里面的属性值 datas[i][k] 给 td  

            // console.log(datas[i][k]);

            td.innerHTML = datas[i][k];

            tr.appendChild(td);

        }

        // 3. 创建有删除2个字的单元格 

        var td = document.createElement('td');

        td.innerHTML = '<a href="javascript:;">删除 </a>';

        tr.appendChild(td);

    }

    // 4. 删除操作开始 

    var as = document.querySelectorAll('a');

    for (var i = 0; i < as.length; i++) {

        as[i].onclick = function() {

            // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  

            tbody.removeChild(this.parentNode.parentNode)

        }

    }

    // for(var k in obj) {

    //     k 得到的是属性名

    //     obj[k] 得到是属性值

    // }

</script>