[js] xx.childNodes がモダンブラウザでも古いIEと同じく空要素をスルーする挙動にしたい

Question

前提・実現したいこと

javascriptにて、xx.childNodes の動作が、モダンブラウザでも古いIEと同様に空文字要素をスルーする挙動にしたい。

<div id="ct">
   <li>1</li>
   <li>2</li>
   <li></li>
</div>

//document.getElementById("ct").childNodes.length
// 古いIE -> 3
// モダンブラウザ -> 7

既存のコードを変更することなく（一旦要素を取得してから処理を追加するなどの方法ではなく）、document.getElementById("ct").childNodes.length でモダンブラウザでも「3」と出力されるようにしたい（オーバーライド?したい）。

Comments

[tkturbo]

「モダンブラウザ」とは何を指していますか？chrome(バージョン: 67.0.3396.99)でもEdge(42.17134.1.0)でも「document.getElementById("ct").childNodes.length」の結果は「3」と出力されるのですが。。。

Answer 1

document.getElementById("ct").childNodes.length でモダンブラウザでも「3」と出力される

childNodesはテキストエレメンツも拾うので、どうやっても3にはなりません
IE8までとIE9からだと仕様が違うみたいですね
childrenを拾ってあげてください

<script>
window.onload=function(){
  console.log(document.getElementById("ct").childNodes.length);
  console.log(document.getElementById("ct").children.length);
};

</script>
<div id="ct">
   <li>1</li>
   <li>2</li>
   <li></li>
</div>

※window.onloadは推奨されませんが、古いIE指定ということであえて書いてあります