js에서 요소를 순회하는 방법

이번에는 js에서 요소 순회를 수행하는 방법과 js에서 요소 순회 시 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

요소 탐색 사양을 지원하는 브라우저에는 IE 9+, Firefox 3.5+, Safari 4+, Chrome 및 Opera 10+가 포함됩니다.

요소 사이의 공백의 경우 IE9 이전에는 문서 노드가 반환되지 않으며 다른 모든 브라우저는 문서 노드를 반환합니다.

기존 DOM 표준을 변경하지 않고 브라우저 간의 차이점을 호환하기 위해 Element Traversal 사양이 만들어졌습니다.

이 사양은 요소에 5가지 속성을 추가합니다.

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

자세한 공식 문서는 http://www.w3.org/TR/ElementTraversal/

요소 사이의 공백에 대한 내용입니다. IE9 이전 버전 다른 브라우저는 공백을 텍스트 노드로 반환하지만 텍스트 노드를 반환하지 않습니다. 이로 인해 childNodes 및 firstChild 속성을 사용할 때 일관되지 않은 동작이 발생합니다. DOM 사양을 변경하지 않고 이러한 차이점을 보완하기 위해 W3C 요소 탐색 사양에서는 새로운 속성 집합을 정의합니다.

Element Traversal API는 DOM 요소에 다음 5가지 속성을 추가합니다.

• childElementCount: 하위 요소 수를 반환합니다(텍스트 노드 및 주석 제외).

• firstElementChild: 첫 번째 하위 요소를 가리킵니다.

• lastElementChild: 마지막 하위 요소를 가리킵니다.

• previousElementSibling: 이전 형제 요소를 가리킵니다.

• nextElementSibling: 다음 형제 요소를 가리킵니다.

지원되는 브라우저는 이러한 속성을 DOM 요소에 추가했습니다. 이러한 요소를 사용하면 빈 텍스트 노드에 대해 걱정할 필요가 없으므로 DOM 요소를 매우 편리하게 찾을 수 있습니다.

다음은 예입니다. 과거에는 여러 브라우저에서 요소의 모든 하위 요소를 탐색하려면 다음과 같은 코드를 작성해야 했습니다.

var i,len,child = element.firstChild;
while(child != element.lastChild){
 if(child.nodeType == 1){
  processChild(child);
 }
 child = child.nextSibling;
}

요소 탐색의 새로운 속성을 사용하면 코드가 매우 간결해집니다.

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
 processChild(child);
 child = child.nextElementSibling;
}

믿습니다. 읽었습니다. 이 기사의 경우 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue를 작동하여 프록시를 만드는 방법

v-cloak이 vue에 로드될 때 깜박임을 처리하는 방법

위 내용은 js에서 요소를 순회하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!