자바 스크립트 HTML DOM

2020. 7. 17. 23:44ㆍ프로그래밍/Javascript

자바 스크립트 HTML DOM

DOM은 W3C (World Wide Web Consortium) 표준으로서 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

W3C DOM 표준은 3 가지 부분으로 구분됩니다.

핵심 DOM-모든 문서 유형에 대한 표준 모델
XML DOM-XML 문서의 표준 모델
HTML DOM-HTML 문서의 표준 모델

이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.

객체 모델을 사용하면 JavaScript는 동적 HTML을 만드는 데 필요한 모든 기능을 제공합니다.

JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다
JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다
JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다
JavaScript는 기존 HTML 요소 및 속성을 제거 할 수 있습니다
JavaScript는 새로운 HTML 요소 및 속성을 추가 할 수 있습니다
JavaScript는 페이지의 모든 기존 HTML 이벤트에 반응 할 수 있습니다
JavaScript는 페이지에서 새로운 HTML 이벤트를 만들 수 있습니다

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있습니다.

- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.

- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.

- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.

DOM의 종류

W3C DOM 표준은 세 가지 모델로 구분됩니다.

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

2. HTML DOM : HTML 문서를 위한 DOM 모델

3. XML DOM : XML 문서를 위한 DOM 모델

HTML DOM

HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의합니다.

모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다.

XML DOM

XML DOM은 XML 문서에 접근하여, 그 문서를 다루는 표준화된 방법을 정의합니다.

모든 XML 요소는 XML DOM를 통해 접근할 수 있습니다.

XML DOM에 대한 더 자세한 사항은 XML DOM 수업에서 확인할 수 있습니다.

자바 스크립트 -HTML DOM 메소드

getElementById 메소드

HTML 요소에 액세스하는 가장 일반적인 방법은 요소를 사용하는 id입니다.

innerHTML 속성

요소의 내용을 얻는 가장 쉬운 방법은 innerHTML속성 을 사용하는 것 입니다.

이 innerHTML속성은 HTML 요소의 내용을 가져 오거나 바꾸는 데 유용합니다.

이 innerHTML속성은 <html>and를 포함한 HTML 요소를 가져 오거나 변경하는 데 사용할 수 있습니다

자바 스크립트 HTML DOM 문서

HTML DOM 문서 객체는 웹 페이지에있는 다른 모든 객체의 소유자입니다.

HTML DOM 문서 객체

문서 객체는 웹 페이지를 나타냅니다.

HTML 페이지의 요소에 액세스하려면 항상 문서 객체에 액세스하는 것으로 시작하십시오.

다음은 문서 객체를 사용하여 HTML에 액세스하고 조작하는 방법에 대한 몇 가지 예입니다.

HTML 요소 찾기

메소드	설명
document.GetElementById(id)	요소 ID로 요소 찾기
document.getElementsByTagName(name)	태그 이름으로 요소 찾기
document.GetElementsByClassName(name)	클래스 이름으로 요소 찾기

HTML 요소 변경

속성	설명
element.innerHTML = new html content	요소의 내부 HTML 변경
element.attribute = new value	HTML 요소의 속성 값 변경
element.style.property = new style	HTML 요소의 스타일 변경
메소드	설명
element.setAttribute(attribute, value)	HTML 요소의 속성 값 변경

요소 추가 및 삭제

메소드	설명
document.createElement(element)	HTML 요소 만들기
document.removeChild(element)	HTML 요소 제거
document.appendChild(element)	HTML 요소 추가
document.replaceChild(new, old)	HTML 요소 바꾸기
document.write(text)	HTML 요소 스트림에 쓰기

이벤트 핸들러 추가

MethodDescription

document.getElementById(id).onclick = function(){code}

클릭 이벤트에 이벤트 핸들러 코드 추가

HTML 객체 찾기

첫 번째 HTML DOM 레벨 1 (1998)은 11 개의 HTML 객체, 객체 컬렉션 및 속성을 정의했습니다. 이들은 여전히 HTML5에서 유효합니다.

