1.补全代码
//补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片
<ul class="ct">
<li data-img="https://img.haomeiwen.com/i11954160/05547d1e09c0f0a0.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp">鼠标放置查看图片1</li>
<li data-img="https://img.haomeiwen.com/i11954160/c1669419f7ce32ae.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp">鼠标放置查看图片2</li>
<li data-img="https://img.haomeiwen.com/i11954160/a30ff2c16ab2c82d.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct') //选择.ct
var preview = document.querySelector('.img-preview') //选择.img-preview
var image = document.createElement('img') //新建一个img元素
ct.addEventListener("mouseover",function(e){ //创建一个监听器监听是否在ct上有鼠标放置
if(e.target.tagName.toLowerCase() === 'li'){ //判断鼠标放置的位置是不是li标签
image.src = e.target.getAttribute('data-img') //如果是，就把image元素的src设置为对应的li的data-img值
preview.appendChild(image) //再把image加到preview里面展示出来
}
})
ct.addEventListener("mouseout",function(e){ //创建一个监听器当ct上的监听鼠标移开
preview.removeChild(image) //把image从preview里移除
})
</script>
2.补全代码
有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
万一ul内有文字
<li>这里是</li>
<li>饥人谷</li>
</ul>
<script>
var ct = document.querySelector('.ct') //选择ul
ct.addEventListener('click', function(e){ //监听ct的鼠标点击
if(e.target.tagName.toLowerCase() === 'li'){ //判断点击的是否是li
console.log(e.target.innerText) //是的就在控制台输出li里面的内容
}
},false)
</script>
3.实现效果
<style>
.box {
padding: 20px;
border: 2px solid #ccc;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}
.box.active {
background-color: #000;
color: #fff;
}
</style>
<div class="box">
<h1>hello</h1>
<h3>饥人谷</h3>
</div>
<button id="add">add</button>
<button id="remove">remove</button>
<button id="toggle1">toggle1</button>
<button id="toggle2">tolggle2</button>
<script>
var addBtn = document.querySelector('#add')
var removeBtn = document.querySelector('#remove')
var toggle1 = document.querySelector('#toggle1')
var toggle2 = document.querySelector('#toggle2')
var box = document.querySelector('.box')
addBtn.onclick = function(){
box.classList.add('active')
}
removeBtn.onclick = function(){
box.classList.remove('active')
}
toggle1.onclick = function(){
if(box.classList.contains('active')){
box.classList.remove('active')
}else{
box.classList.add('active')
}
}
toggle2.onclick = function(){
box.classList.toggle('active')
}
</script>
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格式的对象，不会实时反映元素的变化。
// 假定有一个输入框是<input name="username">
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('')
网友评论