HTML DOM (Document Object Model)
DOM은 문서를 엑세스하고 조작하기 위한 표준을 정의합니다.
HTML DOM은 HTML 문서를 엑세스하고 조작하기 위한 표준 방법을 정의합니다.
HTML DOM을 사용하면 JavaScript가 HTML 문서의 모든 요소에 엑세스하여 이를 변경할 수 있습니다.
HTML 문서를 트리구조로 제공합니다.
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
1. HTML Dom 메소드
HTML DOM은 JavaScript(및 다른 프로그래밍 언어)로 엑세스 할 수 있습니다. DOM에서 모든 HTML 요소는 객체로 정의됩니다.
2. HTML 요소 찾기
2-1.ID로 HTML 요소 찾기
document.getElementById(id)
2-2.태그 이름으로 HTML 요소 찾기
document.getElementByTagName(name)
2-3.클래스 이름으로 HTML 요소 찾기
document .getElementsByClassName(class names)
2-4.CSS 선택자로 HTML 요소 찾기
document.querySelectorAll(id/class names/types/attributes/values of attributes,etc)
ex) HTML 문서에 하나의 <h1> 요소만 포함되어 있어도 getElementsByTagName()메서드는 항상 배열을 반환하기 때문에 배열인덱스[0]을 지정해야 한다.
3. HTML 요소 변경하기
3-1.HTML 내용 변경하기
document.getElementById(id).innerHTML = new html content
3-2.속성 값 변경
document.getElementById(id).attribute = new value
document.getElementById(id).setAttribute(attribute, value)
3-3.HTML 스타일 변경하기
document.getElementById(id).property = new style
4. 요소 추가 및 삭제
4-1.document.createElement(element) >>> Create an HTML element
4-2.document.removeChild(element) >>> Remove an HTML element
4-3.document.appendChild(element) >>> Add an HTML element
4-4.document.replaceChild(element) >>> Replace an HTML element
4-5.document.write(text) >>> Write into the HTML output stream
5. 이벤트 핸들러 추가
document.getElementById(id).onclick = function(){code} >>> Adding event handler code to an onclick event
6. 노드관계
위의 HTML에서 다음을 읽을 수 있습니다.
<html>은 루트 노드입니다.
<html>에는 부모가 없습니다.
<html>은 <head> 및 <body>의 부모입니다.
<head>는 <html>의 첫 번째 하위 항목입니다.
<body>는 <html>의 마지막 자식입니다.
<head>에는 하나의 하위가 있습니다. <title>
<title>에는 하나의 자식 (텍스트 노드)이 있습니다 : "DOM Tutorial"
<body>에는 두 개의 하위 항목이 있습니다. <h1> 및 <p>
<h1>에는 한 명의 자녀가 있습니다 : "DOM Lesson one"
<p>에는 "Hello world!"라는 자녀가 있습니다.
<h1> 및 <p>은 형제입니다.
7. 노드 간 이동
다음 노드 특성을 사용하여 JavaScript로 노드 사이를 탐색 할 수 있습니다.
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
8. DOM 루트 노드
전체 문서에 대한 액세스를 허용하는 두 가지 특수 속성이 있습니다.
8-1.document.body - 문서의 본문
8-2.document.documentElement - 전체 문서
9. tag 재사용 불가
9-2.para 변수를 이용하여 여러개의 tag를 생성할 수 없다. 즉 dom script로 생성된 tag는 재사용이 불가하다.
9-3.dom script와 관계없이 tag를 생성하여 추가할 수 있다.
10. HTMLCollection 객체
11. HTMLCollection과 NodeList의 차이점
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] Objects, Arrays, Array-Like objects (0) | 2019.03.28 |
|---|---|
| [JavaScript] 함수형 프로그래밍 (0) | 2019.03.27 |
| [JavaScript] 현재시간 Timestamp 얻는 방법 (0) | 2019.01.17 |
| [JavaScript] Array Methods (0) | 2018.09.17 |
| [JavaScript] Arrays (0) | 2018.09.16 |
댓글