DOM
DOM(Document OBject Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고 각각의 요서에 접근하는 방법을 제공한다. 예를 들면, 아래 그림과 같이, page의 HTML 요소에 대응하는 node 객체의 tree 형태이다.
DOM은 위와 같이 요소를 표현하는 여러 개의 node로 구성되어 있다.
DOM은 세 가지 모델로 구분된다.
1. Core DOM : 모든 문서 타입을 위한 DOM 모델
2. HTML DOM : HTML 문서를 위한 DOM 모델
3. XML DOM : XML 문서를 위한 DOM 모델
JavaScript는 객체모델을 이용해서 요소(elements)의 상태를 보기 위해 노드(node)를 검사(조사)할 수 있고, HTML 요소(elements)나 특성(attributes)을 추가, 변경, 제거할 수 있다.
- ex) textbox의 타입이 무엇인지 알아내기
- ex) style을 변경하거나 `<h1>` tag의 contents를 변경하기DOM은 특정 프로그래밍 언어에 의존하지 않는다. 즉, 프로그래밍 언어로부터 독립적이다. 그래서 Python, Ruby 등 어떤 언어로도 만들어질 수 있다.
DOM이 가지는 node의 타입은 다음과 같다.
- Element : HTML 요소를 나타낸다.
- Text : HTML에 나타난 공백을 포함한 모든 텍스트 콘텐트를 나타낸다. text node는 자식 노드를 가질 수 없다.
- Comment : HTML 내의 주석을 나타낸다.
DOM 사용하기
다음과 같은 HTML 파일이 있다.
<!DOCTYPE html>
<html>
<head>
<title >HTML Template</title>
</head>
<body>
<p>Counting the number of click on the button. </p>
<button id =="but1"> Click me</button>
<p> id dsp The number of clicks: </p>
<!--Embed the script into the HTML page-->
<script> src =="control js" </script>
</body>
</html>`을 HTML 파일에 추가하는 것을 잊지 말자
Secting elements
control.js 파일을 만들고, content를 생성한다.
//getElementById()를 사용한다. var content = document.getElementById('comment'); //id var content = document.getElementsByClassName('comment'); //class name var content = document.getElementsByTagName ('p') //tag name //해당 특성을 가진 요소 하나를 반환한다.//querySelector()를 사용한다. var content = document.querySelector('#content'); //id var content = document.querySelector('.ted'); //class name var content = document.querySelector('p'); //tag name //해당 선택자를 만족하는 요소 하나를 반환한다.요소를 선택하고 변수에 그것을 할당해서, 나중에 쉽게 content를 수정하거나, 자식 노드를 추가 또는 제거할 수 있다.
Modifying elements
innerHTML: 요소(element)의 속성으로, 요소 내의 HTML 전체 내용을 가져오거나 설정할 수 있다.
//getElementById로 할당된 변수에 사용할 수 있다.
//text만 변경하기
content.innerHTML = 'C\'est la vie';
//html 코드와 함께 작성하기
content.innerHTML = "<p>C\'est la vie</P>";
//스타일 적용하기
content.innerHTML = "<p style = 'color:blue'>C\'est la vie</P>";
//빈 문자열을 넣으면 전체 내용을 지울 수 있다.
content.innerHTML = "" innerText: 요소(element)의 속성으로, 요소 내의 사용자에게 보여지는 텍스트 값을 가져오거나 설정할 수 있다. 연속된 공백은 무시한다.
//getElementById로 할당된 변수에 사용할 수 있다.
//text 값만 다르기 때문에 html태그는 사용할 수 없다.
content.innerText = 'C\'est la vie';
//html 태그를 넣으면 태그도 text값으로 인식하고 문자열 그대로 적용한다.
content.innerText = "<p>C\'est la vie</P>"; textContent: node의 속성으로, 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 가져온다. (display: none으로 설정된 텍스트도 포함.)
//getElementById로 할당된 변수에 사용할 수 있다.
//text 값만 다르기 때문에 html태그는 사용할 수 없다.
content.innerText = 'C\'est la vie';
//html 태그를 넣으면 태그도 text값으로 인식하고 문자열 그대로 적용한다.
content.innerText = "<p>C\'est la vie</P>"; Adding elements
//새로운 요소 생성하기
var new_element = document.createElement("h1");
//content의 자식 노드로 요소를 추가하기
content.appendChild(new_element);
//요소에 새로운 텍스트 추가하기
new_element.innerHTML = 'Comme un roi, comme un chien'; Removing elements
new_element.remove();Event Handling
<https://developer mozilla org/en US/docs/Web/API/EventTarget>에서 더 많은 이벤트 기능을 공부할 수 있다.
Adding an Event
//syntax
element.addEventListner('event handler', function);클릭 횟수를 세는 버튼을 만들어 보자.
var button = document.querySelector('#but1');
var display = document.querySelector('#dsp');
var count = 0;
function buttonClick(){
count = count + 1;
display.textContent = "The number of clicks: " + count;
}
button.addEventListner('click', buttonClick);Removing an Event
//syntax
element.removeEventListner('event handler', function);addEventListner와 removeEventListner는 같은 element, event handler, listener function을 가져야 한다.
이전 기능과 같지만, 한 번만 count가 증가하는 버튼을 만들어 보자 (첫 번째 클릭 이후에, count가 증가하지 않는다.).
var button = document.querySelector('#but1');
var display = document.querySelector('#dsp');
var count = 0;
function buttonClick(){
count = count + 1;
display.textContent = "The number of clicks: " + count;
button.removeEventListener('click', buttonClick);
}
button.addEventListner('click', buttonClick);