ihtml2document能不能根据id获取dom_一段监视 DOM 的神奇代码

作者：Eddie Aich
翻译：疯狂的技术宅
原文：https://dev.to/eddieaich/spy-on-the-dom-3d47未经允许严禁转载

通过使用此模块，只需将鼠标悬停在浏览器中，即可快速查看DOM元素的属性。基本上它是一个即时检查器。

将鼠标悬停在 DOM 元素上会显示其属性！

自己尝试一下

复制下面的整个代码块，并将其粘贴到浏览器 Web 控制台中。现在将鼠标悬停在你正在浏览的任何网页上。 看到了什么？

它是怎么运作的

此模块以 IIFE 的形式实现。这样只要需要一些 DOM 监视辅助，就可以将代码复制并粘贴到 Web 控制台中。将 div 插入到文档的正文中，并在正文上启用鼠标事件侦听器。从目标元素中检索属性，将其简化为单个字符串，最后在工具提示中显示。

用例

帮助解决UI错误
确保你所应用的 DOM 元素能够按预期工作（比如点击获得正确的类，等等）
了解一个 Web 应用的结构

你可以从这段代码中学到什么

如何使用 Vanilla JS 实现工具提示模块
如何解析 DOM 对象的属性
如何找到鼠标 X 和 Y 的位置
如何获取文档的滚动位置
了解不同浏览器的行为方式 —— Edge vs. Chrome vs. Safari

开源

你可以在这里找到源代码，希望你能做得更好！也许你不希望将其作为 IIFE 来实现，或者是去显示其他数据。

欢迎扫描下方二维码，免费领取 webpack 教程。

ihtml2document能不能根据id获取dom_一段监视 DOM 的神奇代码相关推荐

ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
ihtml2document能不能根据id获取dom_使用DOM进行XML文件的解析
1. 什么是XML? xml是格式化的纯文本,用于存储数据和格式. 2. DOM是什么? DOM是xml的一种解析方法(此外还包括SAX等,此处不提),它将xml文件抽象成为一个树型结构,这棵树个各个 ...
ihtml2document能不能根据id获取dom_JavaScript学习笔记（十三）-- DOM(上）
DOM(上) DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素移除一个元素创建一个元素向页面里 ...
ie插件获取dom_读书笔记《DOM编程艺术》DOM
DOM的理解 1.1 D:当创建了一个网页并把它加载到Web浏览器中时,DOM就生成了,它将我们编写的网页文档转换成一个文档对象. 1.2 O:"对象"是一种自足的数据集合,相关联 ...
VC下通过进程ID获取进程镜像文件路径的方法及其存在的缺陷
工作中经常会遇到通过进程ID获取进程镜像文件或者其他模块的路径的需求.(转载请指明出处)网上关于方案大致存在两种方案: OpenProcess->GetModuleFileName OpenPr ...
使用 spring 的 IOC 解决程序耦合——获取spring的Ioc核心容器，并根据id获取对象、核心容器的两个接口（ApplicationContext、BeanFactory）引发出的问题
IOC概念和spring中的IOC 明确 ioc 的作用: 削减计算机程序的耦合(解除我们代码中的依赖关系). 使用 spring 的 IOC 解决程序耦合获取spring的Ioc核心容器,并根据i ...
最新！中国天气网api接口调用，key获取方式，数据请求秘钥获取，城市id获取方法
以前的天气获取方式已经不支持了,虽然能获取到数据,但是获取到的信息已经不对了. 中国天气网提供的最新接口需要数据请求秘钥key.而且有效期只有7天,用完了还要重新购买,很麻烦,但是获取到的内容绝对是最 ...
js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
进程相关(进程Id获取主窗口)
1.知道进程handle 获取进程名称. PROCESS_INFORMATION* processInfo =(PROCESS_INFORMATION*)pid(); HANDLE hProce ...