美文网首页
DOM、事件

DOM、事件

作者: 王康_Wang | 来源:发表于2016-08-18 10:39 被阅读0次
1. dom对象的innerText和innerHTML有什么区别？
  • innerText用于获取元素内的文本内容；
  • innerHTML用于获取元素内的HTML结构。
2. elem.children和elem.childNodes的区别？
  • elem.children属性返回一个动态的HTMLCollection集合，由当前节点所有的Element子节点组成；
  • elem.childNodes属性返回一个NodeList对象（类数组对象），包括但不限于Element节点，还包括Text节点（换行，空格）和
    注释节点。
3. 查询元素有几种常见的方法？
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
    <style type="text/css">

    </style>
  </head>
  <body>
    <div id="div1" class="wrap">
      <a href="#" name="link1">jirengu</a>
    </div>
    <div id="div2" class="wrap">
      <a href="#" name="link2">hello <span>world</span></a>
    </div>

    <script type="text/javascript">
      var byId = document.getElementById('div1');                 // 1
      var byCls = document.getElementsByClassName('wrap');        // 2
      var byTgName = document.getElementByTagName('span');        // 3
      var byName = document.getElementByName('link1');            // 4
      var getEl = document.querySelector('#div1');                // 5
      var getEls = document.querySelectorAll('.wrap');            // 6

    </script>
  </body>
</html>
4. 如何创建一个元素？如何给元素设置属性？
  • 可以通过createElement()方法创建新的HTML元素节点；通过setAttribute()方法设置元素属性。
var newDiv = document.createElement('div');
newDiv.setArrribute('class','wrap');
5. 元素的添加、删除？
  • 使用appendChild方法在元素内的最后位置添加新元素节点；通过removeChild方法删除元素。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
    <style type="text/css">
      #purchases .sale {
        color:red;
      }
    </style>
  </head>
  <body>
    <h1>What to buy</h1>
    <p>Don't forget to buy this stuff.</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li class="sale">Cheese</li>
      <li class="sale important">Milk</li>
    </ul>
    <script type="text/javascript">
      var newLi = document.createElement('li');             // 创建新的 li 元素节点
      var oldLi = document.querySelector('.important');     // 获取需要删除的元素节点
      var newContent = document.createTextNode('Apple')     // 创建新的内容节点
      var ul = document.getElementById('purchases');        // 获取需要添加位置的父元素节点
      ul.removeChild(oldLi);                                // 从父节点上删除子节点
      newLi.appendChild(newContent);                        // 将内容节点添加到新的 li 节点上
      newLi.setAttribute('class','sale');                   // 给新的 li 节点添加 class 属性
      ul.appendChild(newLi);                                // 将 newLi 添加到 HTML 内
    </script>
  </body>
</html>
Paste_Image.png
6. DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
  • DOM0事件是将时间作为元素的一个属性，当需要对事件进行监听时，只要将需要执行的函数赋值给这个属性即可，需要删除该事件监听是只需将该属性的值改为null即可；该方法操作直观简便，兼容性最好，但一个事件只能绑定一个函数。
  // HTML
  var btn = document.querySelector('#btn');
  // JS
  btn.onclick = function() {
    console.log('DOM0');
  }
  • DOM2级事件是使用元素的addEventListener和removeEventListener方法对事件进行监听，事件类型和处理函数做为上述方法的参数，其中addEventListener方法只能通过removeEventListener取消。该方法可以为一个事件绑定多个函数。
  // HTML
  var btn = document.querySelector('#btn');
  // JS
  btn.addEventListener('click', function(){
    console.log('DOM2');
  })
7. attachEvent与addEventListener的区别？
  • addEventListener对IE8 及之前的版本不兼容，只能用attachEvent对事件进行监听，同时，监听事件的取消也只能用detachEvent实现而不能使用removeEventListener。
Paste_Image.png
  • attachEvent添加的事件处理程序只能发生在事件冒泡过程中，而addEventListener的第三个参数可以决定事件处理程序是在捕获阶段还是在冒泡阶段处理，一般浏览器默认发生在冒泡阶段（即第三个参数默认为false）；
  • addEventListener方法第一个参数是事件类型（如click、load），而attachEvent的第一个参数是事件名称（如onclick、onload）；
  • 二者事件处理程序的作用域不同。addEventListener事件的作用域是元素本身，而attachEvent的事件处理程序会在全局作用域内运行；
  • 为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener会按照处理程序添加的顺序执行，而attachEvent执行多个事件处理程序的顺序没有规律。
