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