js Element Traversal을 사용하여 요소 순회를 표준화하는 방법

이번에는 js Element Traversal을 사용하여 요소 순회를 표준화하는 방법과 js Element Traversal을 사용하여 요소 순회를 표준화할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

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

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

이 사양은 5개의

속성을 요소

childElementCount

firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

자세한 공식 문서로 추가합니다. http://www.w3.org/TR/ElementTraversal/

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

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

childElementCount: 하위 요소 수를 반환합니다(텍스트 노드 및

comments
• 제외).
  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-cli 프로젝트에서 부트스트랩을 사용하는 방법

Node.Js를 사용하여 비트코인 ​​주소를 생성하는 방법

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