JS NodeSelector 살펴보기

평소에 사용하던 NodeSelector 들을 명확하게 정의하고자 합니다.

 

NodeSelector 는 JavaScript 코드에서 DOM에 존재하는 하나이거나 여러개의 Node(Element)를 선택하기 위해 사용하는 method 입니다.

NodeSelector 의 종류로는

- getElementsByClassName()

- getElementById()

- getElementsByName()

- getElementsByTagName()

- querySelector()

- querySelectorAll()

등이 있습니다.

 

getElementsByClassName()

파라미터로 넘긴 String을 전체 Elements의 class를 대상으로 탐색을 실행합니다.

반환값은 HTMLCollection 입니다.

- 파라미터에 찾고싶은 class 명을 넣어 사용할 수 있습니다.

const result = document.getElementsByClassName('.redirect-btn') // <ClassName>

console.log('result: ', result) // Searched elements <HTMLCollection>

 

getElementById()

파라미터로 넘긴 String을 전체 Elements의 식별자를 뜻하는 id를 대상으로 탐색을 실행합니다.

반환값은 Element 입니다.

- 파라미터에 찾고싶은 id 명을 넣어 사용할 수 있습니다.

const result = document.getElementById('#MoveToSearch') // <Id>

console.log('result: ', result) // Searched elements <Element>

 

getElementsByName()

파라미터로 넘긴 String을 전체 Elements의 이름을 뜻하는 name를 대상으로 탐색을 실행합니다.

반환값은 NodeList 입니다.

- 파라미터에 찾고싶은 name 명을 넣어 사용할 수 있습니다.

const result = document.getElementsByName('redirect-link-btn') // <Name>

console.log('result: ', result) // Searched elements <NodeList>

 

getElementsByTagName()

파라미터로 넘긴 String을 전체 Elements의 태그 명을 대상으로 탐색을 실행합니다.

반환값은 HTMLCollection 입니다.

- 파라미터에 찾고싶은 태그 명을 넣어 사용할 수 있습니다.

const result = document.getElementsByTagName('a') // <TagName>

console.log('result: ', result) // Searched elements <NodeList> or <HTMLCollection>

*Webkit 기반의 브라우저에서는 NodeList 타입이 반환됩니다.

*참조: developer.mozilla.org/ko/docs/Web/API/Document/getElementsByTagName

 

querySelector()

파라미터로 넘긴 String 을 전체 Elements을 대상으로 실행은 하되, 첫 번째로 일치하는 Element만 가져옵니다.

이 Method의 파라미터로는 id, class, tagName등을 한꺼번에 조합하여 검색할 수 있습니다.

반환값은 Element 입니다.

const result = document.querySelector('a#MoveToSearch.redirect-link') // <TagName>, <Id>, <Class>

console.log('result: ', result) // Searched element

 

querySelectorAll()

위 querySelector의 역할과 똑같지만, 첫 번째로 일치하는 Element만 가져오지 않고, 해당하는 Element 모두를 가져옵니다.

반환값은 NodeList 입니다.

const result = document.querySelectorAll('a.redirect-link') // <TagName>, <Class>

console.log('result: ', result) // Searched elements <NodeList>

 

위에서 설명된 HTMLCollection들은 ES6의 Array 타입의 내장함수인 map, forEach등을 사용할 수 없는데요

spread 연산자를 통해 쉽게 Array 타입으로 바꾸어 활용할 수 있습니다.

const elements = document.getElementsClassName('test') // HTMLCollection [...]

[...elements].forEach(element => { // Spread operator
	console.log('element: ', element);
}

 

최근 querySelector를 사용하게 되면서 JS nodeSelector들을 정리해 보았습니다.

개인적으로는 그냥 querySelector가 가장 편하고 ById, ByClassName 보다는 #, . 등의 Operator 로 구분하여 코드를 보는것이 직관성에도 더욱 낫다고 생각합니다.

아주 약간의 성능문제가 있다고는 하지만 위에서 말한 이점과 Id, ClassName 중첩 검색 등으로  얻는 이점이 더 많다고 생각합니다.

 

 

 

피드백은 언제나 환영합니다!