不要なテキストノードの除去

li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com関連の、にツッコミしてみる。
innerHTMLの書き換えはaddEventListenerしたイベントが消えたりするのと、 Manabuさんの実装だとli要素の中の改行なども除去してしまうので意図しない動作(例えばliの中にpreがあったとき)をしてしまう可能性がある。

というわけで改案。

(function(){
var ols = document.getElementsByTagName('ol');
var TEXT_NODE = document.TEXT_NODE || document.createTextNode("").nodeType;
for (var i =0,l=ols.length;i<l;i++) {
    var ol = ols[i];
    for (var j = 0; j < ol.childNodes.length; j++) {
        if (ol.childNodes[j].nodeType === TEXT_NODE) ol.removeChild(ol.childNodes[j--]);
    }
}
})();

上のサンプルではol要素の直接の子要素であるテキストノードを除去しています。
childNodesは1つ除去すると以降の要素が前にずれるので、removeしたらインデックスを1つ戻してあげる必要があります。

もしくは、whileループとnextSiblingを使ったほうがスマートかもしれません。

(function(){
var ols = document.getElementsByTagName('ol');
var TEXT_NODE = document.TEXT_NODE || document.createTextNode("").nodeType;
for (var i =0,l=ols.length;i<l;i++) {
    var ol = ols[i];
    var st = ol.firstChild;
    while (st.nextSibling) {
        if (st.nextSibling.nodeType === TEXT_NODE) {
            ol.removeChild(st.nextSibling);
        } else {
            st = st.nextSibling;
        }
    }
}
})();