七、DOM（下） - 章节课后练习题及答案

第一章链接：初识JavaScript - 章节课后练习题及答案

第二章链接：JavaScript 基础（上） - 章节课后练习题及答案 

第三章链接：JavaScript 基础（下） - 章节课后练习题及答案

第四章链接：JavaScript 函数 - 章节课后练习题及答案

第五章链接：JavaScript 对象 - 章节课后练习题及答案

第六章链接：DOM（上） - 章节课后练习题及答案

注：使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。

---

一、填空题

        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>

        2、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)
        }
    }
</script>

        3、CSS样式代码如下（要显示与作业截图一致的效果需添加CSS代码，不添加CSS代码不影响功能）：

<style>
        body{
          width: 100%;
          margin: o auto;
          height: 300px;
          position: fixed;
        }
        table {
            width: 500px;
            height: auto;
            position: relative;
            left:50%;
            margin-left: -250px;
            justify-content: center;
            align-content: center;
            align-items: center;
        }
        tr{
          display: flex;
          justify-content: center;
          align-content: center;
          align-items: center;
          border-bottom: 1px solid #333;
          text-align: center;
        }
        td,
        th {
            flex:1;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>