[JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체

DOM(Document Object Model) : 문서 객체 모델

DOM은 document 객체를 기반으로 제공되는 HTML 태그의 Element 객체이다.

DOM은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

자바스크립트를 사용하여 태그에서 이벤트가 발생될 경우 이벤트 처리 함수를 사용하여 태그를 Element 객체로 제공받아 조작이 가능하다.
이를 통해 동적인 페이지(DHTML:dynamicHTML)를 구현할 수 있다.

- DHTML(Dynamic HTML; 동적 HTML): 정적 마크업 언어인 HTML과 클라이언트 기반 스크립트 언어(ex.자바스크립트) 그리고 스타일 정의 언어인 CSS를 조합하여 대화형 웹 사이트를 제작하는 기법

동적인 페이지를 구현하기 위해서는 반드시 DOM Tree가 먼저 완성(HTML 태그가 메모리에 저장)되어야 한다.
이를 위해 사용해야 하는것이 onload Event Listener 이다.

onload 이벤트 리스너 속성

태그가 메모리에 저장된 경우 실행될 이벤트 처리 명령(자바스크립트 명령)을 속성값으로 설정하는 속성이다.
body 태그가 메모리에 저장되며 자바스크립트의 load() 함수를 호출한다.

예제1)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
function load() {//이벤트 처리 함수 
	alert("동적인 페이지를 구현하기 위해 HTML 태그 조작하는 명령 실행");
}
</script>
</head>
<body onload="load();">
<body>
	<h1>DOM(Document Object Model) - onload Event Listener</h1>
	<hr>
</body>
</html>

예제2)

자바스트립트 객체에 이벤트 리스너 속성을 요소로 하여 이벤트 처리 함수 저장
→ 자바스트립트 객체에서 해당 이벤트가 발생될 경우 이벤트 처리 함수 호출

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
window.onload=function() {
	alert("동적인 페이지를 구현하기 위해 HTML 태그 조작하는 명령 실행");
}
</script>
</head>
<body>
	<h1>DOM(Document Object Model) - onload Event Listener</h1>
</body>
</html>

예제 3)

body 태그의 마지막 자식 태그로 script 태그를 선언하면 onload 이벤트 리스너 속성을 이용하지 않아도 HTML 태그를 조작하여 동적인 페이지 구현이 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
    <h1>DOM(Document Object Model) - onload Event Listener</h1>
    <script type="text/javascript">
    alert("동적인 페이지를 구현하기 위해 HTML 태그 조작하는 명령 실행");
    </script>  
</body>
</html>

Element 객체

Element 객체는 웹 페이지의 구조를 나타내는 요소들을 동적으로 조작하고 제어하는 데 사용된다.
이를 통해 HTML 요소의 내용, 스타일, 이벤트 등을 동적으로 변경하여 웹 페이지를 업데이트하거나 사용자와의 상호작용을 구현할 수 있다.

Node 객체와 Element 객체의 차이?

Node 객체 : 태그(TagNode)와 태그내용(TextNode)을 자바스크립트 객체로 표현

Node 객체는 DOM 트리의 모든 요소를 나타내는 일반적인 개념이다.
Node 객체는 요소 뿐만 아니라 텍스트, 주석, 속성, 문서 자체 등을 포함한다.
Node 객체는 DOM 트리의 모든 요소의 부모가 될 수 있으며, DOM 트리에서 서로 계층적인 관계를 형성한다.

Element 객체 : 태그(TagNode)만을 자바스크립트 객체로 표현

Element 객체는 <div>, <p>, <span>, <a> 등과 같이 HTML 태그로 표현되는 요소를 의미한다.
Element 객체는 Node 객체의 하위 유형으로, 특정 요소의 속성, 스타일, 내용 등을 조작하고 제어하는 데 사용된다.

즉 Node 객체는 Element 객체보다 더 광범위한 범위이다.

html 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>DOM(Document Object Model) - Element 객체</h1>
	<hr>
	<p>Node 객체 : 태그(TagNode)와 태그내용(TextNode)을 자바스크립트 객체로 표현</p>
	<p>Element 객체 : 태그(TagNode)만을 자바스크립트 객체로 표현</p>
	<hr>
	<h2 id="headline">h2 태그에 의해 출력되는 내용</h2>
	<ul>
		<li>li 태그에 의해 출력되는 내용-1</li>
		<li>li 태그에 의해 출력되는 내용-2</li>
		<li>li 태그에 의해 출력되는 내용-3</li>
	</ul>
	<p class="text">p 태그에 의해 출력되는 내용</p>
</body>
</html>

document.getElementById(id) : 태그의 id 속성값으로 태그를 검색하여 검색된 하나의 태그를 Element 객체로 반환하는 메소드
→ document 객체 대신 부모 Element 객체를 사용하여 자식태그를 검색해 Element 객체로 반환 가능

