[Javascript] getElement*, querySelector

이대희·2021년 1월 25일
1
post-thumbnail

getElement

document요소에 속하는 getElement 메서드를 사용하여 요소 객체를 가져올수 있다.

◼️ getElementsByTagName(tag) – 주어진 태그에 해당하는 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환합니다. 매개변수 tag에 "*"이 들어가면, '모든 태그’가 검색됩니다.
◼️ getElementsByClassName(className) – class 속성값을 기준으로 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환합니다.
◼️ document.getElementsByName(name) – 아주 드물게 쓰이는 메서드로, 문서 전체를 대상으로 검색을 수행합니다. 검색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션을 반환합니다.

getElementById

document.getElementById는 전달받은 인수를 id 속성의 값으로 가지고 있는 HTML요소 객체를 반환한다.

<div id="elem">Element</div>

<script>
  // 요소 얻기
  let elem = document.getElementById('elem');

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

id='elem' 요소를 변수 elem에 저장하여 배경색을 바꾼다.

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 변수 elem은 id가 'elem'인 요소를 참조한다.
  elem.style.background = 'red';
</script>

document.getElementById을 쓰지 않고 요소를 참조하여 쓸 수 있다.

getElementsByTagName

// 문서 내 모든 div를 얻습니다.
let spans = document.getElementsByTagName('span');

span 을 위에 코드와 같이 가져오면 코드내 모든 span태그를 전부 가져온다. 원하는 span만 가져오려면 span[n]으로 써야 n번째 span태그를 가져온다. 이런식으로 태그를 가져오면 가독성도 떨어지고 복잡해진다. 그래서 이런 메서드를 보편적으로 잘 쓰진 않지만 경우에 따라 쓰는 경우도 있다.

getElementsByClassName, getElementsByName

<form name="my-form">
  <div class="article"></div>
  <div class="long article">내용이 긴 글</div>
</form>

<script>
  // name 속성을 이용해 검색
  let form = document.getElementsByName('my-form')[0];

  // form 내에서 클래스 이름을 이용해 검색
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2. 클래스 속성값이 'article'인 요소는 2개다.
</script>

getElementsByName은 코드 전체에서 name값을 가진 요소를 반환한다.(잘 사용하지 않음)
getElementsByClassName은 코드 class 속성값을 기준으로 요소를 찾고 반환한다.

querySelector, querySelectorAll

querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.
querySelector는 해당하는 요소를 찾으면 검색을 멈춘다. 즉, 첫번째 요소만 반환한다.(uerySelectorAll(css)[0]과 같음)
querySelectorAll은 원하는 요소 전부다 갖고오며 원하는 경우uerySelectorAll(css)[n]으로 가져올 수 있다. querySelectorAll에는 :hover:active 같은 CSS 선택자도 사용할 수 있다. document.querySelectorAll(':hover')을 사용하면 마우스 포인터가 위에 있는(hover 상태인) 요소 모두를 담은 컬렉션이 반환된다.

Case1

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      let jb = document.querySelectorAll( '.abc' );
      jb[1].style.color = 'red';
    </script>
  </body>
</html>

두번째 클래스abc만 빨간색으로 지정한다.

Case2

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      let jb = document.querySelectorAll( '.abc' );
      for ( let i = 0; i < jb.length; i++ ) {
        jb[i].style.color = 'red';
      }
    </script>
  </body>
</html>

abc값을 가진 클래스를 전부를 반복문을 사용하여 빨간색으로 지정한다.

Case3

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="def">Lorem Ipsum Dolor</p>
    <p>Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc, .def' );
      for ( var i = 0; i < jb.length; i++ ) {
        jb[i].style.color = 'red';
      }
    </script>
  </body>
</html>

클래스 값이 abc 또는 def인 요소의 색을 빨간색으로 만듭니다.

getElement보다 querySelector가 더 범용적으로 사용할 수 있기에 더 높은 빈도로 사용된다.

0개의 댓글