在前端开发中，我们常常需要获取当前页面上的 DOM 元素，或者将 DOM 操作记录下来以便后续处理。本文将介绍如何使用 JavaScript 提取当前 DOM 并将其打印为字符串，保留样式完整。
1. 获取当前 DOM
在 JavaScript 中，我们可以通过 document 对象访问当前页面的 DOM 树。要获取整个页面的 DOM，只需要使用 document.documentElement 即可。如果要获取某个具体的 DOM 元素，可以使用 document.querySelector() 或 document.querySelectorAll() 方法。
-- ------- --- ----- ------- - ------------------------- -- -- -- - ------- - --- -- ----- ----- - ---------------------------------
2. 将 DOM 转换为字符串
要将 DOM 转换为字符串，我们可以使用 outerHTML 属性，它返回调用它的元素（包括所有子节点）的 HTML 内容。但是，仅使用 outerHTML 会导致一些问题，例如部分属性可能会被浏览器修改，如标签名和属性名的大小写、引号类型等。
为了保证转换结果的准确性和样式的完整性，我们可以借助 XMLSerializer 对象，它可以将 DOM 转换为 XML 字符串。注意：在某些浏览器中，可能需要使用 new XMLSerializer() 来创建对象。
-- -- ------------- - --- ------ ----- ---------- - --- ---------------- ----- -------- - -------------------------------------- ----- --------- - ------------------------------------
3. 完整示例代码
--------- -----
----- ----------
------
----- --------------- --
-----------------------
-------
------
---- ---------------- ------------
--------
-- ------- ---
----- ------- - -------------------------
-- -- -- - ------- - --- --
----- ----- - ---------------------------------
-- -- ------------- - --- ------
----- ---------- - --- ----------------
----- -------- - --------------------------------------
----- --------- - ------------------------------------
------------------ ------- ----------
--------------- - ----- - ------- -----------
---------
-------
-------4. 总结
本文介绍了如何使用 JavaScript 提取当前 DOM 并将其打印为字符串，保留样式完整。通过掌握本文所述的方法，可以更好地处理 DOM 操作相关的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24873