DOM의 뜻은?! 그리고 Node tree, javascript event는 뭘까?

Elice Today's TIL 🎉

메인 키워드 : DOM, Node, Javascript Event !!

이미지 출처 : elice 코딩 [SW 엔지니어 트랙] 의 학습자료에서 발췌

배울 내용 확인하기

DOM

객체 지향 모델로써 구조화된 문서를 표현하는 형식으로,

프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스

이벤트

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 가리키는 말로,

자바스크립트는 이것에 반응하여 특정 동작을 수행할 수 있게 된다.

1. DOM 이란?

DOM 이란?

줄글로 되어있는 문서를 위 그림과 같은 트리로 바꿔주는 것이라 이해하면 된다.

이미지 출처 : elice 코딩 [SW 엔지니어 트랙] 의 학습자료에서 발췌

DOM = 문서 객체 모델(Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식

HTML 문서에 대한 인터페이스

DOM은 XML이나 HTML 문서에 대한 프로그래밍 인터페이스를 제공한다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하고, 문서의 구조화된 표현을 통해서

프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

DOM의 종류

Core DOM : 모든 문서 타입을 위한 DOM 모델
HTML DOM : HTML 문서를 위한 DOM 모델 (아마도 우리가 가장 많이 사용할 것)
XML DOM : 문서를 위한(XML 문서를 위한) DOM 모델

HTML DOM

HTML 문서를 조작하고 접근하는 표준화된 방법

모든 HTML 요소는 HTML DOM을 통해 접근 가능

즉, HTML을 조작하고 싶으면 HTML DOM으로 다 조작할 수 있다는 이야기!

XML DOM

(HTML DOM과 마찬가지로) XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의

모든 XML 요소는 XML DOM을 통해 접근 가능

Document 객체

Document 객체는 웹 페이지(웹 페이지 자체!)를 의미한다.

웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는

반드시!! Document 객체부터 시작해야 한다.

Document 객체를 사용해서 접근을 하나씩 하나씩 해나가는 방식을 사용해야 함

(이후 트리구조에서 자세한 설명 있을 예정)

Document 메소드

Document는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공하고 있다.

HTML 요소의 선택 (HTML 요소를 선택하는 방법)
HTML 요소의 생성 (HTML 요소를 생성하는 방법)
HTML 이벤트 핸들러 추가 (이벤트 핸들러를 추가하는 방법)
HTML 객체의 선택 (HTML 객체의 선택을 하는 방법)

HTML 요소의 선택

새로운 HTML 요소를 선택하기 위해 제공되는 메소드

메소드	설명
document.getElementById()	해당 아이디의 요소를 선택
document.getElementsByClassName()	해당 클래스에 속한 요소를 선택
document.getElementsByName()	해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
document.querySelector()	해당 선택자로 선택되는 요소를 1개 선택

가장 먼저 알아볼 것은 HTML 요소를 선택하는 메소드들입니다.

첫번째로 Document 객체가 가지고 있는 " .get " 으로 시작하는 다양한 메소드들을 이용해서 선택을 하실수도 있고,

두번째로 querySelector 라고 하는 것을 이용하실 수도 있습니다.

querySelector는 우리가 CSS에서 사용하는 것과 동일한 querySelector를 의미합니다.

getElementById() 는 HTML 요소가 가지고 있는 아이디 속성을 이용해서 요소를 선택하고,

getElementsByClassName() 은 해당 클래스에 속한 요소를 선택합니다.

getElementsByName() 은 해당 name 속성값을 가지고 있는 요소를 선택하는 메소드 입니다.

이렇게 5가지의 메소드들을 소개 드렸지만, 이 이외에도 선택을 하는 방법에 대한 메소드는 여러가지가 존재합니다.

++ Tip!! ++

getElementById 를 제외한 나머지 선택 메소드들은 Element 뒤에 "s" 가 붙습니다!

(getElementById 만 "Element" !! 나머지는 "Elements" !!)

Id는 하나만 존재할 수 있기 때문입니다.

HTML 요소의 생성

HTML 요소를 생성하기 위해 제공되는 메소드

메소드	설명
document.createElement()	지정된 HTML 요소를 생성
document.write()	HTML 출력 스트림을 통해 텍스트를 출력

HTML 요소의 생성에 대한 메소드들입니다.

우리가 HTML 요소를 생성하기 위해서는 createElement(), write() 두가지 함수를 이용할 수 있습니다.

createElement()는 지정된 HTML 요소를 생성하는 방식이고

write()는 출력 스트림을 통해서 텍스트를 출력한다고 합니다.

createElement()와 write()는 차이점이 있는데,

createElement()는 HTML Object를 넘긴다고 보시면 되고

write()는 단순히 텍스트를 출력하게 된다는 것으로 생각해 주면 되겠습니다.

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성

속성	설명
요소.onclick = function(){}	마우스 클릭 이벤트와 연결될 이벤트 핸들러

HTML에 이벤트 핸들러를 추가하는 방법에 대해서 알아보도록 하겠습니다.

이벤트 핸들러를 추가하는 방법!!

요소는 onclick 이라고 하는 속성값을 가지고 있습니다.

이 onclick이라고 하는 속성값에 함수를 대입하게 되면 해당 요소를 클릭했을 때 함수가 실행되는 방식입니다.

onclick 이외에도 다양한 이벤트들이 있고,

그 이벤트들에 이런식(앞에서 봤던 " 요소.onclick = function(){} " 같은 형식)으로 함수를 적어주면

그 이벤트가 발생했을 때 해당 함수가 실행되는 식으로 이벤트 핸들러를 추가해줄 수가 있습니다.

DOM의 트리 구조 (HTML -> DOM)

<!--Example-->

<!DOCTYPE html>
    <html>
        <head>
		<title>자바스크립트 기초</title>
        </head>
        <body>
        	<article>
            	<header>header</header>
                <section>
                	<header>header 1</header>
                    section 1
                </section>
            </article>
        </body>
    </html>

DOM이 어떻게 해서 생성되는지에 대해 말씀드리겠습니다.

HTML이 DOM으로 변환이 되는 과정에 대한 겁니다.

먼저 HTML 문서(위의 코드블럭) 부터 살펴볼텐데요,

HTML 문서를 보면 가장 위에 <!DOCTYPE html> 이라고 하는 부분이 있구요.

아래쪽부터 보시면 <html> 태그가 쌍으로 묶여있는 것을 보실 수 있습니다.

<head> 도 마찬가지죠? <body> 도 마찬가지입니다. 다른 요소들도 마찬가지로 쌍으로 묶여 있습니다.

이렇게 쌍으로 묶여져 있는 구조를

우리가 이 그림과 같은 " 트리 구조 " 로 표현을 해줄 수 있습니다.

이제 다시 한번 해석을 해보도록 할게요.

먼저, 이 <html>이 열려서 </html>에서 끝나죠.

<html> 부터 </html> 까지의 코드 전체가 <html>의 하위에 포함이 되게 됩니다.

<head> 도 시작과 끝(</head>) 지점이 있으며 포함이 되고, <head> 아래에는 <title>이 존재합니다.

<title> 도 <title> 에서 시작해서 </title> 에서 끝이 나죠.

이 <title>은 다시 " 자바스크립트 기초 " 라는 것을 포함을 하게 됩니다.

해서, 이미지의 트리구조를 보시면은

트리구조의 이 부분이 방금 전 설명드린 부분이 되는거죠.

가장 아래쪽의 " 자바스크립트 기초 " 가 가장 안쪽에 있는 값이구요

그 다음에 <title> 이 그 바깥쪽, 그 다음에 <head> 가 더 바깥쪽에 있죠.

그리고 <head>를 포함하는 것인 <html>이 있습니다.

이렇게 해서 이 계층화된 구조를 나타내주는 것이 DOM이 하는 역할이라고 볼 수가 있겠습니다.

<body> 같은 경우에는 좀 더 복잡한 구조를 가지고 있는데요,

<body> 에서 우리가 주목할 부분은 이 <article> 같은 부분인데 <article> 부분을 보시면

<header> 도 있고 <section> 도 있죠.

그림을 보시면 <header>와 <section>이 동일한 레벨에 존재하는 걸 보실 수 있습니다.

이러한 과정을 거쳐서 HTML이 DOM 으로 변환이 되게 됩니다.

이 계층화된 구조를 머릿속에 그리는 것이 굉장히 중요하므로

여러분들이 이 부분을 꼭 숙지하고, 태그가 열리고 닫히는 과정에서 계층의 form 구조를 파악할 수 있습니다.

Plus !!

DOM에 대한 설명

DOM은 Document Object Model의 약자로, 문서 객체 모델을 의미합니다.
DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식입니다.
DOM은 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 합니다.
DOM은 프로그래밍 언어와 독립적입니다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능합니다.

2. 자바스크립트와 DOM

DOM 요소의 선택

// Example

// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");

// 아이디가 "id"인 요소를 선택
var selectedItem = document.getElementById("id");

// 클래스가 "odd"인 요소를 선택
var selectedItem = document.getElementsByClassName("odd");

// name 속성값이 "first"인 요소를 선택
var selectedItem = document.getElementsByName("first");

DOM을 선택하는 부분을 알아보도록 하겠습니다.

우리가 앞서서 Document가 가지고 있는 메소드들 중에

getElementsByTagName, getElementById 같은 것들을 배웠는데요.

우리가 HTML 요소 <li> 를 선택하고 싶으면, document.getElementsByTagName("li") 를 이용해서

<li> 요소를 위 코드처럼 selectedItem 요소에 담을 수 있습니다.

마찬가지로 아이디가 "id"인 요소를 선택하고 싶으면, document.getElementById("id")로

값을 변수에다가 담아줄 수 있고요.

그리고 이렇게 아이디와 요소의 이름 뿐만 아니라 클래스 이름이 "odd" 인 경우(document.getElementsByClassName("odd")),

Name 속성값이 "first" 인 요소(document.getElementsByName("first")).

이런식으로 여러가지 메소드들을 이용해서 우리가 요소들을 변수에 담아줄 수가 있습니다.

DOM 요소의 스타일 변경

// Example

// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");

// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";

이번에는 요소를 선택하는 게 아니라, 선택한 요소의 스타일을 변경하는 것을 알아볼 건데요.

먼저, 변경을 하기 위해서는 뭘 변경할지를 알아야 하니까 요소를 선택해줘야겠죠?

예시 코드에서는 document.getElementById("even") 을 이용해서 "even" 이라고 하는 아이디를 가지고 있는 요소를 선택했습니다.

그리고 변수에 담긴 요소의 style 이라는 속성의 color 라고 하는 속성값을 red로 변경해주고 있습니다.

이러면 style 속성에 있는 color CSS가 red 로 변경이 됩니다.

DOM 요소의 내용 변경

// Example

// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");

// 선택된 요소의 내용을 변경
str.innerHTML = "요소의 내용을 바꿉니다";

이번에는 내용을 변경하는 것 입니다. style이 아닌 내용을 변경하는 것도 할 수 있습니다.

마찬가지로 document.getElementById("text") 을 이용해서 선택을 해 주고요.

그 다음으로 내용을 변경하기 위해서 " innerHTML " 라는 속성을 활용할 수 있겠습니다.

아까 봤던 계층의 구조를 연상해 봤을 때 이 innerHTML이

text 아래쪽에 있는 트리 부분을 변경해줄 수 있습니다.

이 부분에 "요소의 내용을 바꿉니다" 를 넣어주면

이 부분, 즉 text 아래쪽에 있는 트리 부분에 "요소의 내용을 바꿉니다" 라고 하는 문자열이 들어가게 되는 것이죠.

[실습 핵심 요약] DOM 요소의 선택

DOM은 문서의 구조화된 표현(structured representation)을 제공하여

프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 합니다.

document.getElementsByTagName();  // 태그 이름 선택
document.getElementById();   // 아이디 선택
document.getElementsByClassName();   //클래스 선택
document.getElementsByName();  // name 속성값 선택

++ 만약 요소들을 document.write()를 이용해 화면에 바로 출력한다면 텍스트가 아닌 Object 객체가 출력되는 것이 정상입니다.

[실습 핵심 요약] DOM 요소의 스타일 변경

DOM은 문서의 구조화된 표현(structured representation)을 제공하여
프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 합니다.

이번엔 DOM을 이용하여 요소의 스타일을 변경해봅시다!

selectedItem.style.color ="변경할 내용" // 선택된 요소의 색깔을 바꿉니다.

[실습 핵심 요약] DOM 요소의 내용 변경

DOM은 문서의 구조화된 표현(structured representation)을 제공하여
프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 합니다.

이번엔 DOM을 이용하여 요소의 내용을 변경해봅시다!

selectedItem.innerHTML = "변경할 내용"// 선택된 요소의 내용을 바꿉니다.

3. Node 객체

노드(Node) 와 노드 트리

노드는 HTML DOM 에서 정보를 저장하는 계층적 단위를 의미합니다.

노드 트리는 노드들의 집합으로 이루어져 있으며,

노드간의 관계를 나타냅니다.

(오른쪽의 그림과 같은것이 노드트리라고 할 수 있습니다.)

자바스크립트에서는

HTML DOM을 이용하여 노드 트리에 포함된

모든 노드에 접근할 수 있습니다.

(오른쪽에 있는 모든 요소들에 접근해서 값을 가지고 온다거나, 속성을 변경한다거나 등의 행위를 하실 수 있다는 이야기죠!)

노드 간의 관계

노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.

방금전에 보셨던 노드 트리와 같이 모든 노드는 서로 계층적인 관계를 맺고 있습니다.

루트 노드가 있고, 부모 노드, 자식 노드, 이런식으로 서로 관계를 맺고 있습니다.

루트 노드 HTML은 HEAD를 첫번째 자식 노드로 가지고 있고요,

HEAD는 HTML을 부모노드로서 가지고 있습니다.

BODY도 마찬가지입니다. BODY도 자식요소로서 HTML의 자식이 되고요.

동시에 HTML은 BODY의 부모 노드가 됩니다.

그리고 HEAD와 BODY가 같은 계층에 속해있죠?

그래서 이 둘은 서로 '형제 노드'로 부를 수 있습니다.

노드의 종류

문서 노드(document node) = HTML 문서 전체를 나타내는 노드.
요소 노드(element node) = 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드.
주석 노드(comment node) = HTML 문서의 모든 주석은 주석 노드. (주석 노드는 잘 사용하지 않습니다. 주석노드는 보통 우리가 코드에다가 메시지를 남기기 위해 사용하는 것이기 때문에 자바스크립트에서 굳이 변경할 사유는 별로 없습니다.)
속성 노드(attribute node) = 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다. (우리가 노드 계층구조를 그렸다고 치고, head 노드가 있고 그 아래 자식 노드로서 title 노드가 있다고 가정해 본다면 그 head 노드가 가지고 있는 속성은 자식 노드에는 포함이 되지 않는다는 이야기입니다.)
텍스트 노드(text node) = HTML 문서의 모든 텍스트는 텍스트 노드. (HTML 문서의 모든 텍스트는 텍스트 노드로 이루어져 있습니다. 예를 들어서 <p>Hello World!</p>와 같이 p태그 안에 내용이 있다면 이 내용(= Hello World!)이 바로 텍스트 노드로서 동작을 하게 됩니다. 이 텍스트 노드는 자식 요소가 될 수도 있습니다.)

노드의 값

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

(대표적으로 이름, 값, 타입!! 이렇게 3가지에 접근할 수 있습니다.)

nodeName (이름), nodeValue (값), nodeType (타입)

// Example

// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName;

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue;

// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType;

먼저 노드를 선택한 다음에(document.childNodes[0] || document.getElementById("heading"))

해당 노드의 이름을 알고 싶으면 nodeName 이라는 속성,

값을 알고 싶으면 nodeValue 라는 속성,

타입을 알고 싶으면 nodeType 이라는 속성을 통해서 해당 노드의 정보들을 얻어낼 수 있습니다.

Plus !!

노드(Node)와 노드 트리에 대한 설명

노드란 DOM에서 정보를 저장하는 계층적 단위입니다.
노드 트리란 노드들의 집합으로, 노드 간의 관계를 나타냅니다.
자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있습니다.

[실습 핵심 요약] 노드의 값 접근 (타입)

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

DOM을 이용하여 노드의 타입에 접근해봅시다.

childNodes[0].nodeType;  // 자식 노드 중에서 첫 번째 노드의 이름을 선택

nodeType 프로퍼티 값

nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현됩니다.

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

요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9

4. 이벤트(Event)

이벤트(Event)란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 이벤트라고 합니다.

여기서 이야기하는 사건은 굉장히 다양합니다.

예를 들어서 우리가 그림처럼 어떤 요소에 마우스를 올렸을 때나

(클릭했을 때가 아닌 올렸을 때도 이벤트가 될 수 있습니다!)

마우스를 움직이는 행위도 이벤트가 됩니다.

그리고 마우스를 클릭하는 것도 이벤트가 됩니다.

이런 다양한 이벤트들을 이용해서

우리가 웹 브라우저에서 발생하는 이벤트에 자바스크립트가 반응하게 해 특정 동작을 수행시킬 수가 있습니다.

=> 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

예를 들어서 클릭을 했을 때 무슨 일이 일어난다거나,

아니면 마우스를 올렸을 때(마우스를 올리는 행위 = "hover" 라고 한다), 즉 hover를 했을 때 일어나는 동작을 만든다거나

이러한 다양한 동작들을 정의해 줄 수 있습니다.

이벤트 타입

발생한 이벤트의 종류(폼, 키보드, 마우스, HTML DOM, Window 객체 등)

<!--Example-->

<!--마우스 클릭 이벤트 예시-->
<p onclick="changeText(this)">여길 클릭하세요!</p>

<script>
function changeText(element){
	element.innerHTML = "내용이 바뀌었습니다!";
}
</script>

이벤트 타입은 굉장히 다양한데요,

폼, 키보드, 마우스, HTML DOM, Window 객체 등을 통해서 접근을 할 수 있습니다.

예시코드에서 가장 대표적인 예시인 마우스 클릭 이벤트를 보여주고 있는데요.

클릭이 발생했을 때 changeText 함수를 실행하라고 하는 내용입니다.

changeText 함수를 실행하고, 예시코드에서의 this는 p태그에서 나온 DOM 객체의 자기 자신을 얘기합니다.

changeText의 this 자리에 element가 들어가 있죠.

그래서 element의 innerHTML을 바꾸면 "내용이 바뀌었습니다!" 라고 나오는거죠.

자기 자신은 p태그를 의미하기 때문에

p태그의 innerHTML이 변경되면 "여길 클릭하세요!" 라는 부분이 "내용이 바뀌었습니다!" 라는 내용으로 변경되겠죠!

이벤트 핸들러

이벤트 핸들러는 이벤트가 발생했을 때 그 처리를 담당하는 함수 입니다.

지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 (자동으로) 실행시켜 준다.

(우리가 등록해주기만 하면 웹 브라우저가 알아서 실행시켜 줍니다!)

// Example

// 이 함수는 HTML 문서가 로드될 때 실행됨.
window.onload = function(){
	// 아이디가 "text"인 요소를 선택함.
    var text = document.getElementById("text");
    
    text.innerHTML = "HTML 문서가 로드되었습니다.";
}

예시 코드에서,

window의 onload라고 하는 이벤트에 우리가 이 함수를 정의해주면

window가 로딩이 되었을 때(즉, onload가 되었을 때) 이 함수의 내용물이 실행이 됩니다.

그래서 지금 이 경우에는 getElementById를 이용해서 text 라고 하는 요소를 선택하고

해당 text에 "HTML 문서가 로드되었습니다." 라는 것을 표시해주는 내용이 들어가 있네요.

Plus !!

이벤트(Event)에 대한 설명

이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 말합니다. 브러우저는 이벤트를 감지하여 사용자와 웹페이지 간의 상호 작용을 가능하게 합니다.
발생한 이벤트의 종류를 이벤트 타입이라고 합니다.
자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다.
이벤트가 발생했을 때 그 처리를 담당하는 함수를 이벤트 핸들러라고 합니다.

[실습 핵심 요약] 이벤트 핸들러 1

이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 말합니다.

자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다.

작성된 이벤트 핸들러는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있습니다.

객체나 요소에 이벤트 핸들러를 등록하는 방법은 크게 2가지입니다.

자바스크립트 코드에서 프로퍼티로 등록하는 방법
HTML 태그에 속성으로 등록하는 방법

// 1. 자바스크립트 코드에서 프로퍼티로 등록하는 방법

window.onload = function() { } // 이 함수는 HTML 문서가 로드될 때 실행됨.

// 2. HTML 태그에 속성으로 등록하는 방법

<p onclick="this.innerText = '클릭!'">클릭해 보세요!</p>

[실습 핵심 요약] 이벤트 핸들러 2

객체나 요소의 메서드에 이벤트 핸들러를 전달할 때는 다음 메서드를 사용할 수 있습니다.

addEventListener()

// addEventListener 사용법

대상객체.addEventListener(이벤트명, 실행할이벤트핸들러, 이벤트전파방식)

이번 시간에는 엘리스 부트캠프의 내용을 기반으로 DOM과 이벤트에 대한 내용을 소개하며 상세히 정리해 보았습니다.

다음에는 오늘 배운 것을 이용해 웹 페이지를 만들어보는 데에 대한 내용을 정리해 올리겠습니다.

수정사항이나 추가하면 좋을 것 같은 점을 찾으셨다면! 댓글에 남겨주시면 감사할 것 같습니다😉

한동안 최대한 자주 올려보도록 할게요

감사합니다!

'TIL > 엘리스 SW 엔지니어 트랙 2기' 카테고리의 다른 글

리액트(React) Effect Hook 엘리스 코딩 TIL (20220630) (0)	2022.07.04
엘리스 코딩 TIL (리액트, 20220624) (0)	2022.06.30
[5주차] 20220411 엘리스 TIL (비동기 복습, Node.js) (0)	2022.06.30
[4주차] 20220429 엘리스 TIL (JavaScript 심화) (0)	2022.06.30
[4주차] 20220428 엘리스 TIL (JavaScript 심화) (0)	2022.06.30

DOM의 뜻은?! 그리고 Node tree, javascript event는 뭘까?

Elice Today's TIL 🎉

메인 키워드 : DOM, Node, Javascript Event !!

배울 내용 확인하기

1. DOM 이란?

DOM 이란?

HTML 문서에 대한 인터페이스

DOM의 종류

HTML DOM

XML DOM

Document 객체

Document 메소드

HTML 요소의 선택

HTML 요소의 생성

HTML 이벤트 핸들러 추가

DOM의 트리 구조 (HTML -> DOM)

Plus !!

2. 자바스크립트와 DOM

DOM 요소의 선택

DOM 요소의 스타일 변경

DOM 요소의 내용 변경

[실습 핵심 요약] DOM 요소의 선택

[실습 핵심 요약] DOM 요소의 스타일 변경

[실습 핵심 요약] DOM 요소의 내용 변경

3. Node 객체

노드(Node) 와 노드 트리

노드 간의 관계

노드의 종류

노드의 값

Plus !!

[실습 핵심 요약] 노드의 값 접근 (타입)

4. 이벤트(Event)

이벤트(Event)란?

이벤트 타입

이벤트 핸들러

Plus !!

[실습 핵심 요약] 이벤트 핸들러 1

[실습 핵심 요약] 이벤트 핸들러 2

'TIL > 엘리스 SW 엔지니어 트랙 2기' 카테고리의 다른 글

관련글

댓글

티스토리툴바