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

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

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

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

创建元素：

  1. createElement()：创建元素节点
  2. createTextNode()：创建文本节点
  3. 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

设置元素属性：

  1. getAttribute()：获取属性
  2. createAttribute()：生成一个新的属性对象节点，并返回它
  3. setAttributeNode()：添加属性节点
  4. setAttribute()：设置元素属性
  5. 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

元素的添加、删除？

  1. newDiv.appendChild(newContent)：在元素末尾添加元素
  2. newDiv .insertBefore(newContent，newDiv.firstChild)：在某个元素之前添加元素
  3. newDiv.replaceChild(newElement, oldElement)：接收两个元素，要添加的元素和要替换的元素
  4. 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
绑定方式：

  1. HTML内联方式
  2. 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接收三个参数：

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

DOM0级和DOM2级区别

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

attachEvent与addEventListener的区别？

  1. IE浏览器支持attachEvent，addEventListener支持多种主流浏览器
  2. 参数的个数不同
  3. 对this的引用不同，在attachEvent中this的环境是window，而addEventListener中this的环境是调用的元素
  4. 第一个参数意义不同，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

补全代码，要求：

  1. 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
  2. 当点击每一个元素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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • Dom、事件
    Q&A： 1. dom对象的innerText和innerHTML有什么区别？ innerHTML从对象开始到结束...
    进击的阿群阅读 486评论 0赞 0
  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 586评论 0赞 2
  • Dom、事件
    问答 一、dom对象的innerText和innerHTML有什么区别？ innerTextinnerText是一...
    婷楼沐熙阅读 398评论 0赞 0
  • DOM、事件
    一、dom对象的innerText和innerHTML有什么区别？ innerHTML返回的是从对象起始位置到终止...
    __Qiao阅读 405评论 0赞 0
  • 任务22 DOM、事件-简答题
    1.dom对象的innerText和innerHTML有什么区别？ innerText是一个可写属性，返回元素内包...
    GarenWang阅读 451评论 0赞 0