JS 基础学习四：深入浅出，领略 JS 魅力

2023-10-02 23:15:50

深入剖析 DOM、事件、递归和树形结构，解锁 JavaScript 的强大功能

踏入 JavaScript 基础学习的第四篇章，我们将深入探究一些关键概念，它们将赋能你驾驭网页元素、响应用户交互、解决复杂问题并驾驭数据结构的迷宫。

DOM 和 BOM：与网页元素的亲密接触

DOM（文档对象模型）和 BOM（浏览器对象模型）是 JavaScript 中的利刃，可让你与网页元素亲密接触。DOM 允许你访问和修改网页中的元素，而 BOM 提供了与浏览器沟通和控制的方法。

DOM 示例：数据渲染到页面

使用 DOM，你可以轻松地将数据从 JavaScript 渲染到网页上。例如，你可以使用 document.getElementById() 方法获取网页中的元素，然后使用 innerHTML 属性来修改它的内容。

// 获取网页中的某个元素
const element = document.getElementById("my-element");

// 将数据渲染到该元素中
element.innerHTML = "Hello, world!";

BOM 示例：摇号

使用 BOM，你可以轻松地与浏览器进行通信和控制。例如，你可以使用 window.alert() 方法来弹出一个消息框，或者使用 window.location.href 来获取或设置当前页面的 URL。

// 使用 window.alert() 方法弹出消息框
window.alert("Hello, world!");

// 使用 window.location.href 来获取当前页面的 URL
console.log(window.location.href);

递归：征服树形结构与复杂问题

递归是一种让函数调用自身的方法，在处理树形结构和解决某些复杂问题时非常有用。

递归示例：递归遍历层级不明确的树状结构

递归可以用来遍历层级不明确的树状结构，例如文件夹结构。以下代码展示了如何使用递归来遍历文件夹结构并输出每个文件夹中的文件列表：

// 递归函数，遍历文件夹结构并输出文件列表
function traverseDirectory(dir) {
  // 读取该目录下的所有文件和子目录
  const files = fs.readdirSync(dir);

  // 遍历每个文件和子目录
  files.forEach(file => {
    // 如果是文件，则输出文件名
    if (fs.lstatSync(path.join(dir, file)).isFile()) {
      console.log(file);
    } 
    // 如果是子目录，则递归遍历该子目录
    else {
      traverseDirectory(path.join(dir, file));
    }
  });
}

// 调用 traverseDirectory() 函数来遍历根目录
traverseDirectory("/");

事件：监听用户与网页的互动

事件是 JavaScript 中用来监听用户与网页的互动的一种机制。当用户与网页中的某个元素进行互动时，比如点击、悬停或滚动，就会触发一个事件。我们可以使用 JS 来监听这些事件并做出相应的处理。

事件示例：鼠标事件

我们可以使用 JS 来监听鼠标事件，例如点击、悬停和滚动。以下代码展示了如何使用 JS 来监听点击事件并输出一个消息：

// 获取网页中的某个元素
const element = document.getElementById("my-element");

// 为该元素添加点击事件监听器
element.addEventListener("click", function() {
  // 当该元素被点击时，输出一个消息
  console.log("Element was clicked!");
});