알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

DOM 제어대상 찾기 본문

Web /웹브라우저 객체 API

DOM 제어대상 찾기

백곳 2017. 8. 21. 22:07

DOM[Document Object Model]


Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. window 객체의 document 프로퍼티를 통해서 사용할 수 있다. Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.


가상 쉽게 접근성이 높은 방법부터 예제를 들겠습니다.


document.getElementsByTagName


문서에서 태그를 찾을수 있는 객체 함수 입니다. 


일반적으로 DOM 객체는 document 을 통해 접근합니다. 


test.html

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>


크롬 개발자 도구 콘솔(단축키 F12)

var a = document.getElementsByTagName('li')

a[0].innerText

"HTML"

a[1].innerText

"CSS"

a[2].innerText

"JavaScript"


위와 같이 함수를 통해 배열로 리턴 받는다는 것을 알수 있습니다.  리스트는 NodeList와 유사 배열한 배열 입니다. 


좀더 응용하여 javascript 를 사용하여 글자색을 빨갛게 만들겠습니다. 


test.html

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

<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


test.html

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


test.html

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

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

JQuery 로 찾기

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $( document ).ready(function( $ ) {
      $('body').prepend('<h1>Hello world</h1>');
    });
    </script>
</body>
</html>


html 이 두 준비가 될때 이벤트 함수를 설정해 놓은 부분이다. body 태그를 찾아서 <h1>Hello world</h1> 을 추가 하라는 내용이다. 

더많은 Jquery 제어대상 찾기는 JQuery 선택자 강의를 봐주시기 바랍니다. 


'Web > 웹브라우저 객체 API' 카테고리의 다른 글

HTMLCollection  (0) 2017.08.30
HTMLElement  (0) 2017.08.30
[javascript] 창제어  (0) 2017.08.19
[DOM,BOM,javascript] 객체 제어 하기  (0) 2017.08.19
[javascript] alert,confirm,prompt 사용하기  (0) 2017.08.19
공유하기 링크
'Web /웹브라우저 객체 API' Related Articles more
Comments