属性操作和事件

题目1: 写一个函数，批量操作 css

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

//方法:
function setStyle(node, styleObj) {
     //for-in 遍历对象
     for (var key in styleObj) {
          node.style[key] = styleObj[key]
     }
}

题目2： 如何获取 DOM 计算后的样式

var ele = document.querySelector('p')
var color = window.getComputedStyle(ele).color
var color = ele.style.color
ele.style.cssText = 'border-color:red;color:red;';
console.log(color)

题目3 : 实现以下效果

• 效果预览

题目4： onlick与addEventListener的区别？

• DOM0
  • DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序。
  • 一个事件只能绑定一次，并且新方法会覆盖老方法。

btn.onclick=function(){}

• DOM2
  • DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener removeEventListener所有的DOM节点都包含这两个方法，并且它们都接受三个参数：
    • 事件类型
    • 事件处理方法
    • 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
  • 函数执行几次都可以,不会覆盖

题目5： 解释DOM2事件传播机制？

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

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

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

var ct = document.querySelector(".ct")

ct.addEventListener('click',function(e){
      console.log(e.target.innerText)
});

</script>

题目7： 补全代码，要求：

• 当点击按钮开头添加时在<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>

• 代码预览

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

• 预览地址