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

6331 단어 JavaScripthtmlDOMCSSCSS

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

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

  • 가져와서 배열에 담는다.
[KOSTA] Spring 기반 Cloud 11일차 - OOP 실습(Class Diagram 분석하기)
java에서 for 순환 삭제 집합 함정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage