DOM元素及操作

1.补全代码

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

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

2.补全代码

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

    万一ul内有文字
    
这里是
    
饥人谷

3.实现效果

实现此效果

  
hello
  
饥人谷

add
remove
toggle1
tolggle2

4.如何获取 DOM 计算后的样式

获取样式可以通过 getComputedStyle，得到的是最终在页面上面绘制出来的样式，这时候就不需要通过node.style属性来获取
比如 getComputedStyle(document.querySelector('.box')).fontSize  来获取class为box的字体大小

5.写一个函数，批量操作 css

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

function css(node, styleObj){
  for(var val in styleObj){
    node.style[val] = styleObj[val]   //循环，把['color']和['background-color']这类索引一一赋值
  }
}
css(document.body, {'color': 'red','background-color': '#ccc'})

6.列出DOM 元素选取的 API

getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
var element = document.getElementById("box");

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格式的对象，不会实时反映元素的变化。

// 假定有一个输入框是
var input = document.getElementsByName("username");
input[0].tagName 

注意，在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元素

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

创建元素：creatElement('')
创建文本节点：creatTextNode('')
创建Frgment对象：creatDocumentFrgment('')
末尾添加元素：appendChild('')
替换元素：replaceChild('')
删除元素：removeChild('')
设置属性：setAttribute('')
删除属性：removeAttribute('')