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