[Javascript] 노드 취득

2021.03.23 - [Programming/Javascript] - [Javascript] 문서 객체 모델 DOM

 

지난 포스트에서 문서 트리를 구성하는 요소, 속성, 텍스트 등을 노드라고 했었습니다. 이 노드들을 자바스크립트에서 이용하기 위해서는 취득을 해서 다뤄야 하기때문에 노드를 취득하는 법을 다룰려고 합니다. 

---

1. ID를 가지고 노드 취득

노드를 취득하는 방법 중 하나는 ID를 이용하는 것 입니다. 이 id를 통해 노드를 취득하는 방법은 다음과 같습니다.

document.getElementById(id);

 

 

 

2. 태그명으로 노드 취득

이번 방법은 html의 태그명으로 노드를 취득하는 방법입니다. id는 문서에서 한 번만 존재할 수 있는 점과 다르게 태그는 한 문서에서 여러번 올 수 있습니다. 그러므로 태그명으로 노드를 취득할 때의 반환값은 값들의 집합(리스트)이 될 수 있다는 점에 주의해야 합니다.

document.getElementsByTagName(tagName);

 

위에서 태그명 노드 취득의 반환은 값들의 집합이라고 했는데, 더 정확하게는 HTMLCollection 객체라고 하는 형태입니다. 그래서 이 객체를 조작하기 위해 몇가지 메소드를 지원하는데 그 메소드들은 다음과 같습니다.

 

멤버	설명
length	반환된 리스트의 길이(요소의 수)를 반환
item(i)	i번째의 노드(요소)를 반환
namedItem(name)	인수로 전달된 id혹은 name의 속성과 일치하는 요소를 반환

 

 

 

3. class를 가지고 노드 취득

2020.09.25 - [Programming/HTML,CSS] - [CSS] 셀렉터 1

[CSS] 셀렉터 1

클래스와 아이디의 차이점은 위 링크의 본문 4번 단락을 참조해주세요.

+위에서 언급했지만 문서 트리 구조는 html로부터 가져오는 것 이기때문에 자바스크립트의 클래스가 아닌 html태그에 부여되는 class 속성을 이야기하는 것 입니다.

 

클래스이름을 가지고 노드를 취득합니다. 위의 링크를 봤다면 차이점을 알겠지만 안보신분들을 위해 간략하게 설명하자면, id는 한 문서에서 id명을 단 한 번만 사용하고, 클래스는 여러 요소에 부여할 수 있다는 차이점만 알고 넘어가겠습니다.

클래스명으로 노드 취득을 하면 클래스는 여러 요소에 존재 할 수 있기 때문에 값들의 집합(리스트)형태로 반환되어 나옵니다. 그래서 위의 태그명에서 이용했던 객체의 멤버들을 이용하여 접근할 수 있습니다.

document.getElementByClassName(class);

멤버	설명
length	반환된 리스트의 길이(요소의 수)를 반환
item(i)	i번째의 노드(요소)를 반환
namedItem(name)	인수로 전달된 id혹은 name의 속성과 일치하는 요소를 반환

 

 

4. name속성으로 노드 취득

name속성을 주로 <form>이하의 폼관련 태그들에서 등장합니다. (폼태그란 사용자로 부터 정보를 입력받을 수 있는 것들) 물론 하나의 속성을 취득하는데 있어서는 id속성이 더 편하기에 이 name속성 이용법은 주로 라디오 버튼과 체크박스 같이 하나의 name아래 여러 다른 value를 지닌 요소에서 노드를 취득할 때 이용하게됩니다.

document.getElemntsByName(name);

 

 

 

 

5. 셀렉터 식으로 노드 취득

셀렉터 식 취득법은 이전의 취득방법에 비해 다소 복잡한 조건을 걸어서 검색하고 취득하는 방법입니다. 이 쿼리방법은 기존의 방식에 비해 좀 더 자세하게 검색할 수 있다는 점이 있지만 속도가 느린편이라 가능한 getElementBy방식이 추천됩니다.

우선 이 방법에 대한 기본적인 사용방법은 다음과 같습니다.

document.querySelector(selector);
document.querySelectorAll(selector);

querySelector는 인수로 지정된 셀렉터 식과 일치하는 가장 첫 번째 결과 한 가지만 반환합니다. 그리고 SelectorAll은 셀렉터 식과 일치하는 값들을 집합으로 반환합니다.

 

셀렉터 식들이 굉장히 많기에 이 포스트에서 정리하면 글이 굉장히 길어져 셀렉터를 정리해뒀던 포스트링크를 걸었습니다.

2020.09.26 - [Programming/HTML,CSS] - [CSS] 셀렉터 2 - 연결 셀렉터

2020.09.27 - [Programming/HTML,CSS] - [CSS] 셀렉터 3 - 속성 셀렉터

 

 

 

 

6. HTMLCollection과 NodeList 반환값의 주의할 점

getElementByTagName, Name, ClassName은 반환값으로 HTMLCollection과 NodeList 객체를 반환한다고 언급했었습니다. 이 객체들은 살아있다라는 상태를 가지는데, 살아있다 라는것은 문서가 바뀌면 객체의 값도 실시간으로 변경된다는 의미를 가지고 있습니다.

 그래서 이 포스트 이후로 노드를 다루는 메소드들이 등장하는데 위 두 객체를 반환하는 노드들은 살아있다라는 상태를 유념하고 사용하여야합니다.

 

단, 한 가지 마지막으로 소개한 querySelectorAll 방식도 NodeList 객체의 형태로 반환하지만 이때는 노드를 복사해서 객체로 반환하는 방식이기 때문에 querySelectorAll의 NodeList 객체는 살아있다 라는 상태가 아닙니다.

---