JS HTML DOM 정리(웹캠프: 7일차)

 

www.w3schools.com/js/js_htmldom.asp 에서 한글로 정리한 내용입니다.

JavaScript HTML DOM

JavaScript HTML DOM

DOM: Document Object Model

HTML DOM을 사용하여 JavaScript는 HTML 문서의 모든 element 요소를 접근하여 변경할 수 있다.

HTML DOM 객체는 여러 객체로 이루어져있으며 트리 형태를 지닌다.

 

바로 이 객체 성질을 사용하여 HTML DOM을 이용하여 동적인(Dynamic)한 웹 페이지를 만들 수 있는 것이다!!

HTML 요소(element), 속성(attribute), Css style, 요소/속성 삭제 및 추가 , DOM 이벤트 추가/삭제 등을 할 수 있게된다.

 

중요!!
HTML DOM는 :

HTML elements를 Object(객체)로 여기며,

HTML elements에 대한 Property성질(아마 스타일)을 정의하며,

HTML elements에 대한 Access접근방법을 정의하며,

HTML elements의 Event(이벤트)를 정의합니다.

다시 말하면: HTML DOM은 HTML 요소를 가져오거나 변경, 추가 또는 삭제하는 방법에 대한 표준입니다.

JavaScript HTML DOM Elements

JS에서 HTML element를 찾는 방법은 여러가지인데, id로 가져오면 정확하게 원하는 element를 가져올 수 있고, tagname(<p>태그)이나 class(.small)으로 가져오면 배열 형태로 가져오게 되어 원하는 요소를 인덱스로 접근할 수 있다.

1. (id방식)

document.getElementById("id1").innerHTML = "Hi there"; 

2. (tag방식)

var x = document.getElementByTagName("p");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) inside "main" is: ' + x[0].innerHTML; 

3. (class방식)

var y = document.getElementsByClassName("intro");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML; 

 

(중요!!)

원하는 특정 태그의 CSS속성을 가지는 element만 선별하기.

 

퀴즈!!:

정답은:

 

addEventListener , click

 

---

JS DOM HTML (내용, 속성, css스타일 바꾸기)

위에서 언급했듯이, DOM 성질을 활용하여 내용을 수정하기도, 속성을 바꾸기도 할 수 있다.

(내용 수정하기) document.getElementById(id).innerHTML = new HTML
(속성 수정하기) document.getElementById(id).attribute = new value
(css 스타일 수정하기) document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.color = "blue";

var id = setInterval(frame, 5); --> function frame() 을 5?? 단위 간격으로 돌리겠다는 뜻이 맞는지 모르겠는디... 

clearInterval(id); --> 위에서 세팅한 주기 기간을 clear시킴....??

JavaScript HTML DOM Navigation

모든 HTML요소는 노드로 표현될 수 있다. 때문에 노드를 추가하고 제거하는게 계층별로 이루어질 수 있다.

nodeName: 노드의 element 태그 이름을 알아낼 수 있고

(ex) <h1 id="id01">My First Page</h1> 에서 id="id01"은 nodeName= h1을 가진다.

 

큐 형태처럼 노드 앞에 새 노드 추가와 노드 뒤에 새 노드 추가가 가능하다 (insertBefore(), appendChild() respectively)

 

노드 제거:

노드 대체:

replaceChild();

JavaScript HTML DOM Collections

HTML 요소들을 묶음으로, 즉, collection으로 받아 올 수 있는데,

var x = document.getElementsByTagName("p"); --> p 태그를 가지는 요소들의 collection을 var x가 가지게 된다.

An HTMLCollection is NOT an array!

한가지 주의해야할 점은 HTML collection은 엄밀히 따지자면 배열이 아니다!!
각 인덱스를 조회하는 방법은 배열과 유사하나 배열이 가지는 기능인 valueOf(), pop(), push(), or join() 는 사용하지 못한다.