동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

DOM은 종종 DOM 트리라고 하며 노드라고 하는 객체 트리로 구성됩니다. 이전 장에서 DOM (Document Object Model)의 개념, 콘솔을 사용하여 문서 객체에 액세스하고 속성을 수정하는 방법, HTML 소스 코드와 DOM의 차이점에 대해 살펴 보았습니다.

이 장에서는 JavaScript와 DOM 작업에 필수적인 HTML 용어를 검토하고 DOM 트리, 노드 및 가장 일반적인 노드 유형을 식별하는 방법에 대해 학습합니다.

더하여 콘솔을 넘어서 DOM을 대화식으로 수정하는 JavaScript 프로그램을 작성합니다.

HTML 용어

DOM 작업 방법을 이해하려면 HTML 및 JavaScript 용어를 이해해야 합니다. HTML 용어를 간단히 살펴 보겠습니다.

다음 HTML 요소를 살펴 보겠습니다.

<a href="index.html">Home</a>

여기에는 index.html에 대한 링크 인 앵커 요소가 있습니다.

a는 태그입니다.
href는 속성입니다.
index.html은 속성 값입니다.
Home은 텍스트입니다.

결합된 여는 태그와 닫는 태그 사이의 모든 요소가 전체 HTML 요소를 만듭니다.

이전 장의 index.html을 사용하여 작업 할 것입니다.


<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>DOM 배우기</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

JavaScript를 사용하여 요소에 액세스하는 가장 간단한 방법은 id 속성을 사용하는 것입니다. 위의 링크를 id가 nav 인 index.html 파일에 추가해 보겠습니다.

<a id="nav" href="index.html">Home</a>

브라우저 창에서 페이지를 로드하거나 다시 로드하고 DOM을 확인하여 코드가 업데이트 되었는지 확인하십시오.

getElementById() 메서드를 사용하여 전체 요소에 액세스합니다. 콘솔에서 다음을 입력하십시오.

>document.getElementById('nav');

getElementById()를 사용하여 전체 요소를 검색했습니다. 이제는 nav 링크에 액세스 할 때마다 해당 객체와 메소드를 입력하는 대신 요소를 변수에 배치하여 보다 쉽게 작업 할 수 있습니다.

let navLink = document.getElementById('nav');

navLink 변수는 앵커 요소를 포함합니다. 여기에서 우리는 속성과 값을 쉽게 수정할 수 있습니다. 예를 들어 href 속성을 변경하여 링크가 이동하는 위치를 변경할 수 있습니다.

navLink.href = 'https://365ok.co.kr';

textContent 속성을 다시 지정하여 텍스트 내용을 변경할 수도 있습니다.

navLink.textContent = '웹학교';

이제 콘솔에서 또는 Elements 태그를 확인하여 요소를 볼 때 요소가 어떻게 업데이트 되었는지 확인할 수 있습니다.

navLink;

이는 웹 사이트의 프런트 엔드에도 반영됩니다.

페이지를 새로 고치면 모든 것을 원래 값으로 되돌립니다.

이 시점에서 문서(document) 메서드를 사용하여 요소에 액세스하는 방법, 요소를 변수에 할당하는 방법 및 요소의 속성과 값을 수정하는 방법을 이해해야 합니다.

DOM 트리 및 노드

DOM의 모든 항목은 노드로 정의됩니다. 많은 유형의 노드가 있지만 가장 자주 사용하는 세 가지 주요 노드가 있습니다.

Element nodes (요소 노드)
Text nodes (텍스트 노드)
Comment nodes (주석 노드)

HTML 요소가 DOM의 항목 일 때 요소 노드(element node)라고 합니다. 요소 외부의 모든 텍스트는 텍스트 노드(text node)이고 HTML 주석은 주석 노드(comment node)입니다. 이 세 가지 노드 유형 외에도 문서 자체는 문서(document) 노드이며 다른 모든 노드의 루트입니다.

DOM은 종종 DOM 트리(DOM tree)라고 하는 중첩 노드의 트리 구조로 구성됩니다. 부모, 자녀, 형제로 구성된 조상 가계도에 대해 잘 알고 있을 것입니다. DOM의 노드는 다른 노드와의 관계에 따라 부모, 자식 및 형제라고도 합니다.

데모를 위해, nodes.html 파일을 만듭니다. 텍스트, 주석 및 요소 노드를 추가합니다.


<!DOCTYPE html>
<html>
  <head>
    <title>DOM 노드 배우기</title>
  </head>

  <body>
    <h1>요소 노드</h1>
    <!-- 주석 -->
    텍스트 노드.
  </body>
