자노드를 취득하는 최선의 방법

자노드를 취득하는 최선의 방법

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 , , , , 입니다.firstElementChildchildrenMDN을 이용하다

childNode 자 "" " " " " " " " 입니다.null없다면요.

에서는 것 firstElementChild 을 하는 것입니다.children[0]및 , 。children오브젝트는 이미 메모리에 있습니다.

하는 은, 날날 what what 이다.childNodes 테이블 볼 때 한 적이 테이블 요소에서 폼을 보기 위해 사용했습니다.한편, 「 」는, 「 」, 「 」의 사이에children 폼.childNodesHTML html html html html 。

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"…> ??할 수 오브젝트가 있는 다른 할 수 만, raw HTML은 DOM을 사용하고 있습니다.childNodes요소는 양쪽 레벨에서 모두 동작하는 것 같습니다.

번째, 포괄적인 오브젝트를 , 가장 포괄적인 오브젝트는 다음과 같습니다childNodes이 방법은 선택 사항이지만, 그 포괄성 때문에 내가 원하는/기대하는 요소를 어느 순간이라도 반환한다는 점에서 가장 예측하기 어려운 것일 수 있습니다.이 경우 크로스 브라우저 지원도 문제가 될 수 있지만, 제가 틀릴 수도 있습니다.

가까이 있는 물건의 구별을 누가 좀 더 명확히 할 수 있을까요?아무리 사소한 속도라도 차이가 있다면 저도 알고 싶습니다.만약 내가 이 모든 것을 잘못 보고 있다면, 나를 자유롭게 교육시켜라.

---

PS: 제발, 부탁이에요.저는 JavaScript를 좋아하기 때문에, 네, 이런 것에 대응하고 싶습니다."jQuery deles to this for you"와 같은 답변은 제가 원하는 것이 아니므로 jquery 태그는 없습니다.

여러분은이 두 가지 .childNodes ★★★★★★★★★★★★★★★★★」children ②,childNodes노드가 되어 있습니다. 공백으로 구성되어 있습니다.children을 사용법그게 전부에요.

어느 수집에도 예측할 수 없는 것은 없지만, 몇 가지 주의할 점이 있습니다.

• =은 IE <= 8>에 텍스트노드는 포함하지 않습니다.childNodes 브라우저가 동안
• =8 > 에는 IE <= 8 의 되어 있습니다.children.

children,firstElementChild또, 친구란, 단지 요소에 한정되어 있는 DOM 의 필터링 된 뷰를 나타내는 단순한 편리함입니다.

firstElementChild는 IE <9(firstChild만)에서 사용할 수 없습니다.

MS DOM(IE<9)은 빈 텍스트노드를 저장하지 않기 때문에, IE<9 firstChild는 firstElementChild가 됩니다.그러나 다른 브라우저에서 그렇게 하면 빈 텍스트 노드가 반환됩니다.

나의 해결책

child=(elem.firstElementChild||elem.firstChild)

이것은 IE에서도 첫째 아이를 낳는다.< 9

은 「」를 사용하는 입니다.childNodesNodeList 모든 nodeType 요소_노드

/**
 * 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;
}

http://jsfiddle.net/s4kxnahu/

이것은 lodash 등의 유틸리티 라이브러리를 사용하는 경우 특히 간단합니다.

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

미래:

하시면 됩니다.querySelectorAllpseudo-class(실렉터의 기준점인 요소를 제외):

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

이 기능은 작성 시 Chrome, Firefox 및 Safari에서 지원됩니다.

여기에서는 아직도 할 만한 . , 이 문제를 때 그렇습니다. 특히 다음과 같은 문제를 다룰 때,<svg>★★★★★★★★★★★★★★★★★★.

다 .childNodes ★★★★★★★★★★★★★★★★★」.children델과 함께 일하는 것을 선호해 왔습니다.HTMLCollection에 의해 제공되다.children겟터

오늘 IE/Edge를 사용할 때 장애가 하는 문제가 했습니다..children <svg>. 하는 동안에.children는 IE에서 기본 HTML 요소로 지원되며 문서/문서 조각 또는 SVG 요소에서는 지원되지 않습니다.

같은 수 있었습니다..childNodes[n]걱정할 필요가 없는 텍스트 노드가 없기 때문입니다.당신도 똑같이 할 수 있지만, 위의 다른 곳에서 언급했듯이, 예상치 못한 요소에 부딪힐 수 있다는 것을 잊지 마세요.

를 긁적거리는지 노력하는 ..children는 최신 IE에서 js의 다른 곳에서 동작하며 문서 또는 SVG 요소에서 실패합니다.

흰 공간이 당신을 속이지 않게 하세요.콘솔 브라우저에서 테스트만 하면 됩니다.

네이티브 Javascript를 사용합니다.다음은 같은 클래스의 두 개의 'ul' 세트에 대한 예제입니다.공백 공간을 피하기 위해 'ul' 목록을 한 줄에 모두 표시할 필요는 없습니다. 어레이 수를 사용하여 빈 공간을 건너뜁니다.

querySelector()childNodes[]js fidle 링크:https://jsfiddle.net/aparadise/56njekdo/

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>

언급URL : https://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes