本文介绍JavaScript文档对象模型（DOM）的基础操作，重点讲解如何通过getElementById和getElementsByTagName获取页面元素。通过一个完整的HTML与JavaScript代码案例，演示如何编写逻辑实现上一张和下一张的图片切换功能，帮助开发者巩固DOM节点获取与事件处理的核心知识点。
DOM基础与图片切换案例概述
本文从DOM操作的基础概念入手，并通过一个具体的图片切换案例来巩固相关知识点。
DOM核心概念与元素获取方法
DOM全称为文档对象模型（document object model），它是W3C推荐的标准，用于将HTML或XML文档映射为树状结构，使程序能够动态访问和更新文档的内容、结构和样式。
通过元素的ID来获取页面元素是DOM操作中最常用的方式之一。例如，可以使用语句 var xx = document.getElementById("id"); 来获取指定ID的元素节点。
除了通过ID获取，还可以根据HTML标签名称来获取元素集合。例如，使用语句 var xx = document.getElementsByTagName("div"); 可以获取页面中所有的div元素。
图片切换功能实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
/*设置上边距50px 水平居中*/
margin: 50px auto;
/*设置边框*/
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
img {
width: 500px;
}
</style>
<script>
//btn 为按钮id clickEventFunction 为点击后执行的操作函数
function addClick(btn, clickEventFunction) {
var myButton = document.getElementById(btn);
myButton.onclick = clickEventFunction;
};
window.onload = function () {
(function () {
var pics = ["imgs/1.png",
"imgs/2.png",
"imgs/3.png"];
var index = 0;
showPicNum(index);
var img = document.getElementsByTagName("img")[0];
// var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
addClick("btn1", function () {
index--;
if (index <= -1) {
index = pics.length - 1;
}
console.log(index + " ----- ");
img.src = pics[index];
showPicNum(index);
});
addClick("btn2", function () {
index++;
if (index >= pics.length) {
index = 0;
}
console.log(index + " ++++++++ ");
img.src = pics[index];
showPicNum(index);
});
//
// btn1.onclick = function () {
// index --;
// if(index <= -1){
// index = pics.length - 1;
// }
// console.log(index + " ----- ");
// img.src = pics[index];
// showPicNum(index);
// };
// btn2.onclick = function () {
// index ++;
// if(index >= pics.length){
// index = 0;
// }
// console.log(index + " ++++++++ ");
// img.src = pics[index];
// showPicNum(index);
// };
console.log(index);
/**
* 展示当前图片为第几张
* @param index 当前图片索引
*/
function showPicNum(index) {
var descrs = document.getElementById("discs");
descrs.innerText = "一共" + pics.length + "张图片,当前第" + ++index + "张";
}
}())
};
</script>
</head>
<body>
<div id="outer">
<p id="discs"></p>
<img src="imgs/1.png"/><br>
<button id="btn1" type="button" value="上一张">上一张</button>
<button id="btn2" type="button" value="下一张">下一张</button>
</div>
</body>
</html>完整的文档目录结构如下所示：
最终实现的运行效果如下图所示：
以上介绍了基于JavaScript DOM的图片切换小案例详解。希望本文的内容对大家有所帮助，如有任何疑问欢迎留言交流，小编会及时回复。在此也非常感谢大家对本站网站的支持！