背景

前端開(kāi)發(fā)調(diào)試的時(shí)候，經(jīng)常需要查看HTML DOM元素對(duì)象，如圖所示：

dom_object.png

DOM元素對(duì)象包含了HTML DOM的各種屬性，例如：

• 位置
  element.offsetHeight
element.offsetWidth

• 事件綁定
  element.onclick
element.onkeydown

• 子孫DOM節(jié)點(diǎn)和祖先DOM節(jié)點(diǎn)
  element.childNodes
element.parentNodes

• 文本
  element.innerText
element.outerHTML

• 樣式
  element.style.color
element.style.backgroundColor

總之超級(jí)有用。

問(wèn)題

一般我們會(huì)使用 console 控制臺(tái)打出DOM元素對(duì)象。
然而，在Chrome和IE中無(wú)法單獨(dú)打印DOM object。
測(cè)試代碼：在jsfiddle查看測(cè)試代碼

測(cè)試代碼

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 對(duì)于docment.getElementById()得到的DOM object,console輸出文本
Code2 DOM Object Array 輸出對(duì)象數(shù)組 [贊]
Code3 DOM Object Array [x],輸出文本

chrome_dom_console.png

• 在IE11 Edge中

Code1 輸出文本
Code2 輸出文本
Code3 輸出文本

ie_dom_console.png

• 在 Firefox 中

Code1 可查看對(duì)象 [贊]
Code2 可查看對(duì)象 [贊]
Code3 可查看對(duì)象 [贊]

firefox_dom_console.png

原因

JS中使用messages[0].style.color = 'red';修改文本顏色成功，說(shuō)明messages[0]確實(shí)是對(duì)象。并且在firefox中console可以查看對(duì)象，Chrome和IE中console 打印 DOM object 成文本,但其還是對(duì)象。

所以這個(gè)問(wèn)題是瀏覽器的控制臺(tái)輸出策略不同。
對(duì)于開(kāi)發(fā)者，在Chrome和IE中查看DOM object不方便。

方案

把DOM對(duì)象封裝成Array的形式

JS:

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

這下在主流瀏覽器中都正常了，不過(guò)要到數(shù)組里面查看DOM object。

完。