학습 내용
DOM 개념
HTML에 자바스크립트 적용하기(script 요소를 추가하는 2가지 예시)
DOM 사용법
HTML parsing
웹 브라우저가 HTMl 코드를 해석하는 과정. script 요소를 만나면, HTML 코드 해석을 멈추고, 자바스크립트 파일을 실행
HTML에 script 요소를 추가하는 2가지 예시
head 요소 내부에 추가
스크립트 실행 > 웹 페이지 로드
이는 스크립트가 HTML 페이지의 본문이 로드되기 전에 로드되므로, 페이지 내용이 완전히 로드되고 실행될 때까지 지연될 수 있다. 그러나 이 방법은 페이지를 초기화하거나 구성하는 데 스크립트가 필요한 경우나 페이지의 다른 자원보다 먼저 로드해야 하는 경우에 유용하다.
DOM 트리가 만들어지기 전에 자바스크립트가 실행된다. 따라서 DOM으로 조작을 할 수 없다.
body 요소 내부 끝에 추가
이는 HTML 콘텐츠가 로드된 후에 스크립트가 로드되므로 콘텐츠가 먼저 표시되고 스크립트가 실행된다. 이 방법은 페이지가 작동하는 데 필수적이지 않은 경우나 페이지가 로드된 후 콘텐츠를 조작하거나 업데이트해야 하는 경우에 유용하다.
일반적으로 개발자는 스크립트가 로드되고 실행되기 전에 HTML 콘텐츠가 표시되므로 페이지의 초기 렌더링이 더 빨라지므로 요소의 끝 전에 스크립트 요소를 삽입하는 것을 선호할 수 있다.
또한 본문 요소의 끝에 스크립트를 배치하면 스크립트가 실행되기 전에 모든 HTML 콘텐츠가 로드되어 아직 DOM에 없는 요소로 인한 잠재적인 문제를 방지할 수 있다.
즉, 페이지를 초기화하거나 구성하는 데 스크립트가 필요한 경우 또는 페이지의 다른 리소스보다 먼저 스크립트를 로드해야 하는 경우와 같이 요소 내부에 스크립트 요소를 삽입하는 것이 선호될 수 있는 상황이 있다. 궁극적으로 스크립트 요소를 삽입할 위치는 프로젝트의 특정 요구 사항과 요구 사항에 따라 선택해야 한다.
DOM 정의
Document Object Model(문서 객체 모델)
HTML, XML 문서의 프로그래밍 Interface이다. nodes와 objects로 문서를 표현한다. 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 문서의 구조화된 표현을 제공하고, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해서 문서 구조, 스타일, 내용등을 변경할 수 있게 돕는다.
Create
document.createElement('div') // 새로운 div 요소 생성
const newDiv = document.createElement('div') // newDiv 선언, div를 할당
Append
document.body.append(newDiv) // body 노드에 div 노드를 자식 요소로 연결
Read
const oneNew = document.querySelector('.new) // 쿼리셀렉터로 class명이 new인 HTML 요소 조회(1개 요소 할당)
const allNew = document.querySelector('.new) // 쿼리셀렉터로 쿼리셀렉터로 class명이 new인 모든 HTML 요소 조회
Update
document.createElement('div') // div 요소 생성
const newDiv = document.createElement('div') // 변수에 할당
newDiv.textContent = 'newproduct' // div newproduct /div
=> div 요소 내부에 문자열이 입력된다.
newDiv.classList.add('new') // div class="new" newproduct /div
=> newDiv의 클래스명이 'new'로 업데이트 된다.
Delete
newDiv.remove() // append 했던 div 요소인 newDiv를 삭제한다.
추가 학습 사항: innerHTML, removeChild와 while문, 특정 class 요소 삭제
내가 아는 것(조건: 이것을 설명할 수 있다)
- DOM 정의
- HTML parsing
- script 요소의 배치 2가지 예시. head 요소 내부 배치와 body 요소 끝 배치의 차이점
- Create: DOM을 이용해서 HTML 요소 추가
내가 모르는 것