var h2E=document.getElementById("headline"); 
alert(h2E);//[object HTMLHeadingElement] - Element 객체

Node.nodeName : Node(Element) 객체의 노드명(태그명)을 저장한 프로퍼티

alert(h2E.nodeName);//H2

Node.nodeValue : Node(Element) 객체의 노드값(태그내용)을 저장한 프로퍼티

alert(h2E.nodeValue);//null

Node.firstChild : Node(Element) 객체의 첫번째 자식 Node(Element) 객체를 저장한 프로퍼티

alert(h2E.firstChild);//[object Text]

alert(h2E.firstChild.nodeName);//#text
alert(h2E.firstChild.nodeValue);//h2 태그에 의해 출력되는 내용

Text 객체의 nodeValue 프로퍼티의 속성값 변경 - 태그내용 변경

h2E.firstChild.nodeValue="h2 태그의 내용 변경";//자바스크립트를 이용해 태그내용 변경

document.getElementsByTagName(tagname) : document 객체의 자식태그에서 태그명으로 태그를 검색하여 검색된 다수의 태그를 NodeList 객체로 반환하는 메소드
→ document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 Element 객체로 반환 가능
NodeList 객체 : 다수의 Node 객체(Element)가 저장된 객체 - HTMLCollection 객체

var liList=document.getElementsByTagName("li");
alert(liList);//[object HTMLCollection]

NodeList.length : NodeList 객체에 저장된 Node(Element) 객체의 갯수를 저장한 프로퍼티

alert(liList.length);//3

NodeList.item(index) : NodeList 객체에 저장된 Node(Element) 객체 중 매개변수로 전달받은 첨자위치의 Node(Element) 객체를 반환하는 메소드

for(i=0;i<liList.length;i++) {
	var liE=liList.item(i);
	//alert(liE);//[object HTMLLIElement]
	alert(liE.firstChild.nodeValue);
}
//li 태그에 의해 출력되는 내용-1
//li 태그에 의해 출력되는 내용-2
//li 태그에 의해 출력되는 내용-3

document.querySelector(selector) : document 객체의 자식태그에서 CSS 선택자로 태그를 검색하여 검색된 하나의 태그를 Node 객체(Element 객체)로 반환하는 메소드

var pE=document.querySelector(".text");
alert(pE);//[object HTMLParagraphElement]
alert(pE.firstChild.nodeValue);//p 태그에 의해 출력되는 내용

document.querySelectorAll(selector) : document 객체의 자식태그에서 CSS 선택자로 태그를 검색하여 검색된 다수의 태그를 NodeList 객체로 반환하는 메소드
→ document 객체 대신 Element 객체를 사용하여 자식태그를 검색해 NodeList 객체로 반환 가능

var pList=document.querySelectorAll(".text");
alert(pList);//[object NodeList]
alert(pList.item(0).firstChild.nodeValue);//p 태그에 의해 출력되는 내용

Element 객체를 생성하고 DOM Tree 추가하기

document.createElement(tagName) : 매개변수로 전달된 태그명의 Element 객체를 생성하여 반환하는 메소드

 var h2E=document.createElement("h2");//<h2></h2>태그 생성 
 alert(h2E);//[object HTMLHeadingElement]

document.createTextNode(content) : 매개변수로 전달된 태그내용이 저장된 Text 객체를 생성하여 반환하는 메소드

var h2T=document.createTextNode("h2 태그에 출력되는 내용");
alert(h2T);//[object Text]

Node.appendChild(newNode) : 매개변수로 전달받은 Node(Element) 객체를 Node(Element) 객체의 자식으로 추가하는 메소드

h2E.appendChild(h2T);//<h2>h2 태그에 의해 출력되는 내용</h2>

Element 객체를 생성한 다음에 출력하기 위해서는 Dom Tree에 추가 해야한다.

document.body : document 객체에서 body 태그를 자바스크립트 객체로 표현

document.body.appendChild(h2E);//DOM Tree에 새로운 태그를 추가하여 저장 >> 출력

html 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>DOM(Document Object Model) - Element 객체 생성 및 DOM Tree 추가</h1>
	<hr>
	<div id="imageDiv"></div>
</body>
</html>

Element.attributeName : Element 객체에 프로퍼티를 추가하면 태그에 속성과 속성값을 추가하는 것과 동일한 기능을 수행한다.

var imgE = document.createElement("img");//<img> 
	
imgE.src="images/Koala.jpg";//<img src="images/Koala.jpg">

Node.setAttribute(name, value) : Node(Element) 객체의 태그의 속성값을 변경하는 메소드 → 매개변수로 전달받은 속성이 없는 경우 속성이 추가된다.
Node.setAttribute(name) : Node(Element) 객체의 태그 속성값을 반환하는 메소드
Node.removeAttribute(name) : Node(Element) 객체의 태그 속성을 삭제하는 메소드

