使用控制台与 DOM 交互

控制台 工具是在 浏览器中与网页交互的好方法。 在 DevTools 中，通常通过使用 “检查 ”工具选择元素以及使用 “元素 ”工具修改 DOM（例如添加或更改元素属性或样式）与 DOM 交互。

控制台工具还可用于使用 JavaScript 代码与 DOM 交互。 例如，可以在 DOM 树中查找元素并使用 DOM API 操作它们。

若要了解有关 “检查 ”工具的详细信息，请参阅使用“ 检查”工具分析页面。 若要了解有关 元素 工具的详细信息，请参阅 使用 Elements 工具检查、编辑和调试 HTML 和 CSS。

在 DOM 树中查找元素

若要从 控制台 工具在 DOM 树中查找元素，请执行以下操作：

  1. 转到要检查的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 在 控制台中键入或粘贴以下代码，然后按 Enter。

    document.querySelector('main');

    <main> DOM 树中的元素显示在控制台中：

    DevTools 的控制台工具，其中显示了 document.querySelector 表达式和生成的主元素

  4. 在 控制台中，将鼠标悬停在生成的 HTML <main> 元素上，或按 Shift+Tab。在呈现的网页中，DevTools 突出显示相应 <main> 的元素：

    呈现的网页中突出显示的主元素

更改网页的 DOM

可以从 控制台 工具更改网页的 DOM 树。 在此示例中，你使用 Console 设置 DOM 元素属性的值，以影响元素的样式：在页面标题中 <h1> 添加灰色背景。

  1. 转到要更改的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 将以下代码粘贴到 控制台中：

    document.querySelector("h1").style.backgroundColor = "lightgrey";

    页面标题后面显示灰色背景：

    控制台工具，显示了上述 JavaScript 代码，网页显示了灰色标题

获取对元素的引用

在复杂的网页中，可能很难找到要更改的正确元素。 但你可以使用 检查 工具来帮助你。 假设你想要更改呈现页面的 Section 1 元素中第一个链接的文本：

要在页面中更改的链接

若要获取对要更改的链接元素的引用：

  1. 转到要检查的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 单击“ 检查 ” (“ 检查工具图标) 工具，然后在呈现的网页中，将鼠标悬停在链接上，如 链接 1：

    使用“检查”工具时，如果将鼠标悬停在链接上，则会突出显示该链接

  4. 单击呈现的网页上的悬停链接。 DevTools 打开“ 元素” 工具，并选中相应的元素：

    DevTools 中的元素工具，选中链接元素

  5. 单击 ... DOM 树中元素旁边的按钮，然后选择“ 复制>复制 JS 路径”：

    元素工具中的复制 JS 路径菜单项

    下面是复制的 JS 路径：

    document.querySelector("body > main > section:nth-child(1) > ul > li:nth-child(1) > a")

    上面的路径是一个 CSS 选择器，它指向使用 “检查 ”工具选择的链接元素。

  6. 在 控制台中，粘贴复制的 JavaScript 路径，但不要按 Enter 。

  7. 将链接文本更改为 Updated link。 为此，请添加到 .textContent = "Updated link" 之前粘贴的 JavaScript 路径：

    控制台工具，包含 JS 路径和 textContent 表达式，以及显示更新链接文本的网页

使用任何要在 控制台中更改 DOM 树的 DOM API。 为了更方便， 控制台 附带了一些帮助程序实用方法。

有用的控制台实用工具函数

许多方便的方法和快捷方式可以作为 控制台 工具中的实用工具功能供您使用。 其中一些实用工具函数对于与网页的 DOM 树进行交互非常有用，如下所述。 要了解更多信息，请参阅 控制台工具实用功能和选择器。

使用 $ 函数和快捷方式获取元素

