【Javascript】DOM操作&事件介绍

---

写一个函数，批量操作 css

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

// 解答

  
NinthG
  

---

如何获取 DOM 计算后的样式

使用getComputedStyle方法获取

  
NinthG
  


// 输出结果
rgb(255, 0, 0)

---

实现效果

DOM操作练习

---

onlick与addEventListener的区别？

• onlick无法处理同一个元素的多个绑定事件，而addEventListener可以
  举例说明：

  
NinthG
  


// 输出结果
"这是最新的" // 两次onclick事件，最近执行的覆盖了前面的
"addEventListener方法第1次打印"
"addEventListener方法第2次打印"

---

解释DOM2事件传播机制？

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

DOM事件流

• 首先发生的是事件捕获，为截获事件提供了机会
• 然后是实际的目标接收到事件
• 接着事件冒泡阶段对事件作出响应。

---

有如下代码

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

    
这里是
    
饥人谷
    
前端14班



//解答


  

    
这里是
    
饥人谷
    
前端14班
  
  

---

补全代码

要求：

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

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加


//解答


        
这里是
        
饥人谷
        
任务班
    
    
    开头添加
    结尾添加
    

预览链接

---

补全代码

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

    

    

        
playsation
        
steam
        
battle.net
    
    

预览链接