본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 13 DOM and Layout Trees

by Write and Remember 2019. 5. 6.

 

자바스크립트 핵심 컨셉 33가지

 

Chapter 13 DOM and Layout Trees

 

이번 장에서는 DOM에 대해 살펴보자

 

DOM(Document Object Model)은 브라우저에서

 

HTML 및 XML 문서를 읽는 방법을 나타내는 인터페이스다.

 

DOM은 자바스크립트가 Web을 조작, 구조화, 스타일화 하게 한다.

 

또한 브라우저가 HTML 문서를 읽은 후에 DOM Tree라는 모델을 생성한다.

 

DOM Tree는 객체의 트리로 구조화되어 있다.

 

출처: https://medium.freecodecamp.org/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d

 

Document: 모든 HTML 문서를 취급한다.

 

Elements: HTML, XML 내부의 모든 태그는 DOM 요소(element)로 바뀐다.

 

Text: 모든 태그(tag)의 내용

 

Attributes: 특정 HTML 요소(element)의 모든 속성

 

DOM에는 메서드(methods)들이 많은데

 

이 메서드들은 nodes(elements), events들을 연결해준다.

 

 

우선 주요 메서드들을 살펴보자.

 

getElementById()

 

전달된 Id가 들어있는 element를 반환한다.

 

const Start = document.getElementById('start');

 

getElementsByClassName()

 

전달된 특정 class를 포함하는 모든 요소(elements)의

 

HTMLCollection을 반환한다.

 

const Container = document.getElementsByClassName('container');

 

getElementsByTagName()

 

전달된 태그의 모든 요소(elements)를 반환한다.

 

const buttons = document.getElementsByTagName('button');

 

querySelector()

 

특정 CSS selector가 전달된 첫 번째 요소(elements)를 반환한다.

 

const resets = document.querySelector('#reset')

 

querySelectorAll()

 

특정 CSS selector가 전달 된 모든 요소(elements)를 반환한다.

 

const myButtons = document.querySelectorAll('#buttons');

 

createElement()

 

HTML 페이지에 새로운 요소(element)를 생성한다.

 

setAttribute()

 

HTML 요소(elements)에 대한 새 속성을 설정할 수 있다.

 

 

이번에는 주요 이벤트(Events)를 살펴보자

 

click

 

사용자가 특정 요소(elements)를 클릭했을 때 어떤 행동이 실현된다.

 

start.addEventListener('click', function(event) {} );

 

select

 

특정 요소(elements)가 선택 될 때 무언가를 전달하려는 경우를 위한 것이다.

 

start.addEventListener('select', function(event) {} );

 

 

이제 DOM을 탐색하고 속성(property)을 사용하는 방법을 살펴보자.

 

.childNodes

 

주어진 요소(elements)의 child nodes의 nodeList를 반환한다.

 

const container = document.querySelector('.container');

const getContainerChilds = container.childNodes;

 

.firstChild

 

주어진 요소(element) 첫 번째 child를 반환한다.

 

const container = document.querySelector('.container');
const getFirstChild = container.firstChild;

 

.nodeName

 

주어진 요소(element)의 name을 반환한다.

 

.nodeValue

 

현재 노드의 값을 반환하거나 설정하므로 텍스트 , 주석에만 적용된다.

 

.nodeType

 

주어진 요소(element)의 type을 반환한다.

 

 

오직 요소(elements)만 반환하는 속성들을 살펴보자

 

.parentNode

 

주어진 노드의 부모(parent)를 반환한다.

 

.firstElementChild

 

주어진 요소(element)의 첫 번째 자식 요소(first child element)를 반환한다.

 

.lastElementChild

 

주어진 요소(element)의 마지막 자식 요소(last child element)를 반환한다.

댓글0