주요 내용
컴퓨터 프로그래밍
코스: 컴퓨터 프로그래밍 > 단원 6
단원 3: DOM 접근 메소드요약: DOM 접근 메소드
이용할 수 있는 메소드는 무엇이 있을까요?
다음과 같은 메소드를 이용하여 웹 페이지에서 특정 요소를 찾을 수 있는 방법을 살펴보았습니다:
메소드는 무엇을 반환할까요?
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 순회를 사용할 필요가 없거나 사용하고 싶지 않겠지만, 단지 선택 사항 중 하나입니다.