나중에 HTML DOM 레벨 3에서는 더 많은 객체, 컬렉션 및 속성이 추가되었습니다.

PropertyDescriptionDOM

노드란

노드(node)

HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있습니다.

HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 합니다.

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장됩니다.

이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여줍니다.

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.

노드로의 접근

HTML 문서에서 HTML DOM 노드에 접근하는 방법은 다음과 같습니다.

1. getElementsByTagName() 메소드를 이용하는 방법

2. 노드 간의 관계를 이용하여 접근하는 방법

getElementsByTagName() 메소드를 이용하는 방법

getElementsByTagName() 메소드는 특정 태그 이름을 가지는 모든 요소를 노드 리스트의 형태로 반환합니다.

따라서 이 메소드가 반환하는 노드 리스트를 이용하면 원하는 노드에 접근할 수 있습니다.

이 메소드에 대한 더 자세한 사항은 자바스크립트 DOM 요소 수업에서 확인할 수 있습니다.

노드 간의 관계를 이용하여 접근하는 방법

HTML DOM에서 노드 간의 관계는 다음과 같은 프로퍼티로 정의됩니다.

1. parentNode : 부모 노드

2. childNodes : 자식 노드 리스트

3. firstChild : 첫 번째 자식 노드

4. lastChild : 마지막 자식 노드

5. nextSibling : 다음 형제 노드

6. previousSibling : 이전 형제 노드

위와 같은 프로퍼티를 이용하여 원하는 노드에 손쉽게 접근할 수 있습니다.

노드에 대한 정보

노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있습니다.

1. nodeName

2. nodeValue

3. nodeType

이 프로퍼티들은 특별히 다른 인터페이스를 이용하지 않고도, 해당 노드의 정보에 직접 접근할 수 있는 방법을 제공합니다.

nodeName

nodeName 프로퍼티는 노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

요소 노드의 nodeName 프로퍼티는 언제나 해당 HTML 요소의 태그 이름을 대문자로 저장합니다.

노드	프로퍼티 값
문서 노드(document node)	#document
요소 노드(element node)	태그 이름 (영문자로 대문자)
속성 노드(attribute node)	속성 이름
텍스트 노드(text node)	#text

위의 예제에서 HTML 문서의 첫 번째 자식 노드는 <!DOCTYPE html>이며, 두 번째 자식 노드는 <html>입니다.

또한, <html>노드의 첫 번째 자식 노드는 <head>이며, 세 번째 자식 노드는 <body>입니다.

nodeValue

nodeValue 프로퍼티는 노드의 값을 저장합니다.

노드	프로퍼티 값
요소 노드(element node)	undefined
속성 노드(attribute node)	해당 속성의 속성값
텍스트 노드(text node)	해당 텍스트 문자열

nodeType

nodeType 프로퍼티는 노드 고유의 타입을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

대표적인 HTML 노드별 nodeType 프로퍼티 값은 다음과 같습니다.

노드	프로퍼티 값
요소 노드(element node)	1
속성 노드(attribute node)	2
텍스트 노드(text node)	3
주석 노드(comment node)	8
문서 노드(document node)	9

빈 텍스트 노드의 처리

현재 대부분의 주요 웹 브라우저는 모두 W3C DOM 모델을 지원하지만, 그 처리 방식에 있어 약간씩의 차이가 있습니다.

그중에서도 가장 큰 차이점은 띄어쓰기와 줄 바꿈을 처리하는 방식입니다.

파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)로 취급합니다.

하지만 익스플로러는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않습니다.

따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생하게 됩니다.

이 차이를 없애는 가장 손쉬운 방법은 nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하는 것입니다.

위의 예제에서 마지막 자식 노드를 찾은 후에, 찾은 노드의 타입이 요소 노드가 아니면 그 앞의 노드를 다시 검사합니다.

이 방식을 사용하면 모든 브라우저에서 마지막 자식 노드로 같은 요소 노드를 선택할 수 있게 됩니다.

HTML DOM 이벤트와 이벤트 처리

