DOM元素及操作

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

  <ul class="ct">
    <li data-img="https://img.haomeiwen.com/i3624093/686aee09fe6332d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片1</li>
    <li data-img="https://img.haomeiwen.com/i3624093/9b41b029ce86f390.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片2</li>
    <li data-img="https://img.haomeiwen.com/i3624093/65b9217d7cb93f94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>

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

ct.addEventListener('mouseover', function(e){
  var img = e.target.getAttribute("data-img");
  preview.innerHTML = '<img src="'+img+'">';
});
</script>

---

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
</ul>
<script>
    
</script>

<ul class="ct">
      <li>这里是</li>
      <li>饥人谷</li>
  </ul>
  <script>
    var ct=document.getElementsByClassName("ct")[0];
    // 注意此处的[0]必须要有，不然没有效果；
    ct.addEventListener('click',function(e){  console.log(e.target.innerText)
                        })
    
  </script>

---

实现此效果。

代码：http://js.jirengu.com/silel/2/
效果：http://js.jirengu.com/silel

---

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

使用 getComputedStyle 获取元素计算后的样式，例：

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(var key in styleObj){
    node.style[key] = styleObj[key];
  }
}
css(document.body, {
  'color': 'red',
  'background-color': '#ccc'
});

---

列出DOM 元素选取的 API。

getElementById() // 获取指定 ID 的元素，若没有匹配的节点则返回 null
getElementsByClassName() // 获取指定 ClassName 的元素
getElementsByTagName() // 获取指定标签的元素
getElementsByName() // 获取拥有 name 属性的元素
querySelector() // 获取指定 CSS 选择器的节点，若有多个则返回第一个，若没有匹配节点，则返回 null
querySelectorAll() // 获取指定的CSS选择器的所有节点，返回的是NodeList类型的对象

---

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

• 创建元素

1.createElement()
createElement方法用来生成HTML元素节点。

var newDiv = document.createElement("div");

createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
2.createTextNode()
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代码新建一个div节点和一个文本节点
3.createDocumentFragment()
createDocumentFragment方法生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

• 添加元素

1.appendChild() 在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

2.insertBefore()
在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

3.replaceChild()
replaceChild()接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);