[javascript] 자식 노드를 얻는 가장 좋은 방법

JavaScript는 모든 요소에서 첫 번째 자식 요소를 가져 오는 다양한 방법을 제공하지만 궁금합니다. 가장 좋은 것은, 브라우저와 호환 가능하고, 가장 빠르고, 포괄적이며 예측 가능한 동작입니다. 별명으로 사용하는 메소드 / 속성 목록 :

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

이것은 두 경우 모두에 적용됩니다.

var child = elem.childNodes[0]; // or childNodes[1], see below

그것은 형태의 경우이거나 <div> 반복의 . 텍스트 요소가 발생할 수있는 경우 :

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

지금까지 내가 해결할 수로, firstChild로부터 NodeList를 사용 childNodes하고, firstElementChild용도를children . 나는 MDN 참조를 바탕으로이 가정을하고있다 :

childNode 요소 노드의 첫 번째 자식 요소에 대한 참조이거나 null 없는 경우입니다.

나는 속도면에서 차이가 있다면 아무것도 옆에 없을 것이라고 추측하고 있습니다. firstElementChild 효과적으로에 대한 참조입니다 children[0], 그리고 children객체 어쨌든 이미 메모리에.

나를 던지는 것은 childNodes물건입니다. 테이블 요소에서 양식을 살펴보기 위해 사용했습니다. children모든 양식 요소를 나열 하지만 childNodesHTML 코드의 공백을 포함하는 것으로 보입니다.

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

두 로그 <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

모든 로그 <input type="text"…> . 어떻게 오세요? 한 객체가 “원시”HTML 코드를 사용하여 작업 할 수 있지만 다른 객체는 DOM을 사용하지만 childNodes요소는 두 레벨에서 모두 작동하는 것으로 보입니다.

내 초기 질문으로 돌아가려면 내 추측은 다음과 같습니다. 가장 포괄적 인 객체를 원한다면 childNodes 갈 길입니다.하지만 포괄적이기 때문에 원하는 요소를 반환하는 측면에서 가장 예측하기 쉽지 않을 수 있습니다. 주어진 순간에 기대하십시오. 이 경우 크로스 브라우저 지원도 문제가 될 수 있지만 내가 틀릴 수 있습니다.

누구나 가까이에있는 물건들 사이의 구별을 분명히 할 수 있습니까? 무시할만한 속도 차이가 있다면, 알고 싶습니다. 내가이 모든 것을 잘못 본다면, 저에게 교육을 주시기 바랍니다.

추신 : 제발, 제발, JavaScript를 좋아합니다. 예, 이런 종류의 일을 처리하고 싶습니다. “jQuery가이 문제를 해결합니다”와 같은 답변은 내가 찾는 것이 아니므로 아니요jquery 꼬리표.

답변

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    return _.where(element.childNodes, {nodeType: 1});
}

parentElement.querySelectorAll(':scope > *');

var y = document.querySelector('.list');
var myNode = y.childNodes[11].style.backgroundColor='red';

<ul class="list">
    <li>8</li>
    <li>9</li>
    <li>100</li>
</ul>

<ul class="list">
    <li>ABC</li>
    <li>DEF</li>
    <li>XYZ</li>
</ul>