DOM、事件

作者: 块垒 | 来源:发表于2016-08-26 19:38 被阅读53次

前端面试题（3）——DOM事件类
DOM事件
DOM事件
DOM0和DOM2级事件简单理解
Dom事件
3-6 DOM事件
HTML DOM 事件
网易微专业-DOM编程艺术 05 事件
DOM事件类
DOM事件

dom对象的innerText和innerHTML有什么区别？

innerText：返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML：类似innerText，但是返回的是元素的HTML结构，在写入的时候会自动构建DOM。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    测试
  </div>
  <div id="div2">
    测试
  </div>
  <script>
    var div1=document.getElementById('div1');
    var div2=document.getElementById('div2');
  </script>
</body>
</html>

innerHTML和innerText

elem.children和elem.childNodes的区别？

elem.children：子列表元素（HTMLCollention）获取标签
elem.childNodes:（NodeList）获取所有子节点，包括空白的所有字段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    <p>测试</p>
  </div>
  <script>
    var div1=document.getElementById('div1');
  </script>
</body>
</html>

children和childNodes

查询元素有几种常见的方法？

document.getElementById()：获得id元素
document.getElementsByClassName()：获得class元素
document.getElementsByTagName()：返回带有指定标签名的对象的集合。
document.querySelector()：返回当前文档中第一个匹配特定选择器的元素
document.querySelectorAll()：返回当前文档中匹配一个特定选择器的所有的元素

如何创建一个元素？如何给元素设置属性？

创建元素：

createElement()：创建元素节点
createTextNode()：创建文本节点
createDocumentFragment()：生成一个DocumentFragment对象。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    
  </div>
  <script>
    var para=document.createElement('p');
    var div=document.getElementById('div1');
    div.appendChild(para);
    var text=document.createTextNode('段落');
    para.appendChild(text);
  </script>
</body>
</html>

创建元素
JSbin

设置元素属性：

getAttribute()：获取属性
createAttribute()：生成一个新的属性对象节点，并返回它
setAttributeNode()：添加属性节点
setAttribute()：设置元素属性
removeAttitbute()：删除属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
   <a class='link' href="#">链接</a>
  </div>
  <script>
    var div=document.querySelector('#div1');
    console.log(div1.getAttribute('id'));
    var link=document.querySelector('.link');
    link.setAttribute('title','测试');
    link.removeAttribute('href');
  </script>
</body>
</html>

设置元素
JSbin

元素的添加、删除？

newDiv.appendChild(newContent)：在元素末尾添加元素
newDiv .insertBefore(newContent，newDiv.firstChild)：在某个元素之前添加元素
newDiv.replaceChild(newElement, oldElement)：接收两个元素，要添加的元素和要替换的元素
parentNode.removeChild(childNode)：删除元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    <p class="para">段落</p>
    <p class='para'>段落2</p>
  </div>
  <script>
    var div1=document.querySelector('#div1');
    var text1=document.createTextNode("append");
    div1.appendChild(text1);
    var para=document.querySelectorAll('.para');
    var text2=document.createTextNode('insert');
    div1.insertBefore(text2,div1.children[0]);
    var text3=document.createTextNode("replace");
    para[0].replaceChild(text3,para[0].childNodes[0]);
    div1.removeChild(para[1]);
  </script>
</body>
</html>

元素的添加、删除
JSbin

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0级事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="btn" onclick='console.log(1)'>点击</button>
  <script>
    var btn=document.querySelector('.btn');
    btn.onclick=function(){
      console.log('DOM0');
    };
  </script>
</body>
</html>

JSbin
绑定方式：

HTML内联方式
JS指定事件处理程序

DOM2级事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="btn">点击</button>
  <script>
    var btn=document.querySelector('.btn');
    btn.addEventListener('click',function(){
      console.log('DOM2');
    });
    btn.addEventListener('click',function(){
      console.log('DOM2.2');
    });
  </script>
</body>
</html>

DOM2级事件
JSbinDOM2
addEventListener接收三个参数：

事件类型
事件处理函数
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果使false则是冒泡阶段处理程序，默认是false。

DOM0级和DOM2级区别

同样的事件，DOM2级可以绑定多种处理方式，而DOM0级绑定多种处理方式会被覆盖
DOM2级事件可以指定是否在捕获阶段进行程序处理

attachEvent与addEventListener的区别？

IE浏览器支持attachEvent，addEventListener支持多种主流浏览器
参数的个数不同
对this的引用不同，在attachEvent中this的环境是window，而addEventListener中this的环境是调用的元素
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

解释IE事件冒泡和DOM2事件传播机制？

事件冒泡：从最具体的元素（事件发生的元素）接收，一层层向上传递到不具体的节点。所有的浏览器都支持事件冒泡，IE只支持事件冒泡。
DOM2事件传播机制：DOM2事件规定的事件流包括三个阶段：首先发生的是事件捕获，为截取的事件提供机会，然后实际目标接收事件，最后再进行事件冒泡。

如何阻止事件冒泡？如何阻止默认事件？

在主流浏览器中只要调用stopPropagation()，而在IE浏览器中要用cancelBubble。阻止默认事件主流浏览器中使用preventDefault()，而在IE浏览器中要用returnValue

function stopPropagation(e){
  var event=e||window.event;//在IE浏览器中 事件是window.event
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble=false;//IE浏览器中的阻止冒泡
  }
}
function prevenDefault(e){
  var event=e||window.event;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue=false;
  }
}

代码

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
  </ul>
  <script>
    var ct=document.querySelector('.ct');
    ct.addEventListener('click',function(e){
      console.log(e.target.innerText);
    });
  </script>
</body>
</html>

JSbin

补全代码，要求：

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

<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>
//todo ...
</script>

实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</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>
  var ct=document.querySelector('.ct');
  var iptAdd=document.querySelector('.ipt-add-content');
  var btnAddStart=document.querySelector('#btn-add-start');
  var btnAddEnd=document.querySelector('#btn-add-end');

  btnAddStart.addEventListener('click',function(){
    if(iptAdd.value){
      var text=document.createTextNode(iptAdd.value);
      var li=document.createElement('li');
      li.appendChild(text);
      ct.insertBefore(li,ct.children[0]);
      console.log(li.innerText);
    }
  });
  btnAddEnd.addEventListener('click',function(){
    if(iptAdd.value){
      var text=document.createTextNode(iptAdd.value);
      var li=document.createElement('li');
      li.appendChild(text);
      ct.appendChild(li);
      console.log(li.innerText);
    }
  });
  ct.addEventListener('click',function(e){
    console.log(e.target.innerText);
  });
/*
  btnAddEnd.addEventListener('click', function(){
     var li = document.createElement('li');
     li.innerText = ipt.value;
     ct.appendChild(li);
  });
*/
  </script>
</body>
</html>

JSbin

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>

实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li data-img="http://img3.imgtn.bdimg.com/it/u=2744235171,1121575194&fm=21&gp=0.jpg">鼠标放置查看图片1</li>
    <li data-img="http://img3.imgtn.bdimg.com/it/u=954554677,3720466482&fm=21&gp=0.jpg">鼠标放置查看图片2</li>
    <li data-img="http://img0.imgtn.bdimg.com/it/u=2657893920,4044129460&fm=21&gp=0.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
  var ct=document.querySelector('.ct');
  var imgPre=document.querySelector('.img-preview');
  var li=document.querySelectorAll('li');
  // for(var i=0;i<li.length;i++){
  //   li[i].addEventListener('mouseover',function(){
  //     var data=this.getAttribute('data-img');
  //     console.log(data);
  //     imgPre.innerHTML='<img src="' + data + '">';
  //   });
  // }
  ct.addEventListener('mouseover',function(e){
    var data=e.target.getAttribute('data-img');
    if(data){
      imgPre.innerHTML='<img src="'+data+'">';
    }
  });
</script>
</body>
</html>

JSbin

实现如下图Tab切换的功能

tab切换

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    ul,li{
      list-style:none;
      margin:0;
      padding:0;
    }
    .clearfix:after{
      content:'';
      display:block;
      clear:both;
    }
    #tab{
      box-sizing:border-box;
      border:1px solid lightgray;
    }
    .nav{
      border-bottom:1px solid lightgray;
      text-align: center;

    }
    .nav li{
      float:left;
      width:33.1%;
      height:30px;
      line-height:30px;
      border-left:1px solid lightgray;
    }
    .nav .show{
      background-color:lightgray;
    }
    .content{
      height:150px;
      display:none;
    }
    #tab .show{
      display:block;
    }
  </style>
