logo
  1. 프로그래밍 강의
  2. 자바스크립트와 웹 프론트엔드
  3. DOM 소개 및 탐색
〈 이전 강의 목록 다음 강의 〉
이어서 보기 처음부터 보기
다음 강의 보기: 단일 Element 선택 동영상 다시보기 이 강의 동영상에 대한 의견 보내기

DOM 소개 및 탐색

DOM, Document Object Model

  • 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것
    • Tree 형태를 따름 : 족보나 가계도와 비슷함

document object

  • javascript에서 document로 접근 가능
  • children에는 문서의 최상위 엘리먼트인 html이 존재

Element API

자식, 부모 엘리먼트에 접근하는 방법

  • .children : 해당 object의 자식 노드에 대한 배열
  • .parentNode : 부모 노드
  • .firstElementChild : 첫 자식 엘리먼트
  • .lastElementChild : 마지막 자식 엘리먼트

같은 레벨의 형제 엘리먼트에 접근하는 방법

  • .nextElementSibling
  • .previousElementSibling

실습에 사용된 코드

css

h1 {
    color : blue;
}

h2 {
    color : green;
}

p {
    margin-left: 10px;
}

html

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css.css">
        <style>
            #songwriter, #lyricist{ text-align: right; }
        </style>
    </head>
    <body>

        <h1>애국가</h1>

        <p id="songwriter">작곡 : 안익태</p>
        <p id="lyricist" style="color:red;">작사: 미상</p>

        <h2>1절</h2>
        <p class="lyric">
            동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.<br>
            무궁화 삼천리 화려강산대한 사람, 대한으로 길이 보전하세.
        </p>

        <h2>2절</h2>
        <p class="lyric">
            남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. <br>
            무궁화 삼천리 화려강산대한 사람, 대한으로 길이 보전하세.
        </p>


    </body>
</html>

〈 이전 강의
다음 강의 〉