생활코딩

Coding Everybody

코스 전체목록

닫기

제어 대상을 찾기

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

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 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. nurunzii
    완료
  2. 완료
  3. var lis = document.querySelectorAll('li');
    var property = "";

    for(var k in lis){
    property += k+'\n';
    }
    console.log(property);

    for(var name in lis){
    lis[name].style.color = 'blue';
    }
    하시면 배열 성분외에 콘솔창에 lis태그의 프로퍼티가 많이 있는걸 볼 수 있습니다
    대화보기
    • 정승옥
      완료
    • 한강
      getElementsByTagName, getElementsByClassName, getElementByID, quarySelector, quarySelectorAll method 잘 배웠습니다. 200625
    • 쑤우
      완료. 감사합니다~
    • var lis = document.querySelectorAll('li');
      for(var name in lis){
      lis[name].style.color = 'blue';
      }
      이부분에서 console.log(name) 순서대로 찍어보면 0,1,2,3,4,5,length 가 나와서 [Uncaught TypeError: Cannot set property] 오류가 발생합니다.
      따라서
      for(var i =0; i < lis.length; i++){
      lis[i].style.color = 'blue';
      }
      이런식으로 쓰는게 맞지 않나요?
    • 오~
    • ㅎㅅㅁ
      200203 다시시작
    • 2019-10-13 9:20pm 완료
    • 정홍
      완료
    • 류석현
      오늘도 수강완료~
    • 류석현
      오늘도 수강완료~
    • 미완성
      20190109
    • JuicyFresh
      감사합니다. 그리고 답글들로 궁금증을 해소해주신 많은 분들 함께 감사합니다.
    • SlowStarter
      감사합니다!
    • 생선과고양이
      20180424 감사합니다
    • 코딩잘하고싶어요 ㅎ
      18-03-04 수강완료
    • An TaeHyeon
      18-01-24 수강완료!
      강의록 공유합니다 :)
      https://goo.gl/XjZDBs
    • GoldPenguin
      감사합니다.
    • 박인호
      12-27
      수강완료.
      DOM을 통해 어떤 작업을 하려고 할 때,
      '먼저 제어할 대상을 찾아야하고, 찾은 대상에 대해 작업한다.'
      의 두 단계를 거친다.
    • 개발자가 되고싶은 고등학생
      console.log(name)를 했을 때 메시지가 아니라 0,1,2와 같은 인덱스가 출력되냐면, 이것은 배열이 아니라 유사배열이기 때문이다.
    • 신덜덜
      좋은 강의 감사합니다.
    • 수복
      마지막은 조금 헷갈리네용
    • 댓글 보면 for in 문이 안되는데요...
      var lis = document.getElementsByTagName('li)
      의 lis 는 유사배열 객체입니다. 배열이 아니라서 for in 문사용시 0,1,2 뿐만아니라 'length' 같은 프로퍼티도 들어오게 됩니다.
      lis[0]
      lis[1]
      lis['length']

      이런식이지요 그러니 undefined 의 style프로퍼티를 찾을수 없다는 로그가 나오는 것같아요
    • 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! 이거 맘에 드네요!!!!
              • 문상호
                감사합니다!!!
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기