该 $ 字符在 控制台 工具中具有特殊含义：

  • and $()$$() 函数是 and document.querySelector()document.querySelectorAll() 函数的较短版本。

  • $0、 $1$2$3和$4是最近在“元素”工具中选择的元素的快捷方式。 $0 始终是最近选择的元素。 因此，在前面的示例“ 获取对元素的引用”中，使用 “检查 ”工具选择元素后，可以使用更改 $0.textContent = "Updated link" 其文本以获得相同的效果。

  • $x() 允许使用 XPath 选择 DOM 元素。

从页面获取所有链接

在本示例中，您可以使用 $$() 实用工具函数列出网页上的所有链接。 然后，将该函数与 filter() 数组方法一起使用，以删除不以 https (开头的链接，例如当前网页) 中的锚链接，以便筛选列表以仅包含外部链接。

  1. 转到要从中获取链接的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 若要获取页面中所有链接的列表，请在 控制台中输入以下代码，然后按 Enter：

    $$('a');

    控制台中 $$ ('a') 函数的结果，是一个元素数组

    $$('a') 是 的缩写 document.querySelectorAll('a')。

  4. 展开 控制台中记录的链接列表，然后展开第一个链接对象。 将显示链接的属性：

    展开数组中的第一个元素，显示其属性

  5. 要减少函数返回的信息 $$() 量，请使用 map() 数组方法。 此 map() 方法之所以有效，是因为该 $$() 函数返回了一个数组。

    $$('a').map(a => {
  return {url: a.getAttribute("href"), text: a.innerText}
});

    上面的代码返回所有链接的数组，其中每个链接对象都映射到具有 和 urltext 属性的 JavaScript 对象。

  6. 展开一些返回的链接对象以查看其属性：

    页面上的链接列表，包含每个链接的文本和 href 属性

  7. 要仅列出外部链接，请使用 filter() 数组方法删除不以 https开头的链接：

    $$('a').map(a => {
   return {url: a.getAttribute("href"), text: a.innerText}
}).filter(a => {
   return a.url.startsWith("https");
});

    页面上的外部链接列表

在表格中显示 DOM 元素

在前面的示例中，您在 控制台中显示了页面中的元素列表。 这些元素将显示为 JavaScript 数组。 为了更轻松地在 控制台中使用元素列表，可以使用实用工具函数改为在可排序的表 console.table() 中显示它们：

  1. 转到要检查的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 将以下代码粘贴到 控制台中，然后按 Enter：

    console.table($$('img'), ['src','alt'])

    网页上的元素列表<img>显示在控制台中，格式为表格，每个图像和srcalt属性作为列：

    控制台工具，显示 console.table () 函数和列出所有图像的表

获取所有页标题和定位 URL

在此示例中，获取网页上具有属性 id 的所有标题，并生成指向每个标题的 URL。

  1. 转到要检查的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 将以下代码复制并粘贴到 控制台中，然后按 Enter：

    let headings = $$('main [id]').filter(el => {
  return el.nodeName.startsWith('H');
}).map(el => {
  return `${el.innerText}: ${document.location.href}#${el.id}\n`;
});
console.log(headings.join("\n"));

    结果是包含每个节标题内容的文本，后跟节标题的完整 URL：

    控制台工具，显示页面上所有标题及其 URL 的列表

从控制台复制信息

在前面的示例中，您生成了元素列表和信息字符串。 从 控制台 复制生成的信息并将其粘贴到其他位置可能会很有用。

要从 控制台中运行的表达式复制返回值，请使用 copy() 实用工具函数：

  1. 转到要从中提取一些信息的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 若要复制页面上所有图像 URL 的列表，请在 控制台中输入以下代码，然后按 Enter：

    copy($$('img').map(img => img.src).join("\n"));

    实用工具函数 copy() 可以采用任何可转换为字符串的参数并将其复制到剪贴板。 在此示例中，参数是包含页面上所有图像 URL 的字符串，用换行分隔。

  4. 打开文本编辑器（如 Visual Studio Code），然后将复制的图像 URL 粘贴到编辑器中：

    文本编辑器中的图像 URL 列表

