[D+55] 다시공부한다... DOM....

 

D+55

-  다시 공부한다... DOM... -

( DOM 복습 )

 

---

 

 

이번에 스프린트 과제를 진행하면서

DOM을 이해하고 있어야 문제를 풀어나가는데 어려움이 없었겠지만

나는 DOM에 대한 나의 개념이 너무 부족한 것 같아 DOM에 대한 개념을 다시 한번 공부를 해보았다.

 

사실 당시 DOM에 대해서 배웠을때에도 무척이나 어려워했고

이해하기보단 달달달 외웠으니 이번에 어려운건 당연하다.

 

오늘은 일단 머릿속 어딘가에 남아있을 DOM에 대한 개념을 상기시키고

그 이후엔 시간을 쪼개서 DOM과제를 다시한번 복습하는 시간을 가졌다.

 

 

먼저 내가 작성했던 블로그 게시글을 봤는데

과거의 나.... 많이 모르고 있었구나 ㅋㅋㅋㅋㅋ

 

진짜 딱 말그대로 개념만 적고 이해를 포기한 암기 우선의 글이었다.

 

그래서 일단은 개념에 대해 손으로 직접 써보고 기본적인 용어들에 대해서 익혔다.

 

 

그 후에 코스에 게시되어있는 강의 영상을 보면서 직접 적어보는 시간을 가져보았다.

 

그런데 왠지 이해하지 못했던 이전과는 달리

이번에는 기본을 요구하는 내용들은 꽤 쉽게 이해할 수 있었다....

( 이해가서 다행이야... ㅜㅜ 😂)

 

자신감이 폭발해서 이전에 풀었던 과제들을 다시 보았는데

그것까지는 아직 무리인것 같다...ㅎㅎㅎ

 

심화적인 부분들은 일단 기본개념을 익힌 후에 

해결하도록 해야겠다.

 

 

---

 

 

DOM

 

 

Document

dom에서 엘리먼트를 만들거나 조회할 때 항상 document라는 아이가 붙는데

정확히 이게 왜 붙는지에 대해 궁금해하기만 하고 찾아보진 않았는데 알아야 할 것 같아 찾아보았더니

브라우저가 불러온 웹 페이지를 나타내며 DOM트리의 진입점 역할을 수행한다고 한다.

 

그렇기 때문에 콘솔창에 document라고 입력해보면 html에 관련된 내용들이 나오는 것을 확인할 수 있다.

 

자세히 더 확인하고 싶으면 console.dir(document)를  입력해보면 된다.

 

엘리먼트 확인하기

입력	기능
createElement	엘리먼트 생성
append / appendChild	자식요소 뒤에 엘리멑느 첨부 ( appendChild는 노드도 포함)
textContenct / innerHTML	엘리먼트안의 텍스트 값을 확인하거나 재할당할때 사용
remove / removeChild	엘리먼트 삭제
getElementsByTagName	태그를 통해 엘리먼트 조회
getElementById	id를 통해 엘리먼트 조회
getElementsByClassName	클래스 이름을 통해 엘리먼트 조회
querySelector / querySelectorAll	엘리먼트 조회

엘리먼트를 조회하거나 바꿔줄 때 사용하는 것들로 이것들은 변수에 넣어 사용해도 된다.