노드 취득
지난 포스트에서 DOM과 노드의 개념에 대해 다뤘습니다. 이번 포스트에서는 노드를 다루기 위한 첫 번째 걸음인 노드 취득에 대해서 알아보겠습니다.
노드 취득은 노드를 조작하기 위해 문서 트리에서 특정 노드를 선택하는 것을 의미합니다. 마치 CSS의 셀렉터처럼 조작할 노드를 고릅니다.
그럼 노드를 취득하는 방법들을 알아보도록 하겠습니다.
id
첫 번째 방법은 id를 통해 노드를 취득하는 것입니다. id라는 것은 html 속성 id를 의미합니다. id로 노드는 다음과 같이 취득합니다.
document.getElementById(id);태그명
html 태그명으로 노드를 취득하는 방법입니다. 이전의 id는 html에서 한 번만 올 수 있기 때문에 단 하나의 노드를 취득하는데 사용되었다면, 태그명은 문서의 모든 태그를 취득할 때 사용합니다. 또한 태그가 문서내에 여러개 존재할 경우 모든 태그를 취득하므로, 취득값이 리스트 형태가 될 수 있다는 점도 주의해야합니다.
document.getElementsByTagName(tagName);조금 전에 취득값이 여러개면 리스트 형태로 반환된다고 했었는데 더 정확하게는 HTMLCollection이라는 객체의 형태입니다. 이 객체를 조작하기 위한 프로퍼티와 메소드는 다음과 같습니다.
class
class를 가지고 노드를 취득합니다. html 문서 노드를 의미하므로, 자바스크립트의 클래스가 아닌 html 속성 class를 의미합니다.
class 노드 취득은 아래와 같이 하는데, 클래스 생성 키워드인 class와 혼용을 피하고자 ClassName이라는 단어를 사용합니다.
document.getElementByClassName(class);class도 하나의 문서에서 여러개가 존재할 수 있기 때문에 역시 HTMLCollection객체로 반환 될 수 있습니다.
name
<form>태그에서는 폼을 구분하기위해 name속성을 달을 수 있었는데요. 그 name속성으로 노드를 취득하는 방식입니다.
document.getElemntsByName(name);name은 id처럼 유일한 이름을 갖습니다. 하지만 id가 일반적으로 더 편한 방법이라서 라디오 버튼, 체크박스 같은 폼 처럼 하나의 name아래 서로 다른 값(value)을 가지는 요소에서 노드를 취득할 때 사용합니다.
querySelecter, querySelecterAll
querySelecter는 이전 방법들과 다르게, 셀렉터 식으로 조건을 걸어서 노드를 검색하고 취득하는 방식입니다. 이 방식은 구체적인 검색을 통해 노드를 취득할 수 있다는 장점이 있지만, 처리 속도가 느린편이라, getElementBy 방식이 더 많이 사용됩니다.
querySelecter는 다음과 같이 사용합니다.
document.querySelector(selector);
document.querySelectorAll(selector);querySelecter는 셀렉터 식과 가장 먼저 일치하는 요소 한 가지만 반환합니다. 트리 구조이므로 탐색시 상단부터 검색을 시작합니다.
querySelecterAll은 일치하는 모든 요소들을 집합(NodeList)의 형태로 반환합니다.
셀렉터 식들은 셀렉터를 적듯이 적으면 됩니다. 셀렉터에 대한 내용은 아래 포스트들을 참조해주세요.
HTMLCollection과 NodeList의 주의점
여러 노드값을 취득할 때 반환되는 객체인 HTMLCollection과 NodeList에는 주의할 점이있습니다. 이 객체들은 살아있는상태를 갖습니다. 살아있다라는 것은 문서가 변경되면 취득한 노드의 값도 실시간으로 변경되는 것을 의미합니다.
그래서 노드를 다룰 때, 이들은 살아있는 상태임을 반드시 기억하고 활용해야합니다.
단, querySelectorAll같은 경우 NodeList객체 형태로 반환합니다. 그러나 querySelectorAll는 노드를 복사해서 객체로 변환하기 때문에 살아있는 상태가 아니라는 점을 주의해야합니다.
