当前位置:网站首页>七、DOM(下) - 章节课后练习题及答案

七、DOM(下) - 章节课后练习题及答案

2022-04-23 18:35:00 熊先森的宝

第一章链接:初识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>

版权声明
本文为[熊先森的宝]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_57002282/article/details/124355505