DOM
DOM 이란
Document Object Model의 약자로
각 태그 하나하나를 하나의 자료로 보며
계층구조를 통해 인식하는 것을 의미합니다.
웹 페이지를 서버 재호출 없이 변형시킬 수 있는만큼
잘 익혀두어야할 기술입니다.
<body>
<div>
<h1>DOM</h1>
<p> 문서의 각 요소(태그객체)들을 구조화한 것 입니다.</p>
</div>
</body>원거리 선택자
태그에 지정한 id를 이용해서
특정 태그 하나를 선택할 수 있는 선택자입니다.
선택대상.getElementById("Id~~");
로 호출합니다.
<body>
<div>
<h1>선택자</h1>
<h2 id = "title">원거리 선택자</h2>
<ul>
<li>getElementById</li>
<li>getElementByTagName</li>
</ul>
<h2>근거리 선택자</h2>
<ul id = "list">
<li>parentNode</li>
<li>childNodes</li>
<li>chiledren</li>
<li>firstChild</li>
<li>priviousSibling</li>
<li>nextSibling</li>
</ul>
</div>
</body>다음과 같은 div를 body 내에 생성해보았습니다.
div의 자식들을 선택자를 이용해 호출하고
원하는 변경사항을 적용시켜보면서
DOM을 익혀보겠습니다.
window.onload = function() {
}
지금부터 쓰일 스크립트들은 모두
스크립트 태그 내에 window.onload 함수 내의 구역에서만 작성할 것입니다.
그렇게 함으로 모든 문서로딩이 끝난 다음
작업을 호출할 수 있습니다.
var myObj = document.getElementById("title");
console.log(myObj); // #title 요소를 가져옴
// 스크립트태그 내에서 호출을 이용해 파란색으로 바꾸보았습니다.
myObj.style.color = "blue";document.getElementById("title")을 이용해
title id인 h2를 호출했습니다.
// 특정 태그들을 들고오기
// 선택대상.getElementsByTagName("태그명");
var myList = document.getElementsByTagName("ul");
console.log(myList[0]);
// ul > li 를 지정한 효과
var myLi =
myList[0].getElementsByTagName("li");
console.log(myLi);.getElementsByTagName("태그명");을 이용해
원하는 태그를 선택할 수 있습니다.
// myLi.style.border= "속성"
// 을 이용해 myLi에 대한 테두리를
// 반복문으로 걸어보겠습니다.
for (var i = 0; i < myLi.length; i++) {
myLi[i].style.border= "1px dashed red";
}근거리 선택자
근거리 선택자는 선택된 태그와
붙어있는 태그들을 지목할 때 씁니다.
// ul#list
console.log(myList[1]);
// ul#list의 자식 전체(태그 + 텍스트)
console.log(myList[1].childNodes);
// ul#list의 자식(태그만)
console.log(myList[1].children);
// ul#list의 첫번째 자식(텍스트도 포함)
console.log(myList[1].firstChild);
// myList[1].children의 0번째 요소인
// li저장하기
var childLi = myList[1].children[0];
console.log(childLi);
// childLi(parentNode가 있는 li태그)
// 부모 다시 얻기
console.log(childLi.parentNode);
// nextSibling(형제태그)
// parentNode라고 적힌 li의 다음 형제
console.log(childLi.nextSibling);
// myList[1]에 대해서
// 자식 li 6개 중에
// 0, 2, 4번째 요소는 글씨색을 녹생으로
// 1, 3, 5번째 요소는 글씨색을 노란색으로 만드는 반복문을
// 작성해볼까요.
var Li1child = myList[1].children;
console.log(Li1child);
console.log(Li1child.length);
for(var j = 0; j < Li1child.length; j++) {
if(j % 2 == 0) {
Li1child[j].style.color = "green";
} else {
Li1child[j].style.color = "yellow";
}
}
원거리 / 근거리 선택자를 이용해
태그를 이렇듯 선택하는 기능을 잘 이해하고 넘어가야겠습니다.
일단은 여기까지 입니다.
배울 게 참 많네요.