getElementById / getElementByClassName

오설탕 2022. 4. 26. 18:47

: Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

getElementById는 HTML 요소를 id 속성을 이용해 찾을 때 사용합니다.

🎈id가 없는 요소에 접근하려면 querySelector 사용

이럴 경우 getElementById 는 맨 처음 발견된 요소만 리턴한다

(문서의 상단에서부터 검색했을 경우 처음 발견된 것)

그렇기 때문에 getElementById를 사용해 요소를 제어하려 한다면 반드시 id값은 중복되면 안된다

주어진 id와 일치하는 dom 요소를 나타내는 Element 객체를 반환하거나,

주어진 id와 일치하는 dom 요소가 없으면 null을 return 합니다

예시

버튼을 누르면 글자가 바뀌는 스크립트

결과

동일한 class명이 존재할 수 있기 때문에

id속성을 이용하는 getElementById 와 다르게 getElementByClassName은 컬렉션 객체를 반환한다따라서 for문을 사용하거나 특정 index에 위치한 element를 반환받아 사용할 수 있다

📌getElementById와의 차이점

같은 클래스의 경우 모두 가지고 온다는 차이점이 있다

가지고 온 객체는 유사배열 형태로 저장되어 활용 할 수 있다

📌주의사항

getElementsByClassName의 경우 배열과 유사한 형태의 HTMLCollection 이라는 리턴하는데, 이는 배열이 아니기 때문에 배열 관련 메서드를 사용할 수 없다는 점에 유의해야 합니다.

또한 getElementsByClassName은 해당 클래스를 가진 요소가 하나 밖에 없어도 HTMLCollection 형태로 결과값을 리턴합니다.

📌유사배열이란, 인덱스를 통해 객체에 접근할 수 있고, length 속성도 가지며 for 반복문을 통해 객체에

접근도 가능한 배열의 형태를 띄는 반면,

배열의 메서드의 일부만 지원하는 완벽히 배열은 아닌 형태이다.

요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는

그 클래스명을 getElementsByClassName()의 인자로 넣는다.

element.getElementsByClassName('test');

아래의 예시는 main 이라는 id 를 가진 요소의 하위 요소들 중 test라는 클래스를 가진 모든 요소를 탐색

document.getElementById('main').getElementsByClassName('test');

red 와 test 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 띄어쓰기를 사용한다

element.getElementsByClassName('red test');