Element Traversal은 요소 순회를 세부적으로 구현합니다.

이번에는 요소 순회를 구현하기 위한 요소 순회에 대한 자세한 설명을 가져오겠습니다. 요소 순회를 구현하기 위한 주의 사항은 무엇입니까?

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

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

이 사양은 5개의

속성

childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

을 추가합니다. 요소 사이의 공백의 경우 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;
}

지원되는 요소 탐색 표준 브라우저는 IE9+, Firfox3.5+, Safari4+, Chrome 및 Opera10+입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

React에서 diff 알고리즘을 구현하는 방법

Vue는 양방향 데이터 바인딩 기능을 구현합니다(코드 포함)

위 내용은 Element Traversal은 요소 순회를 세부적으로 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!