</html>

html 요소 노드는 부모 노드입니다. head와 body는 형제, html의 아이들입니다.

body에는 모든 형제인 세 개의 자식 노드가 있습니다. - 노드 유형은 중첩 된 레벨을 변경하지 않습니다.

노드 유형 식별

문서의 모든 노드에는 nodeType 속성을 통해 액세스 되는 노드 유형(node type)이 있습니다. Mozilla Developer Network에는 모든 노드 유형 상수의 최신 목록이 있습니다.

다음은 이 장에서 다루는 가장 일반적인 노드 유형 차트입니다.

Node Type	Value	Example
ELEMENT_NODE	1	<body>요소
TEXT_NODE	3	요소의 일부가 아닌 텍스트
COMMENT_NODE	8	<!-- HTML 주석 -->

개발자 도구의 요소 탭에서 DOM의 모든 행을 클릭하고 강조 표시 할 때마다 == $ 0 값이 옆에 나타납니다. 이것은 $0을 입력하여 개발자 도구의 현재 활성 요소에 액세스하는 매우 편리한 방법입니다.

nodes.html의 콘솔에서 본문의 첫 번째 요소인 h1 요소를 클릭하십시오.

콘솔에서 nodeType 속성을 사용하여 현재 선택된 노드의 노드 유형을 가져옵니다.

>$0.nodeType;

선택한 h1 요소를 사용하면 1이 출력으로 표시되며 ELEMENT_NODE와 상관 관계가 있음을 알 수 있습니다. 텍스트와 주석에 대해서도 같은 작업을 수행하면 각각 3과 8을 출력합니다.

요소에 액세스하는 방법을 알면 DOM의 요소를 강조 표시하지 않고 노드 유형을 볼 수 있습니다.

>document.body.nodeType;

nodeType 외에도 nodeValue 특성을 사용하여 텍스트 또는 주석 노드의 값을 얻고 nodeName을 사용하여 요소의 태그 이름을 얻을 수 있습니다.

이벤트로 DOM 수정하기

지금까지 우리는 콘솔에서 DOM을 수정하는 방법을 보았습니다. 페이지를 새로 고칠 때마다 변경 사항이 손실됩니다. 이전 장에서는 콘솔을 사용하여 본문의 배경색을 업데이트했습니다. 이 장에서 배운 내용을 결합하여 클릭 할 때 대화형 단추를 만들 수 있습니다.

index.html 파일로 돌아가서 id가 있는 버튼 요소를 추가하겠습니다. 새 js 디렉토리에 새 파일에 대한 링크를 추가합니다. js/scripts.js


<!DOCTYPE html>
<html>
  <head>
    <title>DOM 배우기</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
    <button id="changeBackground">배경색 변경</button>
    <script src="js/script.js"></script>
  </body>
</html>

JavaScript의 이벤트는 사용자가 취한 행동입니다. 사용자가 요소 위에 마우스를 올려 놓거나 요소를 클릭하거나 키보드의 특정 키를 누르면 모든 이벤트 유형이 됩니다. 이 경우 사용자가 클릭 할 때 버튼을 듣고 조치를 수행 할 준비가 되어 있어야 합니다. 버튼에 이벤트 리스너(event listener)를 추가하여 이 작업을 수행 할 수 있습니다.

scripts.js를 만들고 새 js 디렉토리에 저장하십시오. 파일 내에서 먼저 button 요소를 찾아서 변수에 할당합니다.

let button = document.getElementById('changeBackground')

addEventListener() 메서드를 사용하여 클릭을 수신하고 한번 클릭 한 함수를 수행하도록 버튼에 지시합니다.


button.addEventListener('click', () => {
  // action will go here
})

마지막으로 함수의 내부에서 이전 장과 같은 코드를 작성하여 배경색을 Violet색으로 변경합니다.

document.body.style.backgroundColor = 'violet'

다음은 전체 스크립트입니다.


let button = document.getElementById('changeBackground')

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'violet'
})

이 파일을 저장하고 나면 브라우저에서 index.html을 새로 고칩니다. 버튼을 클릭하면 이벤트가 실행됩니다.

JavaScript 이벤트로 인해 페이지의 배경색이 violet색으로 변경되었습니다.

DOM 트리 및 노드 이해하기 > 실전홈페이지제작

DOM 트리 및 노드 이해하기

페이지 정보

댓글목록 0

웹학교

메인메뉴

고객센터

회원영역

회사정보