웹브라우저 JavaScript

제어 대상을 찾기

제어 대상을 찾는 법을 알아봅니다.

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 

document.getElementsByTagName

문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.

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

만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다. 이러한 원칙은 다른 메소드에도 적용된다.

<!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>

document.getElementsByClassName

class 속성의 값을 기준으로 객체를 조회할수도 있다.

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

document.getElementById

id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
	<li id="active">CSS</li>
	<li>JavaScript</li>
</ul>
<script>
	var li = document.getElementById('active');
	li.style.color='red';
</script>
</body>
</html>

document.querySelector 

css 선택자의 문법을 이용해서 객체를 조회할수도 있다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>
<ol>
	<li>HTML</li>
	<li class="active">CSS</li>
	<li>JavaScript</li>
</ol>

<script>
	var li = document.querySelector('li');
	li.style.color='red';
	var li = document.querySelector('.active');
	li.style.color='blue';
</script>
</body>
</html>

 document.querySelectorAll

querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>
<ol>
	<li>HTML</li>
	<li class="active">CSS</li>
	<li>JavaScript</li>
</ol>

<script>
	var lis = document.querySelectorAll('li');
	for(var name in lis){
		lis[name].style.color = 'blue';
	}
</script>
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. SlowStarter
    감사합니다!
  2. 생선과고양이
    20180424 감사합니다
  3. 코딩잘하고싶어요 ㅎ
    18-03-04 수강완료
  4. An TaeHyeon
    18-01-24 수강완료!
    강의록 공유합니다 :)
    https://goo.gl/XjZDBs
  5. GoldPenguin
    감사합니다.
  6. 박인호
    12-27
    수강완료.
    DOM을 통해 어떤 작업을 하려고 할 때,
    '먼저 제어할 대상을 찾아야하고, 찾은 대상에 대해 작업한다.'
    의 두 단계를 거친다.
  7. 개발자가 되고싶은 고등학생
    console.log(name)를 했을 때 메시지가 아니라 0,1,2와 같은 인덱스가 출력되냐면, 이것은 배열이 아니라 유사배열이기 때문이다.
  8. 신덜덜
    좋은 강의 감사합니다.
  9. 수복
    마지막은 조금 헷갈리네용
  10. 댓글 보면 for in 문이 안되는데요...
    var lis = document.getElementsByTagName('li)
    의 lis 는 유사배열 객체입니다. 배열이 아니라서 for in 문사용시 0,1,2 뿐만아니라 'length' 같은 프로퍼티도 들어오게 됩니다.
    lis[0]
    lis[1]
    lis['length']

    이런식이지요 그러니 undefined 의 style프로퍼티를 찾을수 없다는 로그가 나오는 것같아요
  11. publicum
    에러메시지가 출력돼서 궁금했는데 이유를 이제 알았네요. 감사합니다.
    대화보기
    • Sangmook Kim
      170727 완료
    • crable
      감사합니다
    • managood@naver.com
      for in 에러에 대해 구글링을 해보니 nodelist가 함께 넘어와서 에러가 발생한다고 하는군요.
      어떤 사람이 내놓은 해결책으로 아래와 같이 배열만을 가져와서 for in 으로 실행하는 방법이 있네요.
      nodelist 는 배열이 아니라서 그 값들이 넘어오지 않습니다.

      var lis = Array.from(document.querySelectorAll('li'));
    • Peter
      for in 문에서 에러가 나는 이유를 확인해보려고 console.log(typeof ul[i]) 를 찍어보니 다음과 같이 나왔습니다.

      object
      object
      object
      number
      function
      function
      function
      function
      function

      여기서 object 는 우리가 원하는 li node 인데 for in 문을 돌면서 li node 이외의 것들도 호출이 되는 것 같네요
      그래서 if 문으로 ul[i] 의 type 을 걸러주면 정상적으로 작동합니다.
      아래 코드 전문 추가할게요~

      <!DOCTYPE html>
      <html>
      <head>

      </head>
      <body>
      <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      </ul>
      <ol>
      <li>HTML</li>
      <li class="active">CSS</li>
      <li >JavaScript</li>
      </ol>

      <script>
      var ul= document.querySelectorAll('ul li');
      for(var i in ul){
      if(typeof ul[i] !== 'function' && typeof ul[i] !== 'number'){
      ul[i].style.color= 'red';
      }
      }
      var selected= document.querySelector('.active');
      selected.style.color= 'yellow';
      </script>
      </body>
      </html>
      대화보기
      • Peter
        저도 크롬에서 for in 문이 에러가 발생하네요...
        for in 문 대신에

        for(i=0 ; i<ul.length ; i++){
        ul[i].style.color= 'red';
        }

        이렇게 바꿔버리면 정상적으로 작동하기는 하는데 for in 문에서 왜 에러가 나는 건지는 모르겠네요..ㅠㅠ
        대화보기
        • YoungWoong Ha
          getElementsByTagName only selects elements based on their tag name. querySelectorAll can use any selector which gives it much more flexibility and power, but it is newer and so has weaker browser support.

          getElementsByTagName is probably faster, since it is simpler, but that is unlikely to have a noticeable impact on anything you do with it.

          자문자답합니다 ㅋ
        • YoungWoong Ha
          쿼리셀렉터올이랑 겟엘리먼츠바이태그네임은 뭐가 다른건가요? 둘중하나만 써도 될거 같은데..
        • matheios
          강의 감사합니다.
        • Gyu Min Sim
          네 감사합니다! 코드 전체입니다.
          (수업 예제 코드를 복사해서 script 부분만 바꿨습니다.)

          <!DOCTYPE html>
          <html>
          <body>
          <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          </ul>
          <ol>
          <li>HTML</li>
          <li class="active">CSS</li>
          <li>JavaScript</li>
          </ol>

          <script type="text/javascript">
          var ul= document.querySelectorAll('ul li');

          for(var i in ul){
          ul[i].style.color= 'red';
          }

          var selected= document.querySelector('li.active');
          selected.style.color= 'yellow';
          </script>

          </body>
          </html>
          대화보기
          • ㅊㅊ
            윗쪽에 있는 html부분도 같이 올려주시면 더 도움될것 같습니다.
            대화보기
            • Gyu Min Sim
              좋은 강의 감사합니다. 질문이 생겨서 여쭤보고자 합니다.
              querySelector, querySelectorAll에서 script 이하 부분은 동일하고 script tag 부분만 이렇게 적었습니다.

              <script type="text/javascript">
              var ul= document.querySelectorAll('ul li');

              for(var i in ul){ ul[i].style.color= 'red'; }

              var selected= document.querySelector('li.active');
              selected.style.color= 'yellow';
              </script>

              그런데 selected 변수에 yellow를 주는 함수가 실행이 안됩니다.
              (querySelector 안의 선택자를 .active나 다른방식으로 써봐도 마찬가지였습니다.)
              웹브라우저는 Edge를 쓰는데, 개발자도구에서 SCRIPT5007: Unable to set property 'color' of undefined or null reference라고 뜨네요. 에러가 난 부분은 for ~ in ~ 문의 {}에서 나왔다고 했습니다.
              왜 그럴까요..? 고수 분들 도와주시면 감사하겠습니다.
            • 폴고
              정말 좋은 강의 감사합니다
            • 유유
              감사합니다.
            • hoho
              감사합니다~
            • 조병령
              감사합니다.
            • hyuna
              감사합니다.

              관계없는 질문인데요.. 아톰 에디터에서요..
              모든 설정을 기본값으로 하는 메뉴가 있을까요?
              자꾸만..아래에 key binding Resolver: ~~이하로 지저분한게 달려서요...안보이게 하고 싶은데.. 잘모르겠어요.
            • tachyon
              감사합니다
            • Banbok
              id값으로 접근하느냐 배열값으로 접근하느냐 그 차이겠네요. 수업 감사합니다!
            • yihsang
              "제일 우선적인 작업은 제어대상을 찾는 것"
              감사합니다.
            • JustStudy
              2017.07.08 금
              고맙습니다 3.
            • JustStudy
              2016, 06, 30
              고맙습니다 2.
            • interimlife
              혹시나해서 아무생각없이
              var lis = document.querySelectorAll('ol li');
              로 해보았습니다.......querySelectorAll! 이거 맘에 드네요!!!!
            • 문상호
              감사합니다!!!
            • 이주환
              2016. 04. 27
              잘보고갑니다~!
              DOM 핸들링을 위해서는 제일 필요한 기초라 할수있지요.
            • JustStudy
              고맙습니다.
              정말 최고의 강의입니다.
            • west849@naver.com
              ㅇㅈ
              대화보기
              • 감사합니다
                정말 감사합니다........ 구원받고 있습니다
              • 자바스크립트 초보입니다만 아는데로 설명해 보겠습니다...
                "상속"의 문제 인것 같습니다.
                getElementsByClassName은 새로 생성된 변수에게 상속이 되는 매소드이지만,
                getElemantById는 상속이 안되는 거로 보입니다.

                이 두 메소드는 원래 document 객체의 매소드들이지만 id라는 속성은 이 document에서 고유하게 사용이 되기때문에 굳히 이 안에서 생긴 객체에게 상속을 안시키게 만든것 같습니다. 그래서 var lis = ul.getElementById()는 실행 시킬수가 없습니다...

                위의 이고잉님의 두번째 예제에서의 var lis = ul.getElementsByTagName('li'); 는 고유한 id를 찾는것이 아니고 전반적인 Tag를 찾는것이라 새로 생성된 ul 객체에서 실행 시킬수 있게 이 메소드를 상속시킨것으로 보이네요..

                자바스크립트의 상속에 관한 강의를 보시면 좀더 이해 될것 같습니다...
                대화보기
                • arachi
                  다시보니 이해가 너무 잘됩니다. 감사합니다~
                • SK Kim
                  for(var key in array)
                  for(var key = 0; key < array.length; key++)
                  위 반복문은 좀 다른거 같네요, 밑의 경우 에러가 ...if 문을 추가하면 해결은 되는데..
                • 취업3일차
                  자바스크립트로 어떤 태그에 색을 바꿔준다는 것이 css수정이 아닌 태스내 style요소를 바꿔주기 때문에 요소검사에서는 그렇게 보일것입니다 ㅎㅎ
                • 동그라미
                  빠밤님.
                  https://opentutorials.org......681
                  여기 보니까
                  엘리먼트의 하위 엘리먼트를 조회하는 API는

                  Element.getElementsByClassName
                  Element.getElementsByTagName
                  Element.querySelector
                  Element.querySelectorAll

                  이렇게 4개 밖에 없네요.

                  스크립트 코드를
                  var ull = document.getElementsByTagName('ul')[0];
                  var lis= ull.querySelectorAll('li');
                  for(var i=0; i<lis.length; i++){
                  if(lis[i].id == 'db'){
                  lis[i].style.color='red';
                  break;
                  }
                  }
                  이렇게 고치니까 되긴 되네요.
                • 빠밤
                  좋은 강의 감사합니다.
                  강의 들으면서 예제를 따라해보고 있는데

                  <ul>
                  <li>HTML</li>
                  <li class="active">CSS</li>
                  <li id="db">JavaScript</li>
                  </ul>

                  <ol>
                  <li>HTML</li>
                  <li>CSS</li>
                  <li>JavaScript</li>
                  </ol>

                  var ul=document.getElementsByTagName('ul')[0];
                  var lis=ul.getElementById('db');

                  lis.style.color='red';

                  이거는 왜 안될까요?

                  클래스를 걸면 되는데 말입니다.. (for문 사용)
                • 코딩!
                  객체를 조회하는 방법!

                  감사합니다!
                • jerry
                  좋은강의 감사합니다.
                • 이제와서 이런 질문 드리기 죄송한데, Sublime에서 작성한 내용이 구글 요소검사에서는 다르게 출력되는 이유가 궁금합니다.
                  섭라임에서는 단지 코드를 간결하게 해주는 역할이고 웹브라우져에서는 이 코드를 다시 풀어서 해석하나요??
                  예제1번에서 섭라임같은경우 for문을 이용하여 색을 입혀줬는데 크롬 요소검사로 확인해보면 각각 스타일 컬러로 입혀져 있어서 질문드립니다.
                • egoing
                  이제야 발견했네요. 수정했습니다. 알려주셔서 감사해요~
                  대화보기
                  • egoing
                    이름은 그냥 관습적인 것이고요. 정확한 것은 출력해보시면 알 수 있어요.
                    대화보기
                    • Anna Kim
                      첫번째와 두번째 스크립트예제에서
                      for(var i=0; lis.length; i++) 가 for(var i=0; i < lis.length; i++)로 수정되야 맞네요.
                      영상에서 선생님께서 실수하셨다고 언급하시고 고쳐주셨네요 ^^
                      대화보기
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기