javascript-DOM이란

DOM

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다.

document.getElementsByTagName

예제)

<ul>

<li> html</li>

<li> html</li>

<li> html</li>

</ul>

<script>

   var lis= document.getElementsByTagName('li');

    for(var i =0; lis.length; i++){

      lis[i].style.color='red';

}

</script>

document.getElementsByClassName

예제)

<li class="active">css</li>

<script>

 var lis = document.getElementsByClassName('active');

</script>

document.getElementById

예제)

<li id="active">css</li>

<script>

 var lis = document.getElementsById('active'); -id는 반드시 하나만 되어야함

lis.style.color='red';   배열이 아님

</script>

document.querySelector

예제)

<ul>

<li> html</li>

<li> html</li>

<li> html</li>

</ul>

<ol>

<li> html</li>

<li class="active"> html</li>

<li> html</li>

</ol>

<script>

  var li = document.querySelector('li');

   li.style.color ='red';

   var li=document.querySelector('.active');  - class="active"

   li. style.color='blue';

   var lis =document.querySelectorAll('li');

   for (var name in lis){

               lis[name].style.color='blue';

     }

</script>

라이브러리- 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다,

jquery - DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다.

<script>

jQuery(document).ready(function($){

$('body').prepend('<h1>hello</h1>'); -body태그 뒤에 hello를 나타낸다.

});

</script>

jquery를 이용해서 객체를 조회하는 방법에 대해서 설명

$('li').css('color','red');

$()는 jquery의 함수이다. 이 함수의 인자로 많이 사용되는것은 css 선택자를 전달하면 jquery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. css는 선택자에 해당하는 객체들의 style에 color:red로 변경된다.

<li>  -> <li style="color:red">

jquery 사용 예제1

DOM형식

var lis =document.getElementsByTagName('li');

for(var i=0; i<lis.length; i++){

     lis[i].style.color ='red';

}

jQuery

$('li').css('color'.'red)

 

사용 예제 2

DOM형식

var lis =document.getElementsByClassName('active');

for(var i=0; i<lis.length; i++){

     lis[i].style.color ='red';

}

jQuery

$('.active').css('color','red')

사용 예제 3

var li= document.getElementById('active');

li.style.color='red';

li.style.textDecoration='underline';

jQuery

$('#active').css('color','red').css('textDecoration','underline');

jQuery 객체

-조회하기

var li=$('li');

li[0] -첫번째 li 가져온다. 유사배열!! 

.map() -jquery메서드 순회하면서 정보를 얻어내거나 어떠한 작업을 처리할때

<li>html</li>

<li>html</li>

<li>html</li>

<script>

    var li= $('li');

    li.map(function(index, elem){

       console.log(index, elem);

     $(elem).css('color','red');

})

</script>

jQuery 객체 API

제어할 대상을 선택한 후에는 대상에 대한 연상을 해야한다. .CSS등 jQuery객체가 가지고 있는 메소드 중의 하나인데, jQuery는 그 외에도 많은 API를 제공하고 있다.