document.querySelector('header').style.border = '2em solid green'
标题周围会显示一个绿色边框：
获取元素的直接引用
根据网页的复杂性，找到要操作的正确元素可能会令人望而生畏。 但可以使用 “检查 ”工具来提供帮助。 假设你想要在呈现页面的标题内操作 文档 区域：
获取对要操作的元素的直接引用：
在 DevTools 中，单击“ 检查” 工具，然后在呈现的网页中，将鼠标悬停在 元素上：
单击页面上的元素，DevTools 将跳转到 “元素” 工具。
单击 ... DOM 树中 元素旁边的菜单：
右键单击 DOM 树中的元素，然后选择“ 复制>复制 JS 路径”。
在 控制台中，粘贴复制的 JavaScript 路径，但尚未按 Enter 。
将链接的文本更改为 My Playground。 为此，请将 添加到 .textContent = "My Playground" 之前粘贴的 JavaScript 路径：
在 控制台中使用所需的任何 JavaScript DOM 操作。 为了更方便， 控制台 附带了一些帮助程序实用工具方法。
有用的控制台实用工具方法
许多方便的方法和快捷方式可用作 控制台实用工具。 某些方法非常强大，比使用 console.log() 语句更有效。
$ 函数的功能
在$控制台中具有特殊功能，你可能还记得 jQuery 中的这一点。
$_ 存储最后一个命令的结果。 因此，如果键入 2+2 并按 Enter，然后键入 $_， 控制台 将显示 4。
$0 到 $4 是最后一个检查元素的堆栈。 $0 始终是最新的。 因此，在前面的示例中，只需选择 “检查” 工具和类型 $0.textContent = "My Playground" 中的 元素即可获得相同的效果。
$x() 允许使用 XPATH 选择 DOM 元素。
$()和 $$() 是 和 document.querySelectorAll()的document.querySelector()较短版本。
输入以下代码，该代码检索网页中的所有链接，并将链接显示为可排序的表，例如， (复制并粘贴到 Excel) ：
console.table($$('a'),['href','text']);
$$('a') 是 的 document.querySelectorAll('a')缩写。
但是，假设你不想显示所有信息，但想要将其作为数据抓取，然后仅选择部分数据。
快捷方式 $$('a') 有助于实现此目标：它选择定位点链接以及每个定位点链接的所有属性。 但问题是，你只需要定位点链接和相关文本，而不是定位点链接的所有属性。
为了解决此问题，$$快捷方式具有一个有趣的额外功能：该快捷方式没有返回类似于 document.querySelectorAll()$$ 的纯 NodeList ，而是提供所有Array方法，包括 map()。
map()使用 对象的 方法Array将信息减少到所需的信息：
$$('a').map(a => {
return {url: a.href, text: a.innerText}
上述代码返回所有链接的 ， Array 作为 具有 url 和 text 属性的对象。
尚未完成;多个链接是指向网页的内部链接或具有空文本。
filter使用 方法删除内部链接：
$$('a').map(a => {
return {text: a.innerText, url: a.href}
}).filter(a => {
return a.text !== '' && !a.url.match('learn.microsoft.com')
通过在 控制台中发出语句操作 DOM，可以在呈现的网页中更改这些元素。
例如，输入以下代码，该代码在所有外部链接周围添加绿色边框：
$$('a[href^="https://"]').forEach(
a => a.style.border = '1px solid green'
示例：获取所有页面标题和定位点 URL
准备好使用更复杂的示例了吗？ 从 Markdown 标记生成的 HTML 网页（如本文）具有每个标题的自动 ID 值，以便直接深层链接到网页的该部分。 例如， # New features Markdown 源文件中的 h1 标题变为 <h1 id="new-features">New features</h1> HTML 文件中。
列出要复制和粘贴的所有自动标题：
打开 控制台。
复制并粘贴以下代码：
let out = '';
$$('#main [id]').filter(
elm => {return elm.nodeName.startsWith('H')}
).forEach(elm => {
out += elm.innerText + "\n" +
document.location.href + '#' +
elm.id + "\n";
console.log(out);
结果是文本，其中包含每个标题的内容，后跟指向它的完整 URL。
使用清除和复制进行清理
在 控制台中开发时，事情可能会变得混乱。 可能很难选择要复制和粘贴的结果。 以下两种实用工具方法可帮助你：
copy() 将你提供的任何内容复制到剪贴板。 方法 copy() 与 混合 $_时特别有用，后者会复制最后一个结果。
clear() 清除 控制台。
读取和监视事件
控制台的另外两个有趣的实用工具方法处理事件：
getEventListeners(node) 列出节点的所有事件侦听器。
monitorEvents(node, events) 监视并记录节点上发生的事件。
列出分配给网页中第一个窗体的所有事件侦听器：
在 DevTools 中，打开 控制台。
在 控制台中键入或粘贴以下代码：
getEventListeners($('form'));
监视时，每次发生指定元素更改时，你都会在 控制台 中收到通知。 将要侦听的事件定义为第二个参数。 请务必定义要监视的事件，否则将报告元素发生的任何事件。
若要在每次滚动、调整窗口大小或用户在搜索窗体中键入时在 控制台 中获取通知，请执行以下操作：
在 DevTools 中，打开 控制台。
将以下代码粘贴到 控制台中：
monitorEvents(window, ['resize', 'scroll']);
monitorEvents($0, 'keyup');
若要记录当前所选元素上的任何键操作，请关注标题中的搜索表单并按一些键。
若要停止日志记录，请删除设置的监视，请在 控制台中输入以下代码：
unmonitorEvents(window, ['resize', 'scroll']);
unmonitorEvents($0, 'key');
重用 DOM 操作脚本
你可能会发现从 控制台操作 DOM 很有用。 你可能很快就会遇到 主机 作为开发平台的限制。 好消息是， DevTools 中的 Sources 工具提供了一个功能齐全的开发环境。 在 “源”工具中 ，可以：
将 控制台 的脚本存储为代码片段;请参阅 在任何网页上运行 JavaScript 的代码片段。
使用键盘快捷方式或编辑器在网页中运行脚本。
控制台工具中的日志消息
在控制台中运行 JavaScript
