[js] DOM

DOM (document object mobel)

HTML 페이지가 로드되면 브라우저는 이 HTML 페이지를 다루기 위한 DOM을 생성한다

웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체, 일부를 동적으로 반응하게 하는 것이다 이렇게 반응하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다

자바스크립트를 이용하여 웹 문서에 접근하여 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법인 DOM, 문서 객체 모델을 사용한다

DOM은 웹 문서를 하나의 객체로 정의한다 

웹 문서 전체는 document 객체이고 삽입한 이미지는 image 객체이다 이처럼 DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리한다

 

 

DOM은 'W3C 표준' 이다

이는 모든 언어에 오픈된 규약이다

즉, javascript 외에 다른 언어로도 DOM 표준을 따르는 HTML 문서를 다룰 수 있다

 

'W3C DOM 표준' 은 세가지로 구성된다

1. core DOM

2. XML DOM

3. HTML DOM

 

HTML DOM 표준의 목적

HTML element를 다루기 위한 (element 접근하기 위해) 표준 방법을 제시하는 것이다

 

 

javascript는 DOM 구조의 HTML 페이지를 다루기 위한 언어

js는 DOM 안의 element/attribute/css를 변경할 수 있다

js는 DOM 안의 element/attribute를 추가/삭제할 수 있다

js는 DOM 안의 event를 다루고 추가할 수 있다

 

 

javascipt는 window.document 객체를 통해 DOM 구조를 다룬다

 

 

 

* css 추가/변경 시엔 .style 넣어서 입력하기 

  이 때 배경색 변경을 하게 되면 .style.background-color에서 하이픈(-)을 제거하고 카멜 표기법을 사용한다

 

getElementById(아이디)

getElementsTagName(태그) : 배열로 리턴

getElementsByClassName(클래스) : 배열로 리턴

getElementsByName(name) : 배열로 리턴

quearySelectorAll(selector) : css selector의 element들을 배열로 리턴

document.forms : document의 모든 <form> element들

document.images : document에 적용된 모든 <img> elements

 

-form 값 변경하기

<form name="frm1">
	<input value="폼 1_1" name="input1_1"/> <!--0번째-->
	<input value="폼 1_2" name="input1_2"/> <!--1번째-->
</form>
<p id="frm_result1"></p>
<p id="frm_result2"></p>

<script>
	let result = [];
	let frm1 = document.forms['frm1'];

for(i = 0; i < frm1.length; i++) {
	result.push(frm1[i].value);
}

document.getElementById('frm_result1').innerHTML = result.join(',');
document.getElementById('frm_result2').innerHTML = document.forms['frm2']['input1_2].value;
</script>

 

-document.images

<img src="https://www.w3schools.com/js/pic_htmltree.gif">
<img src="https://www.w3schools.com/js/pic_navigate.gif">
<p id="demo4"></p>

<script>
elements = document.images;
for(e of elements) {
	e.style.border = "blue"
}

 

for(e of elements) {}

elements.forEach(e => {});