输出dom对象的HTML,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：

hello

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。

完。