9、JavaScript事件处理与DOM操作全解析

JavaScript事件处理与DOM操作全解析

1. 变量使用与控制台操作

在JavaScript编程中，我们可以在控制台进行一系列操作。首先，若要清除控制台内容，有两种方式：
- 点击控制台面板左上角的图标。
- 使用键盘快捷键Command - K（在Windows系统中为Ctrl - K）。

当我们开始输入变量名，如 DETAIL_IMAGE_SELECTOR ，控制台会根据已创建的变量提供自动补全建议。按下Tab键，控制台会自动补全变量名，按下Return键，控制台会显示该变量的值为字符串 "[data - image - role="target"]" 。

在JavaScript里，字符串是五种原始值类型之一，其他还包括数字和布尔值等。原始值代表简单的值，与更复杂的值类型形成对比。

2. 访问DOM元素

我们可以利用之前创建的变量来访问页面上的元素。具体操作步骤如下：
1. 在控制台输入 document.querySelector(DETAIL_IMAGE_SELECTOR); 。
2. 按下Return键，控制台会显示详细图像的HTML代码。
3. 将鼠标悬停在控制台的HTML代码上，页面上的详细图像会被高亮显示，就像在元素面板中点击HTML代码一样。

在上述代码中， document 是浏览器内置的变量，它的值是一个对象，代表整个网页。 document 对象提供了许多方法来获取页面上元素的引用，例如 <