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

<script>
var list = document.querySelector(".ct");
var preview = document.querySelector(".img-preview");
var newimg = document.createElement("img");

list.addEventListener("mouseover",function(e){
  if(e.target.tagName.toLowerCase() === 'li'){
     newimg.src = e.target.getAttribute('data-img');
     preview.appendChild(newimg);
  }
});

list.addEventListener("mouseout",function(){
  preview.removeChild(newimg);
});
</script>

补全代码，要求：

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

<ul class="ct">
  <li>这里是</li>
  <li>饥人谷</li>
  <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

<script>
  var addStart = document.querySelector("#btn-add-start");
  var addEnd = document.querySelector("#btn-add-end");
  var content = document.querySelector(".ipt-add-content");
  var list = document.querySelector(".ct");

  addStart.addEventListener("click",function(){
    if(content.value !== ""){
       var newLi = document.createElement("li");
      newLi.innerText = content.value;
     list.insertBefore(newLi,list.firstChild);
  }
});

  addEnd.addEventListener("click",function(){
     if(content.value !== ""){
        var newLi = document.createElement("li");
        newLi.innerText = content.value;
        list.appendChild(newLi);
     }
  });

  list.addEventListener("click",function(e){
   console.log(e.target.innerText);
 });
</script>

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

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

<script>
 var list = document.querySelector(".ct");
 list.addEventListener("click",function(e){
   console.log(e.target.innerText);
 },false);
</script>

解释DOM2事件传播机制。

DOM2级事件规定事件流包括三个阶段 ：
  1. 事件捕获阶段，
  2. 处于目标阶段，
  3. 时间冒泡阶段，
首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接受事件，最后是冒泡阶段

onlick与addEventListener的区别？

addEventListener是在 FireFox 上的用法。

addEventListener的参数一共有三个，语法为：

element.addEventListener(type,listener,useCapture)

详解

其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false

区别：
Javascript代码 收藏代码

var btn1Obj = document.getElementById("btn1");  
//element.addEventListener(type,listener,useCapture);  
btn1Obj.addEventListener("click",method1,false);  
btn1Obj.addEventListener("click",method2,false);  
btn1Obj.addEventListener("click",method3,false);  

执行顺序为method1->method2->method3

Javascript代码 收藏代码

document.getElementById("btn").onclick = method1;  
document.getElementById("btn").onclick = method2;  
document.getElementById("btn").onclick = method3;  

如果这样写,那么将会只有medhot3被执行

实现此效果。

http://jsbin.com/genagosoge/edit?html,output

如何获取 DOM 计算后的样式？

获取样式 getComputedStyle

使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性 获取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

写一个函数，批量操作 css。

function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})

function css(node, styleObj){
for(key in styleObj){
node.style[key] = styleObj[key]
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})

列出DOM 元素选取的 API。

getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

var elem = document.getElementById("test");

getElementsByClassName()

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var elements = document.getElementsByClassName('tab');

getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

document.getElementsByClassName('red test');

getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var paras = document.getElementsByTagName("p");

上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。
getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。
querySelector()

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法无法选中CSS伪元素。
querySelectorAll()

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代码返回class属性是note或alert的div元素

如何创建元素？如何添加元素？

创建：creatElement(name)
设置属性：setAttribute(attr,value)
删除属性：removeAttribute(attr)