DOM 순회
ID, 요소 유형, 클래스 이름을 기반으로 요소를 찾는 것은 매우 유용하지만 DOM 트리에서의 위치를 기반으로 요소를 찾고 싶다면 어떻게 해야 할까요? 즉, 주어진 요소가 있고 해당 요소의 상위, 하위 요소 중 하나, 이전 또는 다음 노드 형제를 찾고 싶습니다. 예를 들어 다음과 같은 단편적인 HTML 코드를 살펴보겠습니다.
목록 1: HTML 조각(테이블)
<테이블>
<머리>
<tr>
<th>이름</th>
<th>이메일 주소</th>
<th>작업</th>
</tr>
</thead>
<본체>
<tr id="행-001">
<td>조 레논</td>
<td>[email protected]</td>
<td><a href="#">수정</a>
<a href="#">삭제</a></td>
</tr>
<tr id="행-002">
<td>질 맥 스위니</td>
<td>[email protected]</td>
<td><a href="#">수정</a>
<a href="#">삭제</a></td>
</tr>
</tbody>
</table>
목록 1에서는 들여쓰기를 사용하여 DOM 트리의 각 요소 노드 위치를 나타냅니다. 이 예에서 table 요소는 루트 요소이며 두 개의 하위 노드인 thead와 tbody를 갖습니다. thead 요소에는 tr 하위 노드가 있고 tr에는 세 개의 하위 노드(모두 th 요소)가 있습니다. tbody 요소에는 두 개의 tr 하위 노드가 있고 각 tr 노드에는 세 개의 하위 노드가 있습니다. 위 각 줄의 세 번째 노드에는 하위 노드가 포함되어 있으며 둘 다 두 개의 링크 태그입니다.
아시다시피 JavaScript 프레임워크 의 선택 기능을 사용하면 ID별로 요소를 쉽게 선택할 수 있습니다. 이 예에는 ID가 있는 두 개의 요소가 있는데, 이는 ID가 row-001 및 row-002인 tr 요소입니다. Prototype 라이브러리를 사용하여 첫 번째 tr을 선택하려면 다음 코드를 사용할 수 있습니다.
var theRow = $('행-001');
이전 장에서는 유형이나 클래스에 따라 요소를 검색하기 위해 선택기를 사용하는 방법도 배웠습니다. 이 예에서는 다음 구문을 사용하여 모든 td 요소를 가져올 수 있습니다.
var allCells = $$('td');
코드 변경의 주요 문제점은 모든 td 요소를 반환한다는 것입니다. 하지만 ID가 row-001인 tr의 모든 td 요소를 가져오려면 어떻게 해야 할까요? DOM 순회 기능이 작동하는 곳입니다. 먼저, 프로토타입을 사용하여 ID가 row-001인 tr의 모든 하위 항목을 선택해 보겠습니다.
var firstRowCells = theRow.childElements();
그러면 theRow 변수(처음에 ID row-001로 설정한 tr)의 모든 하위 요소 배열이 반환됩니다.
다음으로, 행의 첫 번째 하위 요소만 가져오려고 한다고 가정해 보겠습니다. 이 경우에는 "Joe Lennon"이라는 텍스트가 포함된 td 요소입니다. 이렇게 하려면 다음 명령문을 사용하십시오.
var firstRowFirstCell = theRow.down();
정말 간단해요! 이 특정 사용법은 다음과 같습니다.
var firstRowFirstCell = theRow.childElements()[0];
다음과 같이 표현할 수도 있습니다.
var firstRowFirstCell = theRow.down(0);
JavaScript 인덱스는 0부터 시작하므로 위 명령문은 기본적으로 JavaScript에 첫 번째 하위 요소를 선택하도록 지시합니다. 두 번째 하위 요소(이메일 주소 [email protected] 가 포함된 셀)를 선택하려면 다음을 사용합니다.
var firstRowSecondCell = theRow.down(1);
또는 형제 노드 간에 DOM을 찾아볼 수 있습니다. 이 예에서 두 번째 셀은 첫 번째 셀의 다음 형제입니다. 따라서 다음 문을 사용할 수 있습니다.
var firstRowSecondCell = firstRowFirstCell.next();
down() 함수가 작동하는 것처럼 세 번째 셀을 선택하는 것도 이와 같이 사용할 수 있습니다.
var firstRowThirdCell = firstRowFirstCell.next(1);
특정 노드를 찾기 위해 인덱스를 사용하는 것 외에도 프로토타입 라이브러리는 CSS 선택기 구문을 사용할 수도 있습니다. 목록 1에서는 Jill Mac Sweeney의 세부정보가 포함된 두 번째 링크("제거" 링크)를 찾고 있습니다.
var secondRowSecondLink = $('row-002').down('a', 1);
이 예에서는 $ 함수를 사용하여 ID가 row-002인 행을 찾고 두 번째 하위 항목인 요소(앵커)까지 탐색합니다.
일부 프레임워크에서는 "데이지 체인" 순회 기능도 허용합니다. 이는 순회 명령을 서로 연결할 수 있음을 의미합니다. 위의 예에서 Prototype 라이브러리의 또 다른 표현은 다음과 같습니다.
var secondRowSecondLink = $('row-002').down('a').next();
다음 예를 살펴보십시오.
var domTraversal = $('row-001').down().up().next().previous();
보시다시피 데이지 체인을 사용하면 여러 DOM 순회 문을 연결할 수 있습니다. 실제로 위의 예에서는 실제로 ID 행이 001인 tr 요소를 선택하게 되므로 데이지 체인이 시작된 위치로 돌아갑니다.
재인쇄 주소: http://www.denisdeng.com/?p=708
원래 주소: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html