판봉 개발 일기
[01]Browser[document] - javascript 본문
이번 시간에는 javascript에서 제어 가능한 DOM에 대해서 알아보겠습니다.
DOM
먼저 자바스크립트가 돌아가는 플랫폼을 "호스트"라고 부릅니다.
DOM은 문서 객체 모델 이라고 합니다.
(Document object Model)
DOM은 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다.(참고로 수정 가능)
브라우저는 HTML태그를 DOM(문서를 객체화한 구조)로 가지고 있씁니다.
브라우저에선 DOM API라는걸 제공해주는데
여기서 API란 Application Programming Interface를 의미합니다.
여기서 중요한것은 Application도 아닌 Interface입니다.
한마디로 DOM은 브라우저 엔진엔 올라가있는 메모리 구조입니다.
DOM TREE
HTMl에는 무수히 많은 태그들이 존재하는데 DOM에 따르면 모든 HTML 태그는 객체입니다.
이런 객체들은 자바스크립트를 통해 접근할 수 있습니다.
그리고 DOM은 트리구조로 이루어져 있습니다.
트리(Tree)가 뭔지 모르시는 분들을 위해 간단하게 설명을 드리자면 상/하위 계층 구조를 가지고 있는 것으로
최상단이 root(뿌리), 최하단이 leaf(잎), 각 하나의 항목을 노드(node,단말)이라고 합니다.
참고로 위에 있는 #text는 엔터를 쳐서 내린 공간을 의미합니다.
DOM 탐색하기
DOM을 이용하면 요소와 요소의 컨텐츠에 뭐든 할 수있는데 그러기 위해선 먼저 접근을 해야합니다.
DOM에서 하는 모든 것은 document객체에서 시작합니다.
document를 쓰고 "."을 쓰면 무수하게 많은 것들이 나옵니다.
<html>
<body>
<div>시작</div>
<ul>
<li>
<b>항목</b>
</li>
</ul>
<div>끝</div>
<!--script태그를가장하단에-->
<script>
// body밑에 있는 하위노드들을 탐색
// for (let node of document.body.childNodes) {
// console.log(node);
// }
// 첫번째 자식노드, 마지막 자식노드
console.log(document.body.firstChild);
console.log(document.body.lastChild);
// body 밑에 있는 하위 요소(element)들을 탐색
for (let elem of document.body.children) {
console.log(elem); // DIV, UL, DIV, SCRIPT
}
</script>
</body>
</html>
위 코드를 브라우저상에서 Console로 보았을때 저렇게 출력이 됩니다.
자식 노드는 바로 아래의 자식요소를 나타내며 후손 노드는 중첩관계에 있는 모든 요소를 의미합니다.
그리고 위 코드를 잘보면 마지막쪽에 for - of 를 쓴것을 보실 수 있는데
위에 있는 것들은 배열이 아닌데도 사용할수가 있습니다.
그 이유는 반복이 가능한(iterable, 이터러블) 유사 배열 객체인 컬렉션 이기 때문에 가능합니다.
하지만 배열 메소드는 여전히 쓸수 없죠.
형제와 부모 노드
같은 부모를 가진 노드는 형제(sibling)노드라고 부릅니다.
HTML에서 <head>와 <body>는 대표적인 형제 노드이죠.
다음 형제 노드에 대한 정보는 nextSibling, 이전 형제 노드에 대한 정보는 previousSibling, 부모 노드에 대한 정보는 parentNode를 이용하여 참조할 수 있습니다.
<html>
<body>
<div>시작</div>
<ul>
<li>
<b>항목</b>
</li>
</ul>
<script>
console.log(document.body.childNodes[1]); // div
const div = document.body.childNodes[1];
// 노드.parentNode: 부모 노드를 탐색
console.log(div.parentNode); // body
// 노드.nextSibiling/노드.previousSiblling: 다음, 이전 노드 탐색
console.log(div.nextSibling); // #text "\n "
console.log(div.nextSibling.nextSibling); // ul
console.log(div.previousSibling); // #text "\n "
</script>
</body>
</html>
보시면 저렇게 출력이 된걸 확인할 수 있습니다.
Table Search
우리는 HTML에서 table을 사용할 수 있다는 것을 알았습니다.
그렇다면 table은 어떻게 javascript에서 찾을까요?
<html>
<body>
<table>
<tr>
<td>일</td>
<td>이</td>
</tr>
<tr>
<td>삼</td>
<td>사</td>
</tr>
</table>
<script>
// 테이블을 가져옴
const table = document.body.children[0];
// '이'가 적힌 td를 가져옴(첫 번째 줄, 두 번째 칸)
let td = table.rows[0].cells[1];
td.style.backgroundColor = "red"; // 강조
</script>
</body>
</html>
위와 비슷하게 사용하면 됩니다.
참고로 테이블 내에 여러개의 <tbody>태그가 존재하는게 가능한데, 브라우저는 최소한 하나는 무조건 있어야 한다고 생각을 하기 때문에 HTML문서에 <tobdy>가 없어도 브라우저는 자동으로 추가해줍니다.
예제를 하나 살펴보겠습니다.
코드를 어떻게 작성해야 할까요?
여러가지 방법이 있지만 저는 이렇게 맨 처음에 작성을 해봤습니다.
행과 열이 같은 개의 숫자일때 마다 색칠이 되므로 중첩for문을 사용하여 해당 행과 열에 맞추어
배경색을 바꿔봤습니다.
그런데 더 간단한 방법이 있었습니다.
방식은 비슷하지만 조금더 코드의 줄이 짧아졌죠.
참고로 저 코드는 자동완성이 안되는데 그것은 tobody라는 변수가 실행이 되기 전까지는 table인지
tbody 인지 div인지 ul 태그인지 모르기 때문입니다.
그래서 타입스크립트를 쓰는 사람도 있는데 아직까지 저는 초보라 자바스크립트부터 먼저 공부해야합니다.ㅠㅠ
그럼 다음 글에서 찾아 뵙겠습니다.
'JAVA 웹개발 과정' 카테고리의 다른 글
| [03]Browser[document] - javascript (0) | 2021.08.12 |
|---|---|
| [02]Browser[document] - javascript (0) | 2021.08.12 |
| javascript-array-method2[0810] (0) | 2021.08.10 |
| Javascript(js)-Array(배열)에 대하여 [ 0809] (0) | 2021.08.09 |
| javascript-Object[0806] (0) | 2021.08.06 |