8. 解释IE事件冒泡和DOM2事件传播机制？
  • IE事件冒泡机制中事件最开始是由最具体的元素接收，然后向其祖先元素进行传播，其祖先元素可以在此过程中接收事件并引发事件处理程序；
  • DOM2事件传播在根节点到事件发生的具体元素过程中提供了截取事件的机会，然后则是冒泡机制。
9. 如何阻止事件冒泡？ 如何阻止默认事件？
  • 通过stopPropagation()方法可以阻止事件冒泡；
  • 通过preventDefault()可以阻止默认事件。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22</title>
    <style type="text/css">
      .wrap {
        height:100px;
        width:100px;
        background-color:red;
        margin:50px;
      }
      .main {
        height:70px;
        width:70px;
        background-color:yellow;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="main">
        <a class="link" href="http://jirengu.com/">饥人谷</a>
      </div>
    </div>
    <script type="text/javascript">
      var wrap = document.querySelector('.wrap');
      var main = document.querySelector('.main');
      var link = document.querySelector('.link');
      wrap.addEventListener('click', function(){
        console.log('wrap');
      })
      main.addEventListener('click', function(){
        console.log('main');
      })
      link.addEventListener('click', function(e){
        e.preventDefault();
        console.log('link');
        e.stopPropagation();
      })
    </script>
  </body>
</html>

单击链接，实现如下效果：


Paste_Image.png

代码题

1. 有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

实现效果

  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端9班</li>
  </ul>
  <script>
    function $(str) {
      return document.querySelector(str);
    }
    function $$(str) {
      return document.querySelectorAll(str);
    }
    var ul = $('.ct');
    ul.addEventListener('click', function(e){
      console.log(e.target.innerText);
    })
  </script>
2. 补全代码，要求：
  • 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
  • 当点击每一个元素li时控制台展示该元素的文本内容。
    实现效果 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-2</title>
  </head>
  <body>
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
    <input class="ipt-add-content" placeholder="添加内容"/>
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
    <script>
      function $(str){
        return document.querySelector(str);
      }
      function $$(str){
        return document.querySelectorAll(str);
      }
      var ul = $('.ct');
      var ipt = $('.ipt-add-content');
      var btnAddStart = $('#btn-add-start');
      var btnAddEnd = $('#btn-add-end');
      // 当文本框内容发生改变时获取文本框value值并添加至新建的li标签内
      ipt.addEventListener('change', function(){
        newLi = document.createElement('li');
        newLi.innerText = ipt.value
      })
      // 定义两个按钮的单击事件
      btnAddStart.addEventListener('click', function() {
        ul.insertBefore(newLi,ul.firstChild);
        ipt.value = '';
      })
      btnAddEnd.addEventListener('click', function() {
        ul.appendChild(newLi);
        ipt.value = '';
      })
      ul.addEventListener('click', function(e){
        if(e.target.tagName.toLowerCase() === 'li') {
          console.log(e.target.innerText);
        }
      })
    </script>
  </body>
</html>
3. 补全代码，要求：当鼠标放置在li元素上，会在````img-preview里展示当前li元素的data-img```对应的图片.

实现效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-3</title>
  </head>
  <body>
    <ul class="ct">
        <li data-img="images/task22-3-1.jpg">鼠标放置查看图片1</li>
        <li data-img="images/task22-3-2.jpg">鼠标放置查看图片2</li>
        <li data-img="images/task22-3-3.jpg">鼠标放置查看图片3</li>
        <li data-img="images/task22-3-4.jpg">鼠标放置查看图片4</li>
    </ul>
    <div class="img-preview"></div>
    <script>
      var ul = document.querySelector('.ct');
      var div = document.querySelector('.img-preview');
      var newImg = document.createElement('img');
      ul.addEventListener('mouseover', function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
          var src = e.target.getAttribute('data-img');
          newImg.src = src;
          div.appendChild(newImg);
        }
      })
    </script>
  </body>
</html>
4. 实现如下图Tab切换的功能

图片地址
实现效果
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-4</title>
    <style type="text/css">
      #tab {
        border-collapse: collapse;    /* 合并边框 */
        width: 500px;
        border: 1px solid #888;
        border-spacing: 0;
      }
      #tab td {
        border: 1px solid #888;
        padding: 0;
      }
      .tabs td {
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      .tabs .active {
        background-color: #ccc;
      }
      #tab .main {
        height: 100px;
      }
      #tab .main td li {
        list-style: none;
        padding: 10px;
        display: none;
      }
      #tab .main .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <table id="tab">
      <tr class="tabs">
        <td>tab1</td>
        <td>tab2</td>
        <td>tab3</td>
      </tr>
      <tr class="main">
        <td colspan="3">
          <ul>
            <li class="active">内容一</li>
            <li>内容二</li>
            <li>内容三</li>
          </ul>
        </td>
      </tr>
    </table>
    <script type="text/javascript">
      var tabs = $('.tabs')
      var tabArr = $$('.tabs>td');
      var mainArr = $$('.main li');
      tabs.addEventListener('click', function(e){             // 在tabs上加时间监听
        var clickNode = e.target;
        if (clickNode.tagName.toLowerCase() === 'td') {       // tabs的点击效果
          for (var i=0; i<tabArr.length; i++){
            tabArr[i].classList.remove('active');
          }
          clickNode.classList.add('active');
        }
        var index = [].indexOf.call(tabArr,clickNode);        // 利用index将tabs和mainList联系起来
        for (var i=0; i<mainArr.length; i++){
          mainArr[i].classList.remove('active');
        }
        mainArr[index].classList.add('active');
      })

      function $(str) {
        return document.querySelector(str);
      }
      function $$(str) {
        return document.querySelectorAll(str);
      }
    </script>
  </body>
</html>
5. 实现下图的模态框功能

图片地址
实现效果
代码：

  • HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task22-5</title>
    <link rel="stylesheet" href="task22-5.css">
  </head>
  <body>
    <div class="btn-wrap">
      <button type="button" id="btn-boss">点我</button>
    </div>
    <div class="modal">
      <div class="dialog-box">
        <div class="header">
          <h1>我是标题</h1>
          <a class="close icon-close" href="#"></a>
        </div>
        <div class="contents">
          <p>我是内容1</p>
          <p>我是内容2</p>
        </div>
        <div class="footer">
          <a class="btn confirm" href="#">确定</a>
          <a class="btn cancel" href="#">取消</a>
        </div>
      </div>

    </div>
    <script type="text/javascript" src="task22-5.js"></script>
  </body>
</html>
  • CSS
div,p,h1,h2,h3,h4,h5,h6,a,button{
  margin: 0;
  padding: 0;
  font-size: 16px
}
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1471481907'); /* IE9*/
  src: url('iconfont.eot?t=1471481907#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1471481907') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1471481907') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1471481907#iconfont') format('svg'); /* iOS 4.1- */
}
.icon-close {
  font-family:"iconfont" ;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-close:before { content: "\e62d"; }
a {
  text-decoration: none;
  color: #333;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3)
}
.dialog-box {
  width: 400px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.dialog-box .header {
  border-bottom: 1px solid #aaa;
}
.dialog-box .header h1 {
  line-height: 40px;
  display: inline-block;
  margin-left: 15px;
}
.dialog-box .header .close {
  display: table-cell;
  float: right;
  line-height: 40px;
  margin-right: 15px;
}
.dialog-box .contents {
  padding:15px;
  border-bottom: 1px solid #ccc;
}
.dialog-box .contents p {
  line-height: 30px;
}
.dialog-box .footer .btn {
  line-height: 40px;
  float: right;
  margin-right: 15px;
}
  • JS
function $(str) {
    return document.querySelector(str);
}
function $$(str) {
    return document.querySelectorAll(str);
}
var btnBoss = $('#btn-boss');
var modal = $('.modal');
var dialogBox = $('.dialog-box');
function hasClass(ele, cls) {
    var reg = new RegExp('\\b' + cls + '\\b','ig');
    return reg.test(ele.className)
}
btnBoss.addEventListener('click', function(){
    modal.style.display = 'block';
})
dialogBox.addEventListener('click', function(e){
    e.stopPropagation();
    if (hasClass(e.target, 'close') || hasClass(e.target, 'cancel')) {
        modal.style.display = 'none';
    }
})
modal.addEventListener('click', function(e){
    modal.style.display = 'none';
})

本教程版权归本人和饥人谷所有，转载请注明来源。

相关文章

  • 前端面试题（3）——DOM事件类

    基本概念：DOM事件的级别 DOM事件模型：事件冒泡事件捕获 DOM事件流 描述DOM事件捕获的具体流程 Even...

  • DOM事件

    DOM级别与DOM事件 DOM级别：DOM0级、DOM1级、DOM2级、DOM3级DOM事件：DOM0级事件处理、...

  • DOM事件

    DOM级别与DOM事件 DOM级别：DOM0级，DOM1级，DOM2级和DOM3级DOM事件：DOM0级事件处理，...

  • DOM0和DOM2级事件简单理解

    关于DOM0 和DOM1级事件可以简单理解为：事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • 3-6 DOM事件

    问题 DOM 事件的级别 DOM 事件模型(就是捕获和冒泡儿) DOM 事件流 描述DOM事件捕获的具体流程 Ev...

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

    基本概念：DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

网友评论

      本文标题：DOM、事件

      本文链接：https://www.haomeiwen.com/subject/ebersttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|DOM、事件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！