清除控制台

在 控制台中运行代码时，通常会得到许多不再需要显示的输入语句和输出结果。 可以使用实用工具函数清除控制台clear()。

列出分配给元素的事件侦听器

要列出分配给元素的所有事件侦听器，请使用 getEventListeners() 实用工具函数：

  1. 转到要检查的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 单击“ 检查 ”工具，然后在呈现的网页中，单击其中一个图像以将其选中。 将显示 “元素” 工具，并在 DOM 树中突出显示所选图像元素：

    元素工具，选中图像元素

  4. 打开 控制台 工具，输入以下代码，然后按 Enter：

    getEventListeners($0);

    在上面的代码段中，$0是“元素”工具中当前所选<img>元素的快捷方式。 getEventListeners()实用工具函数返回一个对象，其中包含分配给图像的所有事件侦听器。

  5. 展开对象，然后展开列表中唯一的事件侦听器以查看侦听器的属性。 在此listener示例中，该属性显示触发事件时调用的函数的名称， (，) ： showImage

    展开的对象，显示侦听器属性

监视页面上触发的事件

使用 JavaScript 的网站通常会对浏览器中发生的用户事件做出反应。 可能很难跟踪浏览器触发的所有事件。 monitorEvents()实用工具函数允许您监视在网页上触发的事件。

监视元素上的所有事件

若要开始监视事件，请执行以下操作：

  1. 转到要监视的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 若要开始监视在元素上触发的事件，例如在其中一个 <img> 元素上触发的事件，请在 控制台中输入以下代码，然后按 Enter：

    monitorEvents(document.querySelector('img'));

    上述代码监视在页面上的第一个 <img> 元素上触发的所有事件。

  4. 在呈现的网页中，将鼠标悬停在图像上，然后用键盘将鼠标或 Tab 移动到图像上。 事件（例如 mouseover、 mousemove）并 focus 记录到 控制台：

    控制台工具，显示图像上触发的所有鼠标事件的列表

监视事件时，每次浏览器触发事件时，都会在 控制台 中获取日志。 这可能会导致 控制台中出现较多噪音。 还可以监视元素上的特定事件。

监视元素上的特定事件

若要开始监视元素上的特定事件，请执行以下操作：

  1. 转到要监视的网页。 例如，在新的选项卡或窗口中打开 DevTools 控制台工具 DOM 交互演示页 。

  2. 按Ctrl+Shift+J (Windows、Linux) 或Command+Option+J (macOS)。 控制台 工具在 DevTools 的网页旁边打开。

  3. 若要开始仅监视在页面上的第一个 <img> 元素上触发的 mousedown、mouseup 和单击事件，请在 控制台中输入以下代码，然后按 Enter：

    monitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);

  4. 在呈现的网页中，单击第一个图像。 mousedown，mouseupclick事件将记录到控制台：

    控制台工具，显示对图像触发的鼠标事件的列表

监视窗口上的事件

若要每次滚动窗口或调整窗口大小时在 控制台 中获取通知：

  1. 将以下代码粘贴到 控制台中：

    monitorEvents(window, ['resize', 'scroll']);

  2. 滚动页面并调整浏览器窗口的大小。 控制台会记录触发的事件：

    控制台工具，显示调整大小和滚动事件的列表

停止监视事件

在 DOM 中监视事件时， 控制台 可能会变得杂音。 若要停止监视事件，请使用 unmonitorEvents() 实用工具函数：

unmonitorEvents(document.querySelector('img'));
unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
unmonitorEvents(window, ['resize', 'scroll']);

将 DOM 交互脚本另存为代码片段

如果在 控制台中重复输入相同的 DOM 交互代码，请考虑改为将代码另存为代码片段，然后运行该代码片段。 代码片段保存在 源 工具中，可以从那里或命令 菜单运行它们。 若要了解详细信息，请参阅 在任何网页上运行 JavaScript 代码段。

另请参阅

  • 上次更新时间为