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>
-
<p class="lyric"> 문의
JHyun
2019.1.28 17:38
0
-
head first.elementchild
-
2016.12.3 00:48
0