웹브라우저 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. 유유
    감사합니다.
  2. hoho
    감사합니다~
  3. 조병령
    감사합니다.
  4. 감사합니다.

    관계없는 질문인데요.. 아톰 에디터에서요..
    모든 설정을 기본값으로 하는 메뉴가 있을까요?
    자꾸만..아래에 key binding Resolver: ~~이하로 지저분한게 달려서요...안보이게 하고 싶은데.. 잘모르겠어요.
  5. tachyon
    감사합니다
  6. Banbok
    id값으로 접근하느냐 배열값으로 접근하느냐 그 차이겠네요. 수업 감사합니다!
  7. yihsang
    "제일 우선적인 작업은 제어대상을 찾는 것"
    감사합니다.
  8. JustStudy
    2017.07.08 금
    고맙습니다 3.
  9. JustStudy
    2016, 06, 30
    고맙습니다 2.
  10. interimlife
    혹시나해서 아무생각없이
    var lis = document.querySelectorAll('ol li');
    로 해보았습니다.......querySelectorAll! 이거 맘에 드네요!!!!
  11. 문상호
    감사합니다!!!
  12. 이주환
    2016. 04. 27
    잘보고갑니다~!
    DOM 핸들링을 위해서는 제일 필요한 기초라 할수있지요.
  13. JustStudy
    고맙습니다.
    정말 최고의 강의입니다.
  14. 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++)로 수정되야 맞네요.
            영상에서 선생님께서 실수하셨다고 언급하시고 고쳐주셨네요 ^^
            대화보기
            • Anna Kim
              저도 궁금했는데 여기 답이 있었네요. 그렇다면 복수형으로 표시된 getElements가 들어가는것들은 모두 배열이 가능하다라고 보면 되나요? 그리고 querySelectorAll 은 배열이 될수가 없나요? 문맥에 따라 다를것같긴 한데...제 생각엔 모든메소드가 배열이 될수 있을거 같은데 맞나요?

              차근차근 쉬운설명 정말 감사합니다.
              대화보기
              • 잉미남
                안녕하세요. 이고잉님^^;
                강의 잘듣고 있습니다. 너무 좋은 강의 해주셔서 감사드립니다.

                해당 토픽의 1번 동영상아래 있는 2개의 예제에 대한 내용 입니다.
                document.getElementsByTagName 아래 있는 예제 이구요
                예제 전체를 그대로 복사해서 실행하면

                // 첫번째 예제의 스크립트
                <script>
                var lis = document.getElementsByTagName('li');
                for(var i=0; lis.length; i++){
                lis[i].style.color='red';
                }

                // 두번째 예제의 스크립트
                <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>


                lis[i].style.color='red'; 구문에서

                Uncaught TypeError: Cannot read property 'style' of undefineddocument.html:18 (anonymous function)
                (크롬)
                SCRIPT5007: 정의되지 않음 또는 null 참조인 'style' 속성을 가져올 수 없습니다. (익스플로러)
                다음과 같은 경고문이 콘솔창을 통해 출력됩니다.

                콘솔창에는 오류메세지가 뜨지만, 웹브라우저에는 정상적으로 출력됩니다.
                브라우저에는 정상 출력되니 문제없는건지 궁금하네요.^^
                대화보기
                • egoing
                  lis가 맞나요? list가 아닌가요?
                  대화보기
                  • 잉미남
                    첫번째, 두번째 예제를 실행시키면 콘솔창에 아래와 같은 오류가 뜹니다.
                    lis[i].style.color='red'; 이 문장 입니다.

                    Uncaught TypeError: Cannot read property 'style' of undefineddocument.html:18 (anonymous function)
                    (크롬)
                    SCRIPT5007: 정의되지 않음 또는 null 참조인 'style' 속성을 가져올 수 없습니다. (익스플로러)

                    둘다 동일하게 프로퍼티'style'을 읽을수 없다는 메시지가 뜨는데 무엇이 문제일까요?
                    궁금합니다~

                    *p.s 브라우저에 원하는 내용이 정상적으로 출력은 됩니다. 콘솔에서만 위와 같은 오류가 뜹니다.
                  • 육점이
                    항상 감사합니다 이번 강의에서도 쉽게 이해하게 해주셔서 많은걸 배워갑니다!!!!!!!!!!!!
                  • daliss
                    document.getElementsByTagName('ul')
                    ---> [ <ul>......</ul>]

                    document.getElementsByTagName('ul')[0]
                    ---> <ul>......</ul>

                    보시다시피 배열을 리턴해요...
                    그래서 <ul>에 접근하기 위해(???) 그 배열안의 첫번째 인덱스의 값을 넣은것 입니다..
                    이런건.. 직접 콘솔 찍어보면 이해하기 쉬어요..
                    대화보기
                    • 초보
                      WhiteDoong : 그냥 첫번째 ul이라는 뜻 아닐까요?
                    • WhiteDoong
                      그런데 getElementsByTagName의 두번째 코드 예제에서 왜

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

                      이 되는지 이해가 잘 안갑니다. 뒤에 있는 [0]이 들어가야만 하는 이유가 있으면 설명 부탁드립니다!
                    • WhiteDoong
                      저도 그걸 모르겠는데요 아시게 되셨으면 저도 좀 알려주세요~
                      대화보기
                      • 하주호
                        the feature of '.style' is related to CSS

                        i think you havent learn CSS3 part.

                        if u use like lis.style.color='red'

                        u can use CSS property using .style
                        대화보기
                        • egoing
                          getElementsByTagName 는 여러개의 엘리먼트를 리턴하는 메소드 입니다. 그렇기 때문에 배열을 리턴하게 되는데요. 그 배열에서 첫번째 인덱스의 값을 가져오기 위해서 저렇게 처리한 것이죠. 아래는 같은 코드입니다.

                          var uls = document.getElementsByTagName('ul');
                          ul = uls[0];
                          대화보기
                          • 심드렁
                            좋은 강의 감사합니다!

                            그런데 getElementsByTagName의 두번째 코드 예제에서 왜

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

                            이 되는지 이해가 잘 안갑니다. 뒤에 있는 [0]이 들어가야만 하는 이유가 있으면 설명 부탁드립니다!
                          • yooin
                            sorry. No korean keyboard installed.
                            I have question about this line.

                            if(lis[name].style) <<<--

                            what does it check by putting ".style" ??
                            대화보기
                            • 창가
                              아래와 같이 하면 되네요!
                              name값으로 "0,1,2,3,4,5,6,length, item" 값이 넘어 와서 나오는 에러 입니다.
                              length와 item을 제외 하고 넣어 주면 될것 같습니다.
                              if(lis[name].style)
                              lis[name].style.color = 'blue';
                              대화보기
                              • 배우미
                                <script>
                                var lis = document.querySelectorAll('li');
                                for(var name in lis){
                                lis[name].style.color='blue';
                                }

                                var li = document.querySelector('.active');
                                li.style.color='red';

                                </script>

                                ---------------------------

                                querySelector와 querySelectorAll을 동시에 썼는데... querySelectorAll 부근에서 lis[name].style.color='blue';에서 에러가 나는데...뭐가 잘못된 건지 모르겠네요...창을 띄우면 모든 li가 파랗게 나오는데...적용은 되면서 undefined 라고 에러가 나고,,,,아래 있는 쿼리설렉터는 적용이 안되네요. 궈리설렉터올을 지워야만 적용됩니다. 뭐가 문제인가요?
                              • 팽맨이러닝
                                배열과 '유사배열'의 차이점이 설명이 안 되어 있네요.
                                모호함이 사라지지가 않네요. ㅠㅜ
                              • gomgom2
                                All이라는 옵션때문에 리턴 값이 배열 아닐까요.
                                그래서 키값으로 처리를 해야 하지 않을까 싶어서 그렇게 코딩한거 같습니다.
                                대화보기
                                • 곧은골
                                  답변 감사합니다.
                                  그렇다면 for(var name in lis)에서 name은 key라고 이해하면 무리가 없는지요?
                                  기존의 지식이 새로운 것을 이해하는데 방해가 되네요. ㅎㅎ
                                  대화보기
                                  • egoing
                                    예 달라요 ^^
                                    Key 값을 주는 방식이죠
                                    대화보기
                                    • 곧은골
                                      안녕하세요.
                                      마지막 예제에서 아래 부분이 잘 이해가 되지 않아 문의드립니다.

                                      for(var name in lis){
                                      lis[name].style.color = 'blue';
                                      }

                                      본인 생각에는 for(var name in lis)하고 하면, lis 콘테이너에 저장된 데이타 자체를 얻어와야 할 거 같은데,
                                      예상과 달리 for문의 내부에서 name은 콘테이너의 key로 사용되는 것으로 보이네요.

                                      본인 생각 : name.style.color = 'blue';
                                      본문 예제 : lis[name].style.color = 'blue';

                                      C++/C#과 개념이 비슷한거 같으면서도 상당히 다르네요.
                                    버전 관리
                                    egoing
                                    현재 버전
                                    선택 버전
                                    graphittie 자세히 보기