오늘 튜터님께서 추천해준 모던자바스크립트부분중에서 항상 궁금했던 DOM에 대해서 정리를 하려고 한다.
사실 오늘 처음 제대로 공부하는거라 분명 내가 이해 한것 중 틀린 부분이 있겠지만 점차 내가 해보고 틀린 것들을 수정해보려고한다.
<DOM 기본>
: DOM이란 html구조를 트리형식으로 만들어 놓은 것이다.
그래서 이 구조들을 통해서 원하는 특정 요소를 불러다가 script에서 사용할 수 있다.
일단 <html> // <head>,<body>등과 같은 태그들은 요소노드라고 하며, 트리 구조를 구성한다.
ㄴ루트노드 ㄴ루트노드의 자식
텍스트노드와, 공백만 있는 텍스트 노드는 개발자 도구에선 보이지 않는다.
*여기서 노드란? 확실하지 않지만 내가 이해하기론 하나의 내용을 가진 코드 줄을 노드라고 하는 것 같다.
( 나중에 잘못 이해한거라면 고치러 온다)
<html> = document.documentElement : dom 트리 꼭대기에 있는 <html>태그에 해당한다.
<body> = document.body : <body>에 해당하는 노드이다.
<head> = document.head : <head>에 접근할 수 있다.
<자식노드 탐색하기>
1. child node = 부모노드 바로 아래위치한 태그들 >>>> <head> 와 <body>는 <html>요소의 자식 노드이다,
descendants = 후손노드 , 자식노드의 모든 자식노드 등이 후손 노드가 된다.
==코드예시==
<html>
<body>
<div>시작</div>
<ul>
<li>항목</li>
</ul>
<div>끝</div>
<script>
for (let i = 0; i < document.body.childNodes.length; i++) {
alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ... , SCRIP
}
</script>
...추가 내용...
</body>
</html>
<DOM컬렉션>
1. childNodes
: childNodes는 배열 같아 보이는데, 배열이 아닌 유사 배열 객체인 컬렉션이다.
ⓐ for..of 를 사용할 수 있습니다.
===
for (let node of document.body.childNodes) {
alert(node); // 컬렉션 내의 모든 노드를 보여줍니다.
}===
** 그러나 컬렉션에 for in 반복문은 사용하지 말 것
for..in 반복문은 객체의 모든 열거 가능한 프로퍼티를 순회합니다.
ⓑ filter와 같은 배열 메서드를 사용할 수 없다 ( 배열이 아니기 때문에)
2. 형제(sibling) 노드
대표적인 예로는 <html>,<body>가 있다.
위쪽에서부터 아래쪽으로 다음 또는 우측 순서라고 생각하면 된다.
다음 형제 노드에 대한 정보는 nextSibling, 이전 형제 노드에 대한 정보는 previousSibling 프로퍼티
3.부모
부모 노드에 대한 정보는 parentNode 프로퍼티
=====
// <body>의 부모 노드는 <html>입니다
alert( document.body.parentNode === document.documentElement ); // true
// <head>의 다음 형제 노드는 <body>입니다.
alert( document.head.nextSibling ); // HTMLBodyElement
// <body>의 이전 형제 노드는 <head>입니다.
alert( document.body.previousSibling ); // HTMLHeadElement
*** document를 적고 기준이 되는 태그를 적어주어야한다.=====
<DOM탐색하기>
위의 두 이미지는 유사해보이지만 element라는 단어가 추가되어 있다(왼쪽에)
=> 이 왼쪽 이미지는 기존의 봤던 오른쪽 구조와 똑같지만 요소 노드만을 가르킨다.
쉽게 말해서 element가 붙어있다면 요소노드를 반환하고 node가 붙어있다면 종류에 상관없이 모든 노드들을 반환한다.
<html>
<body>
<div>시작</div>
<ul>
<li>항목</li>
</ul>
<div>끝</div>
<script>
for (let elem of document.body.children) {
alert(elem); // DIV, UL, DIV, SCRIPT
}
</script>
...
</body>
</html>=> childrenNode를 children으로 바꾸면 요소노드들만 출력되는것을 알 수 있다.
<table>
이 부분은 내가 이해하기 편하게
| 🚩 | ||
------> 행은 row 즉, row[1]: 2번째 줄
cells 그 행 안에서의 칸 위치 즉, cells[2]: 3번째 칸
▷ table.row[1].cells[3] 은 깃발 있는 곳이 된다.
'TIL✨' 카테고리의 다른 글
| class TIL(25) (1) | 2022.12.02 |
|---|---|
| 함수 TIL(24) (0) | 2022.12.01 |
| 심화 자바스크립트TIL(22) (0) | 2022.11.29 |
| 댓글 수정 기능 만들기 TIL(20) (1) | 2022.11.25 |
| 비밀번호 변경 , 내가 쓴 글 목록 불러오기 TIL(19) (0) | 2022.11.24 |