</head>
<body>
  <div id="tab">
    <ul class="nav clearfix">
      <li class='show'>tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>
    <div class="content show">内容1</div>
    <div class="content">内容2</div>
    <div class="content">内容3</div>
  </div>
  <script>
    var li=document.querySelectorAll('li');
    var nav=document.querySelector('.nav');
    var content=document.querySelectorAll('.content');
    nav.addEventListener('click',function(e){
      var target=e.target,
          libs=nav.children;
      for(var i=0;i<li.length;i++){
        li[i].removeAttribute('class');
      }
      target.setAttribute('class','show');
      var index=[].indexOf.call(li,target);
      var cls=content[index].getAttribute('class');
      for(i=0;i<content.length;i++){
        content[i].setAttribute('class','content');
      }
      content[index].setAttribute('class',cls+' show');
    });
  </script>
</body>

JSbin

实现下图的模态框功能

模态框

实现：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    a{
        text-decoration: none;
        color:black;
    }
    h3{
        margin: 0px;
        padding:0px;
    }
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }
    .modal-dialog{
        display: none;
    }
    .dialog{
        position:relative;
        top: 347px;
        left: 38%;
        width: 100%;
        height: 100%;
    }
    .header,.content,.footer{
        width:500px;
        border:1px solid lightgray;
        padding: 10px;
        background-color: white;
    }
    .footer{
        text-align: right;
    }
    .header h3{
        float: left;
    }
    .header .close{
        float: right;
    }
    .cover{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        top: 0;
        left: 0;
        opacity: 0.4;
    }
  </style>
</head>
<body>
  <button class="btn-modal">点我</button>
  <div class="modal-dialog">
    <div class="cover"></div>
    <div class="dialog">
        <div class="header clearfix">
        <h3>我是标题</h3>
        <a href="#" class="close">X</a>
        </div>
        <div class="content">
            <p>我是内容1</p>
            <p>我是内容2</p>
        </div>
        <div class="footer">
            <a href="#" class="btn-cancle">取消</a>
            <a href="#" class="btn">确定</a>
        </div>
    </div>
  </div>
  <script>
    var btnModal=document.querySelector('.btn-modal');
    var modalDialog=document.querySelector('.modal-dialog');
    var dialog=document.querySelector('.dialog');
    btnModal.addEventListener('click',function(e){
        modalDialog.style.display='block';
        e.stopPropagation();
    })
    document.body.addEventListener('click',function(){
        modalDialog.style.display='none';
    })
    dialog.addEventListener('click',function(e){
        e.stopPropagation();
        if (e.target.getAttribute('class')==='close'||e.target.getAttribute('class')==='btn-cancle') {
            modalDialog.style.display='none';
        }
    })
  </script>
</body>
</html>

JSbin

前端面试题（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、事件

dom对象的innerText和innerHTML有什么区别？

elem.children和elem.childNodes的区别？

查询元素有几种常见的方法？

如何创建一个元素？如何给元素设置属性？

元素的添加、删除？

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

attachEvent与addEventListener的区别？

解释IE事件冒泡和DOM2事件传播机制？

如何阻止事件冒泡？如何阻止默认事件？

代码

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

补全代码，要求：

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

实现如下图Tab切换的功能

实现下图的模态框功能

相关文章

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

DOM事件

DOM事件

DOM0和DOM2级事件简单理解

Dom事件

3-6 DOM事件

HTML DOM 事件

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

DOM事件类

DOM事件

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

饥人谷技术博客

DOM、事件

dom对象的innerText和innerHTML有什么区别？

elem.children和elem.childNodes的区别？

查询元素有几种常见的方法？

如何创建一个元素？如何给元素设置属性？

元素的添加、删除？

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

attachEvent与addEventListener的区别？

解释IE事件冒泡和DOM2事件传播机制？

如何阻止事件冒泡？ 如何阻止默认事件？

代码

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

补全代码，要求：

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

实现如下图Tab切换的功能

实现下图的模态框功能

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

如何阻止事件冒泡？如何阻止默认事件？