firstElementChild
要素のこの属性にアクセスするには、nodeType 1 要素の最初の子ノード参照が Element オブジェクトとして返される必要があります。アクセスされている要素プロパティに子ノードがない場合、またはそのようなすべての子ノードが要素ノードではない場合、このプロパティは null を返す必要があります。
lastElementChild
要素のこのプロパティにアクセスすると、nodeType 1 要素の最後の子ノード参照を Element オブジェクトとして返す必要があります。アクセスされている要素プロパティに子ノードがない場合、またはそのようなすべての子ノードが要素ノードではない場合、このプロパティは null を返す必要があります。
previousElementSibling
要素のこの属性にアクセスするには、ファイル順で要素の前にある nodeType 1 要素の兄弟ノード参照を Element オブジェクトとして返す必要があります。アクセスされる要素プロパティに先行する兄弟ノードがない場合、またはこれらの兄弟ノードが要素ノードでない場合、このプロパティは null を返す必要があります。
nextElementSibling
要素のこの属性にアクセスすると、nodeType 1 に属する要素の兄弟ノード参照をファイル順に Element オブジェクトとして返す必要があります。アクセスされている要素プロパティに後続の兄弟ノードがない場合、またはこれらの兄弟のいずれも要素ノードではない場合、このプロパティは null を返す必要があります。
childElementCount
要素のこの属性にアクセスすると、nodeType 1 に属するこれが返される必要があります。この属性にアクセスすると、実行時にその数が格納される場合があります。は数値を計算できますが、プロパティにアクセスするときは、数値は常に子要素ノードの数を表す必要があります。 直接の子ノードのみがカウントされます。アクセスされたアトリビュート エレメントの子ノードの 1 つにもエレメントの子ノードがある場合、次のレベルの子ノードはカウントされません。プロパティにアクセスされている要素に子ノードがない場合、またはこれらの子ノードが要素ノードでない場合、このプロパティは 0 を返す必要があります。
function spaceChildren( el ) {
// 要素ノードの数を検索します
var elCount = el.childElementCount;
var eachWidth = window.innerWidth / (elCount 1); child element
var childEl = el.firstElementChild;
// 初期位置を設定します
var nextPos = eachWidth/2;
// 子要素を 1 つずつループします
while ( childEl ) {
// 子要素を配置します
childEl.style.setProperty( 'position', 'absolute', '' );
childEl.style.setProperty( 'left'); , nextPos 'px', '' );
childEl.style.setProperty( 'width', eachWidth 'px', '' );
// 幅分増加します
nextPos = eachWidth;
// 次に、次の子要素に移動します
childEl = childEl.nextElementSibling;