DOM childNodes 節點列表行為差異解析：IE 與 Firefox 的空白節點之謎

現象觀察

在 IE 瀏覽器中，childNodes 列表會將元素標籤之間的換行符解析為文字節點，導致索引位置與直覺不符；而 Firefox 則忽略這些空白文字節點，表現更符合開發者預期。

實測代碼與結果

<div onclick="alert(this.childNodes[0].tagName)">
<span>span</span>
<pre>pre</pre>
<font>font</font>
</div>

規律總結

• IE：childNodes 包含所有文字節點（含換行、縮排），元素節點索引為 0, 2, 4, 6…（等差數列，首項 0，公差 2）。
• Firefox：預設忽略元素間的空白文字節點，元素節點索引連續 0, 1, 2, 3…。

跨瀏覽器兼容寫法

方法一：使用 element.children (IE 專屬) 或 childElementCount

// 僅取得元素節點，IE 支援 children 集合
var firstChild = element.children[0];

方法二：封裝通用函數過濾節點類型

function getElementChildren(parent) {
    var result = [];
    for (var i = 0; i < parent.childNodes.length; i++) {
        var node = parent.childNodes[i];
        if (node.nodeType === 1) { // Node.ELEMENT_NODE
            result.push(node);
        }
    }
    return result;
}
// 使用
var elements = getElementChildren(div);
var firstEl = elements[0];

方法三：使用現代 DOM API (IE9+)

var firstEl = div.firstElementChild;
var lastEl = div.lastElementChild;
var allEls = div.children; // HTMLCollection，僅含元素節點

最佳實踐建議

1. 優先使用 firstElementChild/lastElementChild/children 等標準屬性。
2. 若需支援舊版 IE，封裝兼容函數統一處理。
3. 避免直接依賴 childNodes 索引存取特定元素。
4. HTML 模板生成時可壓縮空白，減少文字節點干擾。