2022.5.17. (화)
1. 오늘의 소감
- 잠을 잘못 잤는지, 아침에 일어나자 마자 오른쪽 어깨죽지가 찢어지듯 아팠다. 스트레칭을 해보고 마사지를 해봐도 풀리지 않았다. 오른 어깨가 아파 잘 움직이지 못하는 상태에서 필기하고 코딩하려니 죽을 맛이었다... 😇 매일 꾸준히 스트레칭과 체력관리를 하지 않은 업보인가 보다.
2. 학습한 키워드
- DOM, <script>, querySelector, querySelectorAll, 트리구조, document 객체, console.dir, document.creatElement(’div’), .append(), document.getElementById(), .classList.add(’className’), .classList.remove(’className’), .setAttribute(name, value), .remove(), .removeChild(child), textContent, innerHTML
3. 키워드를 바탕으로 학습 내용 설명해보기
- DOM은 HTML 요소를 자바스크립트의 객체처럼 조작할 수 있는 모델이다.
- 자바스크립트 파일은 <script> 태그를 통해 HTML 문서와 연결시킬 수 있다.
- <script src=”script.js”></script>
- 웹 브라우저는 HTML 문서를 읽는 과정에서 <script> 태그를 만나면 HTML 해석을 멈추고 <script> 요소를 먼저 실행한다. <script> 태그의 js 파일에서 다 해석되지 않은 HTML 요소를 접근을 하게 되면 해당 요소를 못찾게 된다.이 문제를 예방하기 위해 scipt 태그를 <body> 태그 마지막에 넣는다.
- DOM 은 트리구조를 가진다. 트리구조란, 하나의 부모가 여러 개의 자식을 가진 구조가 반복되는 형태이다.
- console.dir() 로 DOM 객체 형태로 출력할 수 있다.
- DOM 다루기 메서드들
- document.creatElement() - HTML 요소 생성, .append() 까지 해줘야 문서에 나타난다.
- .append(element) - 마지막 자식 요소로 추가한다.
- document.querySelector() - 선택자와 일치하는 요소를 조회한다. 여러 개일 경우 첫번째만 조회
- document.querySelectorAll() - 선택자와 일치하는 요소를 조회한다. 노드리스트라는 유사배열객체로 반환하기 때문에 여러 개의 노드를 가져올 수 있다.
- classList.add() - 클래스 추가
- classList.remove() - 클래스 제거
- .setAttribute(속성명, 속성값) - 요소에 속성 추가하기
- .remove() - 요소 제거
- .removeChild(child) - 자식 요소 제거
- element.textContent = ‘새로운 내용' - 이렇게 요소 안의 내용을 바꿀 수 있다.
- innerHTML 보다 textContent 사용을 권장한다.
- innerHTMl 은 HTML 문서에 태그를 넣을 수 있기 때문에, 만약 <script> 태그를 심어 헤커가 원하는 스크립트를 실행시킬수 있다. 즉, 해킹에 취약해진다.
4. 어려웠던 키워드
- node 와 element 차이
- append() 와 appendChild() 차이
728x90
반응형
'TIL' 카테고리의 다른 글
| [TIL] #15. 나만의 아고라 스테이츠 만들기 (0) | 2022.12.06 |
|---|---|
| [TIL] #14. 입력폼 만들기 & DOM과 JS 역사 & 컴퓨터 공학 기초 지식 (0) | 2022.12.06 |
| [TIL] #12. 원시자료형&참조 자료형 그리고 스코프 (0) | 2022.12.06 |
| [TIL] #11. 객체 (0) | 2022.12.06 |
| [TIL] #10. 배열 (0) | 2022.12.05 |