观看视频并完成以下互动式教程,了解使用 Chrome 开发者工具查看和更改网页 DOM 的基础知识。
本教程假定您了解 DOM 和 HTML 之间的区别。如需了解说明,请参阅附录:HTML 与 DOM。
查看 DOM 节点
在 Elements 面板的 DOM 树中,您可以在 DevTools 中执行所有与 DOM 相关的活动。
检查节点
如果您对特定 DOM 节点感兴趣,可以使用检查功能快速打开 DevTools 并研究该节点。
- 右键点击下方的 Michelangelo,然后选择 Inspect。
- Michelangelo
- Raphael