补全代码，要求：当鼠标放置在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>
<script>
var list = document.querySelector(".ct");
var preview = document.querySelector(".img-preview");
var newimg = document.createElement("img");
list.addEventListener("mouseover",function(e){
if(e.target.tagName.toLowerCase() === 'li'){
newimg.src = e.target.getAttribute('data-img');
preview.appendChild(newimg);
}
});
list.addEventListener("mouseout",function(){
preview.removeChild(newimg);
});
</script>
补全代码，要求：
当点击按钮开头添加时在<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>
<script>
var addStart = document.querySelector("#btn-add-start");
var addEnd = document.querySelector("#btn-add-end");
var content = document.querySelector(".ipt-add-content");
var list = document.querySelector(".ct");
addStart.addEventListener("click",function(){
if(content.value !== ""){
var newLi = document.createElement("li");
newLi.innerText = content.value;
list.insertBefore(newLi,list.firstChild);
}
});
addEnd.addEventListener("click",function(){
if(content.value !== ""){
var newLi = document.createElement("li");
newLi.innerText = content.value;
list.appendChild(newLi);
}
});
list.addEventListener("click",function(e){
console.log(e.target.innerText);
});
</script>
有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
//todo ...
</script>
<script>
var list = document.querySelector(".ct");
list.addEventListener("click",function(e){
console.log(e.target.innerText);
},false);
</script>
解释DOM2事件传播机制。
DOM2级事件规定事件流包括三个阶段 ：
1. 事件捕获阶段，
2. 处于目标阶段，
3. 时间冒泡阶段，
首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接受事件，最后是冒泡阶段
onlick与addEventListener的区别？
addEventListener是在 FireFox 上的用法。
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
详解
其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false
区别：
Javascript代码 收藏代码
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
Javascript代码 收藏代码
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行
实现此效果。
http://jsbin.com/genagosoge/edit?html,output
如何获取 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 css(node, styleObj){
for(key in styleObj){
node.style[key] = styleObj[key]
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
列出DOM 元素选取的 API。
getElementById()
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
var elem = document.getElementById("test");
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格式的对象，不会实时反映元素的变化。
// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意，在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元素
如何创建元素？如何添加元素？
创建：creatElement(name)
设置属性：setAttribute(attr,value)
删除属性：removeAttribute(attr)
网友评论