在上节课中我们学习了js基本的语法，现在我们来学习如何基于浏览器提供的功能来进行网页标签的操作，来实现各种各样的效果。
DOM
文档对象模型，用于获取网页中的标签。比如我们想要修改某个标签中的内容，首先需要获取该标签，再来修改其中的内容。
获取标签的方式有几种，可以通过id获取document.getElementById("block")，通过标签名获取getElementsByTagName()，通过选择器获取querySelector()，获取相邻的元素dom.previousElementSibling dom.nextElementSibling，获取父类元素和子类元素dom.parentNode container.children。
修改标签内容可以通过dom.textContent属性，它是标签自带的属性，可以修改文本内容。
我们获取到的元素，其实是一种伪数组，它有类似数组的结构，也可以使用索引和长度，但不具备数组的特殊方法。
<body>
<div id="block">初始内容</div>
<p>默认内容</p>
<p>默认内容</p>
<p>默认内容</p>
<p>默认内容</p>
<div id="container">
<p>默认内容</p>
<p class="item">默认内容</p>
<p>默认内容</p>
<p>默认内容</p>
</div>
<script>
// 通过id获取元素getElementById()
var block = document.getElementById("block")
console.log(block) // <div id="block">初始内容</div>
// 修改获取的元素：textContent是标签自带的属性，可以修改文本内容
block.textContent = "修改后的内容"
// 通过标签名获取元素 getElementsByTagName()
var content = document.getElementsByTagName("p")
console.log(content) // [p, p, p, p] //类似数组的结构，可以使用索引和长度，但不具备数组的特殊方法，称为伪数组形式
// 假如这是后端传给我们的内容，要把标签修改成这样
var textArr = [
'震山的虎',
'敏捷的豹',
'远见的鹰',
'善战的狼'
]
for(var i = 0; i <content.length; i++){
content[i].textContent = textArr[i]
} // 依次修改p标签的内容
// 通过选择器获取单个元素，querySelector()
// 如果要获取所有元素，可以使用querySelectorAll()方法
var selector = document.querySelector('.item')
selector.textContent = "替罪的羊"
// 获取相邻的标签
selector.previousElementSibling.textContent = "划水的鱼"
selector.nextElementSibling.textContent = "装饭的桶"
// 获取父元素和子元素
var container = selector.parentNode
console.log(container) // <div id="container">...</div>
// vontainer.textContent = '新内容'
var items = container.children
console.log(items) // [p, p.item, p, p]
</script>
</body>
样式处理
在网页的开发中，我们一般不使用js来做样式更改，而使用负责样式处理的css，这样前端三件套各司其职，可以有更好的性能和更少的损耗。
如果要使用js进行样式处理，开发者往往会在css样式表中设置一个类，在js中更改dom的类名来实现样式的更改
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
margin-bottom: 10px;
}
.changeStyle{
width: 80px;
height: 80px;
background-color: green;
}
</style>
</head>
<body>
<div id="block">默认内容</div>
<script>
var block = document.querySelector('#block')
// 样式处理
block.className = 'changeStyle' // 修改class属性
</script>
</body>
文本处理
在上面我们提到了修改文本内容可以使用textContent属性，但是这个属性也只能修改文本内容。
另外还有一种功能更多的属性，就是innerHTML，可以直接修改标签
<style>
.bold-text{
font-size: 20px;
font-weight: 700;
</style>
<script>
var block = document.querySelector('#block')
// 文本处理
block.innerHTML = '普通内容<span class="bold-text">加粗的文本</span>'
</script>
事件处理
事件处理就是在出现一些交互(比如点击)的时候，浏览器应该作何反应。常见的方法有alert，浏览器会弹出一个提示框，但是如果设置两个提示框，浏览器只能显示第二个，也就是覆盖的情况。为了避免这种问题，我们现在常用的是addEventListener()方法，它可以将事件和函数进行绑定，可以显示多个提示框，因此适用于多人开发。效果如下
// 事件处理
// block.onlick = function(){
// alert('suprise!') // 使用alert弹出提示框
// }
block.addEventListener('click', function(){
alert('suprise!')
})
block.addEventListener('click', function(){
alert('supeise again!')
})
下面来做一个轮播图试试吧
制作轮播图首先要设置一个无序列表和上下键，插入几张图片并在css中设置透明度和变化时间，然后设置当前展示的图片的类。接着在js中获取列表和上下键，再给上下键设置函数。
<head>
<style>
#carousel {
width: 200px;
height: 200px;
position: relative;
}
#carousel li {
width: 200px;
line-height: 200px;
position: absolute;
text-align: center;
text-shadow: 0 0 5px #000;
font-size: 35px;
color: #fff;
opacity: 0;
transition: opacity 1s;
}
#carousel li:nth-child(1) {
background-color: orange;
}
#carousel li:nth-child(2) {
background-color: gold;
}
#carousel li:nth-child(3) {
background-color: brown;
}
#carousel li:nth-child(4) {
background-color: grey;
}
#carousel li.active {
opacity: 1;
}
</style>
</head>
<body>
<ul id="carousel">
<li class="active">震山的虎</li>
<li>敏捷的豹</li>
<li>远见的鹰</li>
<li>善战的狼</li>
</ul>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script>
// 轮播图
var carousel = document.querySelector('#carousel')
var items = carousel.children
var prevBtn = document.querySelector('#prev')
var nextBtn = document.querySelector('#next')
var index = 0 //当前元素的索引值
nextBtn.addEventListener('click', function(){
items[index].className = '' //清除上一个元素的active样式
if(index === items.length - 1){ //如果是最后一张，索引值改为-1，以便后续从第0张开始循环
index = -1
}
index++
items[index].className = 'active'
})
prevBtn.addEventListener('click', function(){
items[index].className = '' //清除上一个元素的active样式
if(index === 0){
index = items.length
}
index--
items[index].className = 'active'
})
</script>
</body>
定时器
有两种定时器，分别是普通的定时器setTimeout()和间隔定时器setInterval()，它们的单位都是毫秒。
// 普通定时器
setTimeout(function(){
console.log('定时器执行')
}, 2000) // 2s后执行
// 间隔定时器
setInterval(function(){
console.log('间隔两秒执行一次')
}, 2000)
效果如图
如果想让定时器停止，需要先获取定时器然后再设置一个定时器使用clearInterval()方法即可。
var timer = setInterval(function(){
console.log('间隔两秒执行一次')
}, 2000)
setTimeout(function(){
clearInterval(timer) // 6s停止定时器
}, 6000)
我们可以使用定时器来实现网页图片的自动轮播功能，操作逻辑和事件处理的下一张按钮是一样的。
setInterval(function(){
items[index].className = '' //清除上一个元素的active样式
if(index === items.length - 1){ //如果是最后一张，索引值改为-1，以便后续从第0张开始循环
index = -1
}
index++
items[index].className = 'active'
}, 1500)
