javascript - 为什么对象的控制台日志输出一个字符串？

Question

下面的代码选择了一个contenteditable中光标所在的当前节点:

var selection;
    if (window.getSelection){
        selection = window.getSelection();
    }
else if (document.selection && document.selection.type !== "Control") {
    selection = document.selection;
}
var anchor_node = selection.anchorNode; //current node on which cursor is positioned
console.log(anchor_node);

console.log 说“文本”是节点的内容；但是anchor_node实际上是一个对象

$('.result').val(anchor_node);

输出“[对象对象]”；它可以使用:

$('.result').val(anchor_node.data);

那么为什么日志只输出内容字符串呢？如何记录整个 anchor_node 对象？

Answer 1

您没有提到您使用的是什么浏览器/调试器，但 Chrome 的开发工具将通过呈现其外部 HTML 来输出该元素，但它是实时可点击；如果需要，您甚至可以右键单击它并选择“在元素面板中显示”。

另一种选择(因为 nikhil 删除了他的答案，不知道为什么，去投票，但它不再存在)是使用 console.dir，它不会尝试处理特别是 DOM 元素。

关于 console.log 对 DOM 元素的特殊处理(在某些开发工具中):

例如:

console.log(document.querySelector("a"));

<a href="http://example.com">This is the anchor</a>

日志示例，我将光标悬停在它上面——注意它如何突出显示页面上的元素:

右键单击，我可以选择在元素面板中显示:

如果我这样做的结果: