DOM | QuerySelector, getElementsByClassName 등.. (HTML에서 제어 대상 찾기)

Ryan·2020년 10월 17일

DOM

목록 보기

1/3

1. getElementsByTagName

: 문서 전체에서 해당 태그이름에 있는 엘리먼트들을 반환해주는 메서드

document.getElementsByTagName('태그명')

: 해당 태그명을 가진 모든 태그들을 반환하기 때문에 그중 일부를 가져오는 방법이 필요하다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    var lis = ul.getElementsByTagName('li');
    for(var i=0; lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

위의 태그를 통해 ul안에 있는 li만 가져온다.

2. getElementsByClassName

: 클래스 이름으로 가져온다.
s 가 붙어있는 그 의미처럼 동일한 클래스 이름을 가진 모든 클래스를 다 가져온다.

3. getElementByID

: ID 값으로 가져온다.

ID로는 단 한개만 부여할 수 있기 때문에 유니크한 대상이다.
성능은 가장 우수하다.

4. QuerySelector

: CSS 선택자를 이용해서 가져온다.

const a = document.querySelector('.class')
const b = document.querySelector('#idName')
const c = document.querySelector('div')

클래스, ID, 태그 등등 모든 성질을 전부 가져올 수 있다.
그 구분('.', '#')만 잘 해주면 된다.

5. QuerySelectorAll

: 위의 셀렉터와 동일 하지만 한개가 아닌 모든 것을 가져온다.

가져와서 배열에 담는다.

Ryan

"꾸준한 삽질과 우연한 성공"

다음 포스트