Dom、事件

问答

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

innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

• elem.children和elem.childNodes的区别？

Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等。Element继承了Node类，也就是说Element是Node多种类型中的一种，即当NodeType为1时Node即为ElementNode，另外Element扩展了Node，Element拥有id、class、children等属性。children是Element的属性，childNodes是Node的属性。

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

常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。
1.getElementById
DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象。
2.getElementsByTagName
该方法返回一个对象数组（准确的说是HTMLCollection集合，它不是真正意义上的数组），每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样，该方法只提供一个参数，它的参数是指定标签的名字。
3.getElementsByClassName
除了通过指定标签获取元素外，DOM还提供了getElementsByClassName方法来获取指定class名的元素。

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

1.createElement(name)创建元素节点
createElement()是Document对象中的方法，该方法会根据指定的元素名称name，返回一个Element对象。
2.设置创建元素节点的属性
创建元素后，我们可能需要设置元素属性，如：给元素设置CSS样式、添加点击事件等。设置元素属性可以使用Element对象的setAttribute方法，也可以使用属性名设置。
3.将元素节点插入到DOM文档的指定位置
元素创建后，需要将元素节点插入到DOM文档的指定位置，添加元素使用Element对象的appendChild()方法或insertBefore()方法。appendChild()
方法的作用是向元素添加新的子节点，被添加的子节点将作为其最后一个子节点。insertBefore()方法的作用是在已有的节点之前插入新节点，被添加的节点会做为同级节点。

• 元素的添加、删除？

元素的添加：使用createElement来添加元素
元素的删除：如需删除 HTML 元素，您必须首先获得该元素的父元素，然后用removeChild来删除对应元素。

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

DOM0事件：DOM0事件是指直接将事件绑定在节点上，一个节点只能绑定一个事件,不然后面的灰覆盖前面的。
var oBtn = document.querySelctor('#btn');
oBtn.onclick=function(){
console.log('a')
};
DOM2事件：DOM2级事件可以对一个元素绑定多个事件，后面的事件不会覆盖前面事件；可以通过参数true、false来设置事件在冒泡阶段或者捕获阶段触发事件。使用removeEventListener来删除事件。
oBtn.addEventListener("click",function(){
});
oBtn.removeEventListener("click",fn,false);

• attachEvent与addEventListener的区别？

1.addEventListener和attachEvent的兼容性问题
addEventListener是符合W3C规范的事件绑定方法，FireFox、Chrome、Safari都是用它来绑定事件。
attachEvent是IE私有的，不符合W3C规范，而且在IE下，只能使用它来绑定事件，addEventListener是无效的。
所以，要想绑定事件，必须处理兼容性问题。
2.addEventListener和attachEvent的语法规则
addEventListener共有3个参数：element.addEventListener(type,listener,useCapture)
attachEvent共有2个参数：element.attachEvent(type,listener);
3.代码兼容处理
function regEvent(ele, event_name, fun)
{
if (window.attachEvent)
ele.attachEvent(event_name, fun); //IE浏览器
else
{
event_name = event_name.replace(/^on/, “”); //如果on开头，删除on，如onclick->click
ele.addEventListener(event_name, fun, false); //非IE浏览器
}
}

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

IE事件冒泡:事件发生在触发元素上，从触发元素开始，事件向父元素一级一级传递，直到html元素。
DOM2事件:事件传播分3个阶段，捕获阶段，处于事件目标阶段，冒泡阶段。事件监听程序只能选择在捕获阶段或者冒泡阶段其中的一个阶段执行。
捕获阶段:事件发生时，先从根节点开始传递，一级一级向下找，知道目标元素。
冒泡阶段:从触发元素开始，事件向父元素一级一级传递，直到html元素

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

阻止事件冒泡：w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true。
阻止默认事件：w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false。

问答

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

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

代码：
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//方法一
/*var item = document.getElementsByClassName("ct")[0].getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
} */
//方法二
var item = document.getElementsByTagName('li')
for(var i=0;i<item.length;i++){
item[i].addEventListener('click', function(){
console.log(this.innerText);
})
}
</script>

• 补全代码，要求：

1.当点击按钮开头添加时在<i>这里是</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>
代码：
<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 start = document.getElementById('btn-add-start');
var end = document.getElementById('btn-add-end');
var input = document.querySelector(".ipt-add-content");

      end.addEventListener('click',function(){    
        var list = document.createElement('li');
        list.innerText = input.value
        ct.appendChild(list);
      })
      start.addEventListener('click',function(){    
        var list = document.createElement('li');
        list.innerText = input.value
        ct.insertBefore(list,ct.firstChild);
      })
      ct.addEventListener('click', function(e){
          if(e.target.tagName.toLowerCase() === 'li'){
           console.log(e.target.innerText);
          }
      }); 
    </script>

