javascript - ループで参照される childNode の水平オフセット位置を取得する

Question

プレーンな JavaScript を使用して、コレクションをループしながら、特定の childNode のオフセットを取得しようとしています。

一連のテキスト childNodes を持つコンテナーがあります。

var theChildren = document.getElementById( "parentContainer" ).childNodes,
    theChildrenLen = theChildren.length;

for( var i=0; i<theChildrenLen; i++ ) {

    console.log( theChildren[i].offsetLeft );

}

これと他のオフセット参照については未定義になります。

誰かがこれを思いつき、アプローチを見つけましたか?

Answer 1

簡単に言えば、それぞれの子の間にテキスト ノードがあるということです。「theChildrenLen」変数を console.log に記録すると、期待したものではないことがわかります。それらを除外するには、次のような if ステートメントを追加する必要があります。

for( var i=0; i<theChildrenLen; i++ ) {
if (theChildren[i].nodeType !== 3)
   console.log( theChildren[i].offsetLeft );
}

これにより、通常遭遇するすべてのテキスト ノードがスキップされます。