[16일차 회고] DOM

1. DOM

새로 배운 것(새로 배운 내용의 키워드를 간단히 설명)

1. 노드와 요소의 차이 : 노드는 DOM을 구성하는 모든 것 들을 일컫는 말이고, 요소는 HTML 태그들을 말한다.
2. document 객체 : 웹 페이지 그 자체를 의미하는 객체
3. DOM 접근 자식, 부모 객체 속성
   +children, childNodes, parentElement, parentNode
4. document.createElement("태그") : DOM에 특정 태그 요소 노드를 추가
5. document.요소.append("추가할 요소") : 특정 요소에 요소를 추가
6. element.classList.add("클래스") : 요소의 클래스에 특정 클래스를 추가
7. element.remove() : 요소 자체를 DOM에서 제거
8. innerHTML : 요소 노드를 문자열로 반환하거나, 모든 자식 노드들을 전부 제거할 수 있는 속성(보안성 문제 있음)

이미 알고 있던 것(간단히 키워드로만 나열)

1. document.querySelector("셀렉터")
2. document.querySelectorAll("셀렉터")
3. document.getElementById("id")
4. document.getElementByTagName("태그")
5. document.getElementByClassName("클래스")
6. HTML Collection
7. Node List

2. 추가 학습(주간 정리) 및 활동

• Array-like Object : 유사 배열 객체
• 크로스 사이트 스크립팅 공격 : innerHTML을 이용해 강제로 실행 가능한 코드로 변경하여 문제를 발생시키는 공격 방법
• HTML 새니티제이션 : 사용자로부터 입력받은 데이터를 확인하여 잠재적 위험을 제거하는 기능
• DOM Purify : 잠재적 위험을 가지고 있는 HTML 코드를 검사하고 제거하는 라이브러리
• Study
  1. Modern Javascript DeepDive DOM 715p ~ 730p
  2. 제 2회 딥다이브 스터디 모임(DOM, 프로그래머스 입문 1~20문제)

3. 회고

• 오늘은 어제 너무 오래 잠을 못 잔 탓인지, 잠을 무려 10시간 이상을 기절해서 잤는데도 불구하고 일어났을 때 정신을 못 차릴 정도로 힘들었다.
• 12시에 잠에 드려고 노력해보고 오차는 1시간 이내로 할 수 있도록 해야겠다.
• Deep Dive 스터디 준비를 제대로 못 한게 매일 책을 조금이라도 봐야하는데, 공부 시간이 끝나면 책을 읽고 싶지가 않아진다... 그래도 봐야한다.
• 네번째 페어분과의 만남은 특별했다. 지금까지 세분을 거쳐오시면서 한번도 나처럼 말을 먼저 걸어주고 계속 대화가 된 적이 없으셨다고 한다. 내일 페어가 바로 끝나지만, 꾸준히 대화해서 좋은 인상을 남겨드리고 싶다.
• 오늘도 역시나 한심하게도 9시에 책 읽는 것을 실패했다. 진짜 제발 좀 성공했으면 좋겠다.

4. 정리 자료

16일차 정리 자료