Javascript DOM

DOM(Document Object Model)

: 문서 객체 모델

• 문서(HTML, XML 등)에 작성해 놓은 요소, 태그들에 접근하는 방법 제공

DOM 설명

 

 

DOM 역할

• 새로운 HTML의 요소나 속성 추가
• 존재하는 HTML 요소나 속성 제거
• HTML 문서의 모든 HTML 요소, 속성, css 스타일 변경
• HTML 문서에 새로운 HTML 이벤트 추가
• HTML 문서에 모든 HTML 이벤트에 반응

 

 

 

Document

: 웹 페이지에 존재하는 HTML요소에 접근하여 행동하고자 할 때 사용하는 객체

 

[  Document 속성  ]

document.documentElement
document.head
document.title
document.body

document.URL
document.domain

 

[  Document  요소 선택  ]

document.getElementById(아이디 속성값)  //단수형 < Element >
   --> console.log(document.getElementById("input1"));
       //id가 input1인 요소를 찾아서 가져옴

document.getElementsBuClassName(클래스 속성값) //< HTMLCollection >
   --> console.log(document.getElementsByClassName("css1"));
       //여러 개를 가져옴; class 요소 개수와 관계없이 리스트형으로 가져옴
   --> console.log(document.getElementsByClassName("css1")[0]);
       //class 요소 하나만 가져오는 방법(index로 접근)
   
document.getElementsByTagName(태그 이름) //< HTMLCollection >
   --> console.log(document.getElementsByTagName("img"));
       //태그 이름이 img인 것만 가져옴 
       
document.getElementsByName(name 속성값) //< Nodelist >

---
document.querySelector(CSS 선택자) //< First Element >
   --> console.log(document.querySelector("#input1"));
   --> console.log(document.querySelector(".css1"));
       //몇 개가 있든 무조건 하나만 가져옴, 가장 위에 있는 요소 하나만 가져옴

document.querySelectorAll(CSS 선택자) //< Nodelist >
   --> console.log(document.querySelectorAll(".css1"));
       //여러 개를 가져오고 싶을 경우 All사용

 

(참고) HTMLCollection과 Nodelist

<  HTMLCollection  >

: getElementsByClassName과 getElementsByTagName을 통해 얻을 수 있는 객체

• 이러한 컬렉션은 prototype(콘솔에서 확인 가능)이 HTMLCollection임
• HTMLCollection은 배열이 아닌 유사 배열 객체, 배열과 가장 큰 차이점은 “살아있다”는 점

    ▼‘살아 있다’란?

노드(내부원소) 객체의 상태 변화를 실시간으로 감지하고 반영하는 객체

 

<  Nodelist  >

: querySelectorAll이 반환하는 객체

  노드의 변경을 실시간으로 감지하지 않는다는 특징을 가진 컬렉션(노드를 정적으로 관리)

 

<  정리  >

메소드	설명	반환값
document.getElementById(아이디)	해당 아이디의 요소를 선택함.	Element
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.	HTMLCollection
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.	HTMLCollection
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.	Node list
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.	Node list

 

 

 

[  Document 요소 다루기  ]

// 요소 생성
document.createElement(html요소)
document.write(텍스트)

// 부모 노드에 자식 노드 추가/삭제
[].append(); //[]요소의 맨마지막에 자식 추가(여러 자식 요소 추가 가능, 문자열 삽입 가능/리턴값 반환하지 않음)
[].appendChild(); //[]요소의 맨 마지막에 자식 추가(한번에 하나의 자식 노드만 추가할 수 있음/리턴값 반환)
[].remove(); //[]요소 삭제
[].removeChild(); //부모-자식관계 끊음; [](부모)요소.removeChild('(자식)요소')
-> 요소 선택할 때 var 변수명 = document.qerySelector('css 선택자') 사용

[].innerText = 내용;
[].className = 클래스 이름;

▼▼▼

< Document 요소 다루기 예시 >
<div id = div1 ></div>
<button type="button" onclick="add()">눌러보세요</button>

<script>
	function add() {
		var p1 = document.createElement('p'); // 추가할 요소 생성
		p1.innerText = '안녕하세요'; // 내용 생성
		p1.className = 'p1'; // 클래스 이름 생성
		var div = document.querySelector('#div1'); // 추가할 위치
		div.append(p1); // 추가
	};