웹브라우저 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. Sangmook Kim
    170727 완료
  2. crable
    감사합니다
  3. managood@naver.com
    for in 에러에 대해 구글링을 해보니 nodelist가 함께 넘어와서 에러가 발생한다고 하는군요.
    어떤 사람이 내놓은 해결책으로 아래와 같이 배열만을 가져와서 for in 으로 실행하는 방법이 있네요.
    nodelist 는 배열이 아니라서 그 값들이 넘어오지 않습니다.

    var lis = Array.from(document.querySelectorAll('li'));
  4. 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>
    대화보기
    • 저도 크롬에서 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 ~ 문의 {}에서 나왔다고 했습니다.
            왜 그럴까요..? 고수 분들 도와주시면 감사하겠습니다.
          • 폴고
            정말 좋은 강의 감사합니다
          • 유유
            감사합니다.
          • 감사합니다~
          • 조병령
            감사합니다.
          • 감사합니다.

            관계없는 질문인데요.. 아톰 에디터에서요..
            모든 설정을 기본값으로 하는 메뉴가 있을까요?
            자꾸만..아래에 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++)로 수정되야 맞네요.
                    영상에서 선생님께서 실수하셨다고 언급하시고 고쳐주셨네요 ^^
                    대화보기
                    • 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];
                                  대화보기
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기