[JS] dom

DOM이란 무엇인가?

DOM은 Document Object Model의 약자입니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다.

 

 

DOM은 어떻게 생겼을까?

DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다.

 

 

Javascript에서 DOM의 특정 요소(element)를 찾는 방법

1. getElementById()

[HTML]

<div id='div_1'>

  Div1입니다.

</div>

<div id='div_2'>

  Div2입니다.

</div>

<input type='button'

       value='getElementById() - id로 찾기'

       onclick='getDiv1()'/>

[JS]

function getDiv1() {

  const div1 = document.getElementById('div_1');

  alert(div1.innerText);

}

2. getElementsByClassName()

[HTML]

<div id='div_1' class='my_class'>

  Div1입니다.

</div>

<div id='div_2' class='my_class'>

  Div2입니다.

</div>

<div id='div_3' class='your_class'>

  Div3입니다.

</div>

<input type='button'

       value='getElementsByClassName() - class이름으로 찾기'

       onclick='getMyClass()'/>

[JS]

function getMyClass() {

  const div_list

    = document.getElementsByClassName('my_class');

 

  // class가 'my_class'인 element 개수 출력

  const div_list_length = div_list.length;

  alert(div_list_length);

 

  // class가 'my_class'인 element 목록 출력

  for(let i = 0; i < div_list_length; i++)  {

    alert(div_list[i].innerText);

  }

}

3. getElementByTagName()

[HTML]

<div id='div_1' class='my_class'>

  Div1입니다.

</div>

<div id='div_2' class='my_class'>

  Div2입니다.

</div>

<div id='div_3' class='your_class'>

  Div3입니다.

</div>

<input type='button'

       value='getElementsByTagName() - Tag Name으로 찾기'

       onclick='getElementsByTagNameDiv()'/>

[JS]

function getElementsByTagNameDiv() {

  const div_list

    = document.getElementsByTagName('div');

 

  // tag name이 'div'인 element 개수 출력

  const div_list_length = div_list.length;

  alert(div_list_length);

 

  // tag name이 'div'인 element 목록 출력

  for(let i = 0; i < div_list_length; i++)  {

    alert(div_list[i].innerText);

  }

}

4. querySelector()

[HTML]

<div id='div_1' class='my_class'>

  Div1입니다.

</div>

<div id='div_2' class='my_class'>

  Div2입니다.

</div>

<div id='div_3' class='your_class'>

  Div3입니다.

</div>

<input type='button'

       value='querySelector() - ID로 찾기'

       onclick='querySelectorById()'/>

[JS]

function querySelectorById() {

  const div

    = document.querySelector('#div_1');// ID로 찾기

const div

    = document.querySelector('.my_class');// Class 이름으로 찾기

const div

    = document.querySelector('div');// Tag 이름으로 찾기

const div

    = document.querySelector('.red, .green');// 선택자 ','로 구분하기





 

  alert(div.innerText);

}

 

 

5. querySelectorAll()

[HTML]

<div id='div_1' class='my_class'>

  Div1입니다.

</div>

<div id='div_2' class='my_class'>

  Div2입니다.

</div>

<div id='div_3' class='your_class'>

  Div3입니다.

</div>

<input type='button'

       value='querySelectorAll() - Id 전체 찾기'

       onclick='querySelectorAllById()'/>

[JS]

function querySelectorAllById() {

  const div_list

    = document.querySelectorAll('#div_1');// ID로 찾기

const div_list

    = document.querySelectorAll('.my_class');// Class 이름으로 찾기

const div_list

    = document.querySelectorAll('div');// Tag 이름으로 찾기

const div_list

    = document.querySelectorAll('.red, .green');// 선택자 ','로 구분하기



  // id가 'div_1'인 element 개수 출력

  const div_list_length = div_list.length;

  alert(div_list_length);

 

  // id가 'div_1'인 element 목록 출력

  for(let i = 0; i < div_list_length; i++)  {

    alert(div_list[i].innerText);

  }

}

- createElement() : DOM 객체 동적 생성

- 부모.appendChild(DOM객체) : DOM 객체를 부모의 마지막 자식으로 삽입

- 부모.insertBefore(DOM객체 [, 기준자식]) : DOM 객체를 부모의 자식 객체 중 기준 자식 앞 삽입

- removeChild() : DOM 객체 삭제