DOM

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

제어 대상을 찾기

브라우저가 만든 객체를 찾는 것

*document.getElementsByTagName : 태그의 이름이 li인 객체를 리턴합니다.

ul태그 내에 있는 li에 해당하는 객체를 찾으려면 즉 조회의 대상을 좁히려면

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

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

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

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

    }

*document.getElementsByClassName : className이 ‘active’ 엘리먼트를 조회

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

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

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

    }

*document.getElementById : 하나의 결과만을 조회, id가 ‘active’ 엘리먼트를 조회

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

li.style.color='red';

문서에서 id는 유일무이한 식별자 값이기 때문에 하나의 값이 됩니다.

*document.querySelector : 선택자를 인자로 받아 해당하는 엘리먼트를 리턴

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

li.style.color='red';

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

li.style.color='blue';

jQuery(자바스크립트 라이브러리)

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

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <!--jquery사용법, http://와 같게 동작 -->

<script src=”../lib/jQuery/jquery-1.11.0.min.js”> <!--같은 방법-->

<script>

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

      $('body').prepend('<h1>Hello world</h1>'); // prepend() : 추가하는 메소드

    });

</script>

제어 대상을 찾기(jQuery)

jQuery의 기본 문법은 단순하고 강력합니다.

$() 는 jquery function . 은 엘리먼트를 재어하는 다양한 메소드

Jquery 객체 : jquery function함수를 통해 리턴된 값

Jquery와 dom의 차이

코딩의 길이가 다름, 코드작성이 수월함, 빠르게 처리 가능

클래스명을 줄 때 .을 쓴다.

Id값은 #을 사용, 코드의 중복 사용을 없앨 수 있음(Chaining)

HTMLElement

　

    
HTML
    
CSS
    
JavaScript


　

document.getElementById : 리턴 데이터 타입은 HTMLLIELement, 1개만 리턴

document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection, 복수개를 리턴

링크는 href속성이 있어 href는 주소를 나타냄

Input의 경우 type, value의 속성이 있음

각각의 성격과 쓰임과 스펙에 따라 의미가 다름

　
opentutorials

    
HTML
    
CSS
    
JavaScript



　

모든 엘리먼트는 HTMLElement의 자식입니다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있습니다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라집니다. HTMLElement는 Element의 자식이고 Element는 Node의 자식입니다. Node는 Object의 자식입니다. 이러한 관계를 DOM Tree라고 합니다.

HTMLCollection

리턴 결과가 복수인 경우에 사용하게 되는 객체

jQuery 객체

var li = $(‘li’); jquery function, li는 jquery object

li.css(‘text-decoration’, ‘underline’); //암시적 반복

jquery 객체 조회하기

Map()함수를 사용해 조회 결과 이용

출처 : 생활코딩 강의