浅谈JavaScript DOM学习篇 - 图片切换小案例

学习 JavaScript 的过程离不开操作文档对象模型（DOM），本文将通过一个简单的图片切换小案例来阐述 DOM 的基础知识和常用操作。

一、前置知识

在开始学习 DOM 之前应该先了解以下基础知识：

• HTML
• CSS
• JavaScript 语法基础

二、正文内容

1. 简述DOM

DOM（文档对象模型，Document Object Model）是 W3C （万维网联盟）制定的标准接口，它将整个 HTML 文档视为一个多层节点结构树。开发者可以使用 JavaScript 脚本来访问和操作文档的各个节点。

在 JavaScript 中使用 DOM 的基础方法是通过 document 对象。document 对象代表了整个 HTML 文档。可以通过 document 对象获取到 HTML 文档中的任何元素或标签，比如头部、段落、标签等等。

2. 图片切换小案例

本节将通过一个简单的图片切换小案例来阐述 DOM 的基础知识和常用操作。首先，HTML 部分代码如下：

<div id="container">
  <img src="img/pic1.png" id="pic" />
  <button onclick="previous()">上一张</button>
  <button onclick="next()">下一张</button>
</div>

其中，<div> 标签的 id 属性为 container，表示整个图片切换功能的容器；<img> 标签的 id 属性为 pic，表示要切换的图片。

接下来，通过 JavaScript 脚本来实现图片的切换：

var index = 1;

function previous() {
  var pic = document.getElementById("pic");
  index--;
  if (index < 1) {
    index = 3;
  }
  pic.src = "img/pic" + index + ".png";
}

function next() {
  var pic = document.getElementById("pic");
  index++;
  if (index > 3) {
    index = 1;
  }
  pic.src = "img/pic" + index + ".png";
}

JavaScript 部分代码解释：

• var index = 1; 初始化图片序号为 1。
• function previous() 实现上一张图片的切换，首先获取到 id 为 pic 的图片元素，将图片序号 -1，当图片序号小于 1 时，设为 3，判断完成后，将图片的 src 属性设置为 img/pic序号.png 的路径。
• function next() 实现下一张图片的切换，和 previous() 函数类似，将图片序号 +1，当图片序号大于 3 时，设为 1。

完成以上三个部分的操作之后，用户点击“上一张”或“下一张”按钮时，图片会按照预期的顺序进行显示切换。

3. 总结

本文简要介绍了 DOM 的基础知识和常用操作，并通过一个图片切换小案例详细阐述了相关知识点和实现过程。通过这样的方式，读者可以更好地理解 DOM 的使用方法和概念，为进一步的 JavaScript 学习打下坚实基础。

下面再列举两条操作 DOM 的示例，以便让读者更好地理解：

示例 1：获取元素并修改属性

// 获取id为one的元素
var element = document.getElementById("one");
// 修改元素的background-color属性为红色
element.style.backgroundColor = "red";

示例 2：创建新元素

// 创建一个div元素
var newDiv = document.createElement("div");
// 创建并设置文本内容
var textNode = document.createTextNode("Hello World!");
// 将文本节点添加到div元素中
newDiv.appendChild(textNode);
// 将新元素添加到id为container的元素下
document.getElementById("container").appendChild(newDiv);

以上两个示例分别实现了获取元素并修改属性、创建新元素的操作，读者可以自行学习并实践。