imgE.setAttribute("width","300");//<img src="images/Koala.jpg" width="300">
	
var divE=document.getElementById("imageDiv");//<div id="imageDiv"></div>
divE.appendChild(imgE);//<div id="imageDiv"><img src="images/Koala.jpg" width="300"></div>

Node.insertBefore(newElement, before) : 기존 Node(Element) 객체 전에 새로운 Node(Element) 객체를 삽입하는 메소드

var hrE=document.createElement("hr");//<hr>
document.body.insertBefore(hrE, h2E);

DOM Tree의 Element 객체 삭제

html 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>DOM(Document Object Model) - DOM Tree의 Element 객체 삭제</h1>
	<hr>
	<h2>엘리먼트-1</h2>
	<h2 id="remove">엘리먼트-2</h2>
	<h2>엘리먼트-3</h2>
</body>
</html>

Node.removeChild(oldNode) : Node(Element) 객체에서 자식 Node(Element) 객체를 삭제하는 메소드
→ DOM Tree에서 태그 삭제 >> 미출력

var h2E=document.getElementById("remove");
document.body.removeChild(h2E);

Element.parentNode : Node(Element) 객체의 부모 Node(Element) 객체를 저장한 프로퍼티

var h2E=document.getElementById("remove");
h2E.parentNode.removeChild(h2E);

DOM Tree의 Element 객체 변경

html 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>DOM(Document Object Model) - DOM Tree의 Element 객체 변경</h1>
	<hr>
	<ul>
		<li>메뉴-1</li>
		<li>메뉴-2</li>
		<li>메뉴-3</li>
	</ul>
	<ul>
		<li>메뉴-4</li>
		<li>메뉴-5</li>
		<li>메뉴-6</li>
	</ul>
	<hr>
	<div id="text"></div>
</body>
</html>

sciprt 태그

var ulList=document.getElementsByTagName("ul");

var liList=ulList.item(0).getElementsByTagName("li");
	
var liE=liList.item(1);//<li>메뉴-2</li>

Text 객체를 이용하여 태그 내용 변경하기

liE.firstChild.nodeValue="신메뉴";//<li>신메뉴</li>

태그 내용 뿐만 아니라 HTML 태그를 모두 바꿀 때 더 편한 방법

Node.replaceChild(newNode, oldNode) : Node(Element) 객체의 자식 Node(Element) 객체를 새로운 Node(Element) 객체로 변경하는 메소드

var newText=document.createTextNode("신메뉴");
liE.replaceChild(newText, liE.firstChild);

<div> 요소를 가져와 <p>태그 생성 후, 텍스트 노드를 생성하여 <p>태그에 추가하고, <div>에 추가하기

var divE=document.getElementById("text");//<div id="text"></div>
var pE=document.createElement("p");//<p></p>
var pT=document.createTextNode("p 태그에 의해 출력되는 내용");
pE.appendChild(pT);//<p> 태그에 출력되는 내용</p>
divE.appendChild(pE);//<div id="text"><p> 태그에 출력되는 내용</p></div>

Node(Element) 객체의 innerHTML 프로퍼티를 사용하여 하위태그 및 태그내용을 쉽게 변경할 수 있다.

Node.innerHTML : Node(Element) 객체에 자식 태그 또는 태그내용을 저장한 프로퍼티
→ Node(Element) 객체의 innerHTML 프로퍼티를 사용하여 하위태그 및 태그내용 변경 가능

var divE=document.getElementById("text");//<div id="text"></div>
divE.innerHTML="<p>p 태그에 의해 출력되는 내용</p>";

저작자표시 비영리 변경금지 (새창열림)

'학원 > 복기' 카테고리의 다른 글

[JavaScript] 이벤트 전파(Event Propagation) (0)	2023.06.11
[JavaScript] 이벤트 처리(Event Handle) / this 키워드 / 태그의 기본 이벤트 처리 기능 (0)	2023.06.09
[JavaScript] BOM(Browser Object Model) (0)	2023.06.08
[JavaScript] Date 클래스 함수 / Math 클래스 함수 / JSON 클래스 함수 (0)	2023.06.08
[JavaScript] Number 클래스 함수 / String 클래스 함수 (0)	2023.06.07

개뿌

[JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체

DOM(Document Object Model) : 문서 객체 모델

onload 이벤트 리스너 속성

Element 객체

Element 객체를 생성하고 DOM Tree 추가하기

DOM Tree의 Element 객체 삭제

DOM Tree의 Element 객체 변경

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체

DOM(Document Object Model) : 문서 객체 모델

onload 이벤트 리스너 속성

Element 객체

Element 객체를 생성하고 DOM Tree 추가하기

DOM Tree의 Element 객체 삭제

DOM Tree의 Element 객체 변경

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바