• 补全代码，要求：当鼠标放置在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>
  

代码：
<ul class="ct">
<li data-img="http://img5.imgtn.bdimg.com/it/u=3425851328,2681317699&fm=21&gp=0.jpg">鼠标放置查看图片1</li>
<li data-img="http://pic24.nipic.com/20121003/10754047_140022530392_2.jpg">鼠标放置查看图片2</li>
<li data-img="http://img2.3lian.com/img2007/4/22/303952037bk.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct')
var list = document.getElementsByTagName('li')
var preview = document.querySelector('.img-preview')
for(var i=0;i<list.length;i++){
list[i].addEventListener('mouseover',function(){
if(document.querySelector('img')){
preview.removeChild(document.querySelector('img'))
console.log(1)
}
var item = document.createElement('img')
var img = this.getAttribute('data-img')
preview.appendChild(item)
item.src=img;

        })
      }
    </script>

• 实现如下图Tab切换的功能
  
  html代码：
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>DEMO</title>
  </head>
  <body>
  <div class="wrapper">
  <ul class="tabs">
  <li class="selected">Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
  </ul>
  <div class="inner">
  <div class="content active" data-index=''>内容1</div>
  <div class="content" data-index=''>内容2</div>
  <div class="content" data-index=''>内容3</div>
  </div>
  </div>
  </body>
  </html>
  CSS代码：
  .wrapper {
  border: 1px solid #ccc;
  }
  .wrapper * {
  box-sizing: border-box;
  }
  .wrapper ul,
  .wrapper li {
  margin: 0;
  padding: 0;
  list-style: none;
  }
  .wrapper .tabs:after {
  content: '';
  height: 0;
  display: table;
  clear: both;
  }
  .wrapper .tabs li {
  float: left;
  width: 33.3%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  }
  .wrapper .tabs li:last-child {
  border-right: none;
  }
  .wrapper .tabs .selected {
  background: #eee;
  }
  .wrapper .content {
  display: none;
  height: 180px;
  padding: 20px;
  }
  .wrapper .active {
  display: block;
  }
  JS代码：
  var li = document.querySelectorAll('li')
  var content = document.querySelectorAll('.content')
  //获取兄弟元素
  var sibling= function( n, elem ) {
  var r = [];
  for ( ; n; n = n.nextSibling ) {
  if ( n.nodeType === 1 && n !== elem ) {
  r.push( n );
  }
  }
  return r;
  }
  for(var i=0;i<li.length;i++){
  content[i].setAttribute('data-index',i)
  li[i].setAttribute('data-index',i)
  li[i].addEventListener('click',function(){
  console.log(this)
  var j = this.getAttribute('data-index')
  console.log(j)
  this.setAttribute('class', 'selected')
  content[j].setAttribute('class', 'content active')
  var brother2 = sibling(li[j].parentNode.firstChild,li[j])
  var brother1 = sibling(content[j].parentNode.firstChild,content[j])
  for(var h=0;h<brother1.length;h++){
  brother1[h].setAttribute('class', 'content');
  brother2[h].setAttribute('class', '');
  }
  })
  }

• 实现下图的模态框功能

html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="show">点我1</button>
<div class="wrapper">
<div class="inner">
<div class="box">
<div class="top">
<span>我是标题1</span>
<button class="close">x</button>
</div>
<p>我是内容1</p>
<p>我是内容1</p>
<div class="bottom">
<button class="agree">确定</button>
<button class="cancle">取消</button>
</div>
</div>
</div>

      </div>
    </body>
    </html>

CSS代码：
*{
margin:0;
padding:0;
}
.wrapper{
width:100%;
background:rgba(0,0,0,0.3);
height:400px;
position: absolute;
top:0;
display: none;
}
.active{display: block;}
.inner{
width:280px;
height:130px;
position: absolute;
top:50%;
left:50%
}
.box{
background:#fff;
border:1px solid #aaa;
border-radius:8px;
width:280px;
height:130px;
position: relative;
top:-50%;
left:-50%;
}
.box button{
border:none;
background:none;
float:right;
font-size:18px;
}
.top{
padding:10px;
border-bottom:1px solid #ccc;
}
p{
margin:10px;
}
.bottom{padding-right:10px}
JS代码：
var show = document.getElementById('show')
var box = document.querySelector('.wrapper')
show.addEventListener('click',function(){
box.setAttribute('class','wrapper active')
})
var close = document.querySelector('.close')
var cancle = document.querySelector('.cancle')
close.addEventListener('click',function(){
box.setAttribute('class','wrapper')
})
cancle.addEventListener('click',function(){
box.setAttribute('class','wrapper')
})