요약: DOM 접근 메소드

이용할 수 있는 메소드는 무엇이 있을까요?

다음과 같은 메소드를 이용하여 웹 페이지에서 특정 요소를 찾을 수 있는 방법을 살펴보았습니다:

메소드는 무엇을 반환할까요?

단일 Element 객체를 반환하는 메소드는 getElementById와 querySelector 두 가지가 있습니다.

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Math is cool";

메소드 getElementsByClassName 와 getElementsByTagName은 배열처럼 동작하는 HTMLCollection 객체를 반환합니다. 태그 이름이나 클래스 이름을 갖는 추가적인 요소가 문서에 추가되면 콜렉션(collection)이 갱신되어 해당 콜렉션이 "살아있다"라고 합니다.

var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) { 
console.log(teamMembers[i].innerHTML);
}

querySelectorAll() 메소드는 마찬가지로 배열처럼 작동하는 NodeList을 반환합니다. 이 리스트는 "static" 합니다. static 이란 대응되는 새로운 요소가 페이지에 추가되더라도 리스트가 갱신되지 않는다는 뜻입니다. 이 메소드를 쓰면서 두 데이터형 간 차이를 몰라도 큰일 나지는 않았는지만 알고 있어야 합니다.

var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}

서브쿼리를 이용해서 접근하기

일단 요소를 찾으면 다음에서 보는 것처럼 메소드를 이용하여 요소에 대해 서브쿼리를 보낼 수 있습니다.

// 특정 ID를 갖는 요소를 찾습니다
var salsMotto = document.getElementById("salsMotto");
// 해당 요소 내에서 span 을 찾습니다
var mottoWords = salsMotto.getElementsByTagName("span");
// 얼마나 많이 있는지를 출력합니다
console.log(mottoWords.length);

DOM 순회하기

요소에 접근하는 또 다른 방법은 DOM 트리를 "순회하는" 것입니다. 각 요소는 관련된 요소를 가르키는 프로퍼티를 갖습니다.

firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount

예를 들어 봅시다:

var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
   console.log(salsMotto.childNodes[i]);
}

이 속성들은 Element 노드에서만 이용할 수 있고 Text 노드에서는 이용할 수 없습니다. 확실하게 요소를 순회하기 위해서는 nodeType/nodeValue 프로퍼티를 확인할 수 있습니다. 아마 DOM 순회를 사용할 필요가 없거나 사용하고 싶지 않겠지만, 단지 선택 사항 중 하나입니다.

대화에 참여하고 싶으신가요?

로그인

정렬 기준:

포스트가 아직 없습니다.

영어를 잘 하시나요? 그렇다면, 이곳을 클릭하여 미국 칸아카데미에서 어떠한 토론이 진행되고 있는지 둘러 보세요.