console 输出 DOM 对象

背景

前端开发调试的时候，经常需要查看HTML DOM元素对象，如图所示：

dom_object.png

DOM元素对象包含了HTML DOM的各种属性，例如：

• 位置
  element.offsetHeight
element.offsetWidth

• 事件绑定
  element.onclick
element.onkeydown

• 子孙DOM节点和祖先DOM节点
  element.childNodes
element.parentNodes

• 文本
  element.innerText
element.outerHTML

• 样式
  element.style.color
element.style.backgroundColor

总之超级有用。

问题

一般我们会使用 console 控制台打出DOM元素对象。
然而，在Chrome和IE中无法单独打印DOM object。
测试代码：在jsfiddle查看测试代码

测试代码

HTML：

<div id="messagecontent">
    <div class="message">
        <p>hello</p>
    </div>
</div>

JS：

var messageContent = document.getElementById('messagecontent');
var messages = messageContent.childNodes;
console.log(messageContent); // Code1
console.log(messages); // Code2
console.log(messages[0]); // Code3

• 在Chrome44中

Code1 对于docment.getElementById()得到的DOM object,console输出文本
Code2 DOM Object Array 输出对象数组 [赞]
Code3 DOM Object Array [x],输出文本

chrome_dom_console.png

• 在IE11 Edge中

Code1 输出文本
Code2 输出文本
Code3 输出文本

ie_dom_console.png

• 在 Firefox 中

Code1 可查看对象 [赞]
Code2 可查看对象 [赞]
Code3 可查看对象 [赞]

firefox_dom_console.png

原因

JS中使用messages[0].style.color = 'red';修改文本颜色成功，说明messages[0]确实是对象。并且在firefox中console可以查看对象，Chrome和IE中console 打印 DOM object 成文本,但其还是对象。

所以这个问题是浏览器的控制台输出策略不同。
对于开发者，在Chrome和IE中查看DOM object不方便。

方案

把DOM对象封装成Array的形式

JS:

console.log([messageContent]);
console.log(messages);
console.log([messages[0]]);

这下在主流浏览器中都正常了，不过要到数组里面查看DOM object。

完。