Firefox의 ElementTraversal 인터페이스_DOM 사용 지침

firstElementChild
요소의 이 속성에 액세스하려면 nodeType 1 요소의 첫 번째 하위 노드 참조가 요소 개체로 반환되어야 합니다. 액세스되는 요소 속성에 하위 노드가 없거나 모든 하위 노드가 요소 노드가 아닌 경우 이 속성은 null을 반환해야 합니다.
lastElementChild
요소의 이 속성에 액세스하려면 nodeType 1 요소의 마지막 하위 노드 참조를 요소 개체로 반환해야 합니다. 액세스되는 요소 속성에 하위 노드가 없거나 모든 하위 노드가 요소 노드가 아닌 경우 이 속성은 null을 반환해야 합니다.
previousElementSibling
요소의 이 속성에 액세스하려면 파일 순서에서 요소 앞에 있는 nodeType 1 요소의 형제 노드 참조를 요소 개체로 반환해야 합니다. 액세스되는 요소 속성에 이전 형제 노드가 없거나 이러한 형제 노드 중 요소 노드가 없는 경우 이 속성은 null을 반환해야 합니다.
nextElementSibling
요소의 이 속성에 액세스하려면 파일 순서에서 nodeType 1에 속하는 요소의 형제 노드 참조를 요소 개체로 반환해야 합니다. 액세스되는 요소 속성에 후속 형제 노드가 없거나 이러한 형제 중 요소 노드가 없는 경우 이 속성은 null을 반환해야 합니다.
childElementCount
요소의 이 속성에 액세스하려면 nodeType 1에 속하는 이 속성을 반환해야 합니다. 이 속성에 액세스할 때 실행 시 숫자가 저장될 수 있습니다. 숫자를 계산할 수 있지만 속성에 액세스할 때 숫자는 항상 하위 요소 노드의 수를 나타내야 합니다. 직접 하위 노드만 계산되어야 합니다. 액세스된 특성 요소의 하위 노드 중 하나에 요소 하위 노드도 있는 경우 다음 수준 노드는 계산되지 않습니다. 속성에 액세스하는 요소에 하위 노드가 없거나 이러한 하위 노드 중 요소 노드가 없는 경우 이 속성은 0을 반환해야 합니다.

코드 복사 코드는 다음과 같습니다.

function spaceChildren( el ) {
// 요소 노드 수 찾기
var elCount = el.childElementCount;

var EachWidth = window.innerWidth / (elCount 1)// 첫 번째 찾기 하위 요소
var childEl = el.firstElementChild;

// 초기 위치 설정
var nextPos = EachWidth/2;// 하위 요소를 하나씩 반복합니다.
while ( childEl ) {
// 하위 요소 배치
childEl.style.setProperty( 'position', 'absolute', '' )
childEl.style.setProperty( 'left' , nextPos 'px', '' );
childEl.style.setProperty( 'width', EachWidth 'px', '' );

// 너비만큼 거리 늘리기
nextPos = EachWidth;

// 다음 하위 요소로 이동합니다.
childEl = childEl.nextElementSibling;