데굴데굴

TIL: 2022-09-13 본문

Lesson/TIL

TIL: 2022-09-13

aemaaeng 2022. 9. 13. 23:11

⚙️ 오늘 배운 주제

DOM

🐹 오늘의 기분

대망의 DOM을 배웠다. 독학할 때부터 DOM, DOM하는데 검색을 해봐도 유튜브를 봐도 당최 무슨 소린지 모르겠어서 조금 걱정이 많았다. 알고 보니 계산기 구현하면서 textContent를 수정하고 막 했던게 DOM을 이용한 거였다. 학습하면서 이게 웹개발의 핵심이 아닐까하는 생각이 들었다. DOM으로 html 파일을 수정해봄으로써 비로소 'JavaScript는 웹사이트를 동적으로 만들어주는 언어'라는 것을 이해할 수 있었다. 페어분과 유효성 검사 실습을 하는데 생각보다 너무 일찍 끝나버려서 물음표 만번 정도 띄우다가 제출하고 이야기꽃을 피웠다. 이럴 때 아니면 또 언제 동기분과 이야기해보겠음ㅜㅜ 너무 재밌었다. 서로 격려도 해주고 공감대도 형성하면서 으쌰으쌰할 수 있어 좋았다. 이번 주에 벌써 아고라 스테이츠를 만든다니.. 시간 참 빠르다. 섹션 1도 곧 있으면 끝.....! 대체 이게 뭐묘 누가 내 시곗바늘만 잡고 냅다 돌리는 중 아닌지? 눈 감았다 뜨면 프로젝트하고 있을 듯ㅜㅜㅋㅋㅋ 휘몰아치는 일정 속에서 배운 내용을 까먹지 않게 기록하자 기록!

🗝 키워드

DOM, querySelector, console.dir(), CRUD, append, 유효성 검사

🗣 스스로에게 설명

DOM = Document Object Model
HTML 요소를 객체처럼 조작할 수 있게 해준다.
정적인 웹사이트를 동적으로 만들어주는 핵심 모델
HTML 파싱은 직렬적으로 이루어진다.
파싱 중 <script> 요소를 만나면 파싱을 일시정지하고 <script>를 먼저 실행한다.

<script>를 <head> 안쪽에 삽입할 경우

➡️ <script>가 전부 실행될 때까지 기다렸다가 html을 로딩하게 된다. <script>에서 html의 요소를 변경하게 될 경우 html 파일이 다 로딩되지 않은 상태이기 때문에 오류가 발생할 수 있다. 또한, 웹페이지 로딩 시 <script>가 다 실행될 때까지 기다렸다가 html이 해석되므로 시간이 더 오래 걸릴 수 있다.

<script>를 <body> 태그 맨 끝에 삽입할 경우

➡️ html 파일이 대부분 다 로딩된 후에 <script> 요소를 실행하므로 html의 요소를 변경해도 잘 실행된다. 따라서 html의 요소를 이용하기 위해선 <script>를 body 태그의 맨 끝에 삽입하는 것이 적절하다. 이 외에도 async, defer 등이 있던데 이는 더 찾아봐야 할 듯 하다.

DOM 구조를 조회할 때에는 console.log가 아닌 console.dir를 쓴다.
body 태그의 자식 요소를 보고 싶다 -> document.body.children

DOM은 트리 구조이다.
createElement를 이용하여 요소를 만들면 해당 요소는 공중부양 상태가 된다. (연결된 곳이 없음)

let oneButton = document.createElement('button');

append를 이용하여 요소를 부모 노드에 포함할 수 있다. (여기서는 body에 포함했다)

document.body.append(oneButton);

querySelector와 querySelectorAll로 요소를 조회(read)할 수 있다.
querySelectorAll로 추출한 요소들은 배열이 아니라 배열 같은 객체이다. (Array-like Object)
배열처럼 반복문도 돌 수 있고, 인덱싱도 가능하지만 배열은 아니다.
옛 브라우저와의 호환성을 위해 오래된 방식인 getElementbyId를 이용할 수도 있다.

html 요소에 텍스트를 바꿀 때에는 textContent를 이용한다. 

oneButton.textContent = 'Click me!';
console.log(oneButton); // <button>Click me!</button>


DOM을 이용해 CSS 스타일링이 적용되도록 html 요소에 클래스를 추가할 수도 있다. 

oneButton.classList.add('btn');
console.log(oneButton); //<button class="btn">Click me!</button>


setAttribute로 다른 속성을 추가할 수도 있다. 여기서는 button 요소에 name 속성을 추가해보았다.

oneButton.setAttribute('name', 'test_button');
console.log(oneButton) // <button class="btn" name="test_button">Click me!</button>

❓ 막히는 or 막혔던 부분

유효성 검사에서 .value를 넣는 걸 깜빡해서 한참 고민했다.
유효성 검사는 튜토리얼이 없었다면 하나도 해결하지 못했을 것 같다.

'Lesson > TIL' 카테고리의 다른 글

TIL: 2022-09-15  (0) 2022.09.15
TIL: 2022-09-14  (0) 2022.09.14
TIL: 2022-09-08  (0) 2022.09.08
TIL: 2022-09-07  (0) 2022.09.07
TIL: 2022-09-06  (0) 2022.09.06
'Lesson/TIL' Related Articles more
Comments