JavaScript DOM开发中无法在浏览器控制台直接打印innerHTML问题求助

浏览器控制台默认针对传入的DOM节点对象会做特殊渲染：直接输出可交互的DOM节点预览卡片，支持点击展开查看节点的所有属性、子节点、样式等调试信息，不会默认输出节点对应的HTML字符串内容。你代码中直接传入span.parentNode这类DOM节点对象给console.log，自然就会出现对应的现象。

方案1：打印DOM节点的HTML属性 #

如果你只需要查看节点的HTML结构，直接打印outerHTML/innerHTML属性即可：

const span = document.querySelector("span")
console.log(span.parentNode.outerHTML);
console.log(span.parentElement.outerHTML);
console.log(span.parentNode.parentNode.outerHTML);

其中outerHTML会包含节点本身的标签，innerHTML只包含节点内部的子元素内容，可按需求选择。

方案2：使用dirxml方法同时保留两种能力 #

如果你既想要控制台直接显示HTML结构，又想保留点击展开查看节点详情的能力，用console.dirxml()替代普通的console.log()即可：

const span = document.querySelector("span")
console.dirxml(span.parentNode);
console.dirxml(span.parentElement);
console.dirxml(span.parentNode.parentNode);

内容的提问来源于stack exchange，提问作者kai