一、补全代码，要求：当鼠标放置在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>
function $(selector) {
return document.querySelector(selector);
}
$('.ct').addEventListener('mouseover',function(e){
if (e.target.tagName.toLowerCase() === 'li'){
var img = e.target.getAttribute("data-img");
$('.img-preview').innerHTML = '<img src="'+img+'">';
}
});
二、补全代码，要求：
当点击按钮开头添加时在<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>
function $(selector){
return document.querySelector(selector);
}
$('.ct').addEventListener("click",function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText);
}
});
$('#btn-add-start').onclick = function(){
if($('.ipt-add-content').value !== ""){
var newli = document.createElement('li');
newli.innerText = $('.ipt-add-content').value;
$('.ct').prepend(newli);
}
};
$('#btn-add-end').onclick = function(){
if($('.ipt-add-content').value !== ""){
var newli = document.createElement('li');
newli.innerText = $('.ipt-add-content').value;
$('.ct').append(newli);
}
};
三、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容。
<ul class="ct">
<li>这里是</li>
<li>谷</li>
<li>班</li>
</ul>
<script>
//todo ...
</script>
function $(selector){
return document.querySelector(selector);
}
$('.ct').addEventListener("click",function(e){
if(e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText);
}
});
四、解释DOM2事件传播机制。
DOM2级事件规定事件流包括三个阶段：
- 事件捕获阶段：不太具体的节点更早接收事件，而最具体的元素最后接收事件
- 处于目标阶段
- 事件冒泡阶段：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
[图片上传失败...(image-2c9e8-1532966604900)]
五、onlick与addEventListener的区别？
onlick
-
若设置在HTML里面
优点：简单且具有跨浏览器优势。
缺点：1.存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
2.这样书写html代码和JavaScript代码紧密耦合，维护不方便 -
若是设置在js里，如：
btn.onclick = function(){}
优点：1.删除事件处理程序，只需把元素的onclick属性赋为null。
2.简单且具有跨浏览器优势。
缺点：通常将一个方法赋值给一个元素的事件处理程序属性，也就意味着这个方法可以被新的方法覆盖，一个事件只能绑定一次。
addEventListener
可以有三个参数：
- 事件处理类型
- 事件处理方法
- 布尔类型，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
优点：能够绑定多个处理程序，会按照顺序依此执行
缺点：只能通过removeEventListener移除，移除时参数与添加的时候相同。不具备跨浏览器优势。
六、如何获取 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 setStyle(node, styleObj) {
//for-in 遍历对象
for (var key in styleObj) {
node.style[key] = styleObj[key]
}
}
八、列出DOM 元素选取的 API。
getElementById()
- getElementById方法返回匹配指定ID属性的元素节点
getElementsByClassName()
- getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。
getElementsByTagName()
- etElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。
getElementsByName()
- getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
querySelector()
- querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
querySelectorAll()
- querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
九、如何创建元素？如何添加元素？
createElement()
- createElement方法用来生成HTML元素节点。
createTextNode()
- createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
createDocumentFragment()
- createDocumentFragment方法生成一个DocumentFragment对象。
- DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
appendChild()
- 在元素末尾添加元素
insertBefore()
- 在某个元素之前插入元素
replaceChild()
replaceChild()接受两个参数：要插入的元素和要替换的元素
网友评论