JS内置对象Document
Document对象的作用：
- 可以动态的获取网页中所有的标签
- 可以对动态获取到的表情进行增删改查
在Body中动态添加内容
document.write("<div class='redDiv'>尼玛</div>");
document动态获取标签的方式：
document.getElementsByClassName('classname');//根据类名取到所有类名相同的元素组成数组
document.getElementsByTagName('body');//根据标签名取到所有标签名相同的元素组成数组
document.getElementById('id');//根据唯一的id取到的元素
document.getElementsByName('image');//根据设置的name取到所有name相同的元素组成数组
实例1.一个点击按钮后随机更换图片的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Change</title>
<script src="js/index.js"></script>
</head>
<body>
<img name="image" src="images/img_01.jpg">
<br>
<button onclick="changeImage()">点击更换图片</button>
</body>
</html>
index.js
function changeImage() {
var imgs = document.getElementsByName('image');
var rnd = Math.ceil(Math.random() * 4);
console.log('rnd:' + rnd);
imgs[0].src = "images/img_0" + rnd + ".jpg";
}
实例2.点击按钮隐藏或显示一个图片和文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Change</title>
<script src="js/index.js"></script>
</head>
<body>
<img id="image" src="images/img_01.jpg">
<p id="text">这里风景很美</p>
<button id="btn" onclick="hideImage()">点击隐藏图片</button>
</body>
</html>
function hideImage() {
var btn = document.getElementById('btn');
var img = document.getElementById('image');
var text = document.getElementById('text');
img.hidden = !img.hidden;
text.hidden = !text.hidden;
if(img.hidden)
{
btn.innerText = "点击显示图片";
console.log(btn);
}
else
{
btn.innerText = "点击隐藏图片";
console.log(btn);
}
}
实例三.点击按钮切换图片上一张或下一张
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Change</title>
<script src="js/index.js"></script>
</head>
<body>
<img id="image" src="images/img_01.jpg">
<button id="prevBtn">上一张</button>
<button id="nextBtn">下一张</button>
</body>
</html>
var maxIndex = 4;
var minIndex = 1;
var currentIndex = minIndex;
//如果要在网页一显示出来的时候就能拿到各个标签，就需要实现window.onload方法
window.onload = function () {
var img = document.getElementById('image');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');
showCurrentImage();
prevBtn.onclick = function () {
currentIndex--;
if(currentIndex == 0) {
currentIndex = maxIndex;
}
showCurrentImage();
}
nextBtn.onclick = function () {
currentIndex++;
if(currentIndex == 5) {
currentIndex = minIndex;
}
showCurrentImage();
}
function showCurrentImage() {
console.log("images/img_0" + currentIndex + ".jpg")
img.src = "images/img_0" + currentIndex + ".jpg";
}
}