자바스크립트 프로그램에서는 이벤트 주도 프로그래밍(event-driven programming) 모델을 사용하며, 웹 브라우저ㅇ는 HTML 이벤트를 생성하고, HTML DOM은 자바스크립트가 HTML 이벤트에 반응하게 한다.

이벤트와 이벤트 타입

자바스크립트에서 특정 HTML 이벤트가 발생하면 브라우저에서는 자바스크립트 함수나 코드 조각에 해당하는 이벤트 핸들러(event handler)를 호출한다. 사용 가능한 다양한 이벤트 핸들러는 다음과 같습니다.

onabort: 이미지 로딩이 중단될 경우 실행된다.
onblur: 엘리먼트가 입력 포커스를 잃어버릴 경우 실행된다.
onchange: 폼 엘리먼트가 포커스를 잃고 값이 변경될 경우 실행된다.
onclick: 마우스 버튼이 눌렸다 떼어질 때 실행된다. mouseup 이벤트가 이어서 발생한다. 기본 동작 방식을 취소하려면 false를 반환한다.
ondblclick: 마우스가 더블클릭될 때 실행된다.
onerror: 이미지 로딩 오류가 일어날 경우 실행된다.
onfocus: 엘리먼트가 입력 포커스를 얻을 경우 실행된다.
onkeydown: 키가 눌렸을 때 실행된다. 취소하려면 false를 반환한다.
onkeypress: 키가 눌렸을 때 실행된다. keydown 이벤트가 이어서 발생한다. 취소하려면 false를 반환한다.
onkeyup: 키에서 손을 뗐을 때 실행된다. keypress 이벤트가 이어서 발생한다.
onmousedown: 마우스 버튼이 눌렸을 때 실행된다.
onmousemove: 마우스가 이동할 경우 실행된다.
onmouseout: 마우스가 엘리먼트에서 벗어났을 때 실행된다.
onmouseover: 마우스가 엘리먼트 위로 이동할 때 실행된다.
onmouseup: 마우스 버튼에서 손을 뗐을 때 실행된다.
onresize: 윈도우 크기가 변경될 경우 실행된다.
onselect: 텍스트가 선택됐을 때 실행된다.
onreset: 폼 초기화가 요청됐을 때 실행된다. 초기화를 방지하려면 false를 반환한다.
onsubmit: 폼 제출이 요청됐을 때 실행된다. 제출을 방지하려면 false를 반환한다.
onload: 문서 로딩이 완료됐을 때 실행된다.
onunload: 문서나 프레임셋이 사라졌을 때 실행된다.

속성 형태의 이벤트 핸들러

자바스크립트에서 이벤트 핸들러는 HTML 속성으로 지정할 수도 있는데, 이벤트 핸들러의 값은 자바 코드로 구성된 임의 문자열이면 된다. 핸들러가 여러 자바스크립트 구문으로 구성돼 있다면 각 구문을 세미콜론으로 구분한다. 다음 예제를 보자.

프로퍼티 형태의 이벤트 핸들러

자바스크립트에서는 이벤트 핸들러를 DOM 엘리먼트의 프로퍼티로 할당할 수 있는데, 이벤트 핸들러 프로퍼티에 원하는 함수를 설정한다. 다음 예제를 보자.

document.getElementById('button1').onclick = function(){alert('thanks');};

function startApp(){...}

document.onload = startApp;

이벤트 핸들러와 this 키워드

이벤트 핸들러를 HTML 속성으로 정의하든 자바스크립트 프로퍼티로 정의하든 함수를 document 엘리먼트의 프로퍼티로 할당하는 셈이다. 다시 말해 document 엘리먼트에 새로운 메서드를 정의하는 것이다. 이벤트 핸들러가 호출되면 이벤트가 발생한 엘리먼트의 메서드로서 해당 이벤트 핸들러가 호출되고, 따라서 this 키워드는 대상 엘리먼트를 가리킨다.

'프로그래밍 > Javascript' 카테고리의 다른 글

mvc패턴과 서블릿 (0)	2020.07.28
jQuery (0)	2020.07.22
Javascript (0)	2020.07.14

wallnut's

wallnut's

태그

최근글

댓글

공지사항

아카이브