## DOM (Document Object Model)
-웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다.
-해석한 HTML 코드를 화면을 통해 보여주는 과정을 렌더링이라고 한다.
#HTML, CSS 작업 → 렌더링 → DOM → DOM 렌더링 → 웹브라우저
# DOM의 목적
-HTML에서 작성한 태그들을 하나의 객체(메모리에 등록해서 사용할 수 있게 만들어주는 것)로 만들어주는 작업
-문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜
표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스다
-DOM은 자바스크립트를 사용해서 웹 컨텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑등
이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.
-자바스크립트가 웹 문서에 대한 동작을 구현하고 나면 자바스크립트 파일이 아닌
DOM에 그 결과가 반영되며 그 내용을 토대로 웹브라우저 화면이 다시 렌더링 된다.
-HTML코드는 정적인 텍스트이므로 사용자와의 동적인 상호작용이 어렵다
그렇기 때문에 DOM이 사용자와 동적인 상호작용하게 된다.
-javaScript는 HTML을 직접적으로 건드려 변경하는 것이 아닌 DOM을 건드려 변경하는 것이다.
============================================================================================
# window.document
-브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다.(window가 가지고 있는 document 기능을 사용하겠다.)
즉 window.document 코드는 현재 브라우저에 랜더링되고 있는 문서를 의미하며
이 속성을 이용하면 해당 문서에 접근할 수 있다.
-window.document는 페이지 콘텐츠 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다.
이를 사용하여 페이지의 정보를 얻거나 웹 요소를 생성 및 조작 할 수 있다.
-document는 문서(HTML, XML 등...)에 대한 공통의 속성과 메소드를 제공한다.
즉 다양한 API(Application Programming Interface)를 제공한다.
# document.querySelector();
: 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다.
일치하는 요소가 없으면 ‘없다.’라는 의미의 null 데이터를 반환한다.
인자로 전달되는 선택자는 문자열 타입의 ‘유효한 CSS 선택자’를 의미한다.
*매개변수(Parameter)와 인자(Argument)의 차이점
method1(매개변수1, 매개변수2 : parameter) { a+b ..} -> 만들어서 사용할 때는 매개변수로 사용
abcd.method1(); = 메서드
method1(); = 함수
abcd.method1(인자 값1, 인자 값2 : Agument); -> 호출해서 사용할 때는 인자값으로 사용
<body>
<h1>h1태그는 제목을 표시합니다.</h1>
<p>p태그는 문단을 표시합니다.</p>
<p id="text">아이디가 text인 p태그 입니다.</p>
<p class="paragraph">클래스가 paragraph인 p태그 입니다.</p>
<script src="/javaScript/script.js"></script>
</body>document.querySelector("h1");
console.log(document.querySelector("h1"));
# document.getElementById();
: document의 getElementById 메소드는 id를 인자로 전달받아,
전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다.
일치하는 요소가 없으면 ‘없다.’라는 의미의 null 데이터를 반환한다.
인자로 전달되는 선택자는 문자열 타입의 ‘id’를 의미한다.
document.getElementById("text");
console.log(document.getElementById("text"));
# textContent
: textContent 속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.
textContent를 통해서 요소가 포함한 텍스트를 읽거나 변경할 수 있다.
-쓰임처 : 내가 데이터 값을 잘 받아왔나 확인차원에서 사용해보는 것이다.
let text = document.getElementById("text");
// 아이디가 text인 p태그 입니다.의 정보가 text에 저장
let h1 = document.querySelector("h1");
// h1태그는 제목을 표시합니다.의 정보가 h1에 저장
console.log(text.textContent);
console.log(h1.textContent);
-HTML을 변경한 것이 아니라, javaScript에서 변경한 값은 DOM을 변경하는 것이다.
-HTML에서는 바뀌지 않은 h1 태그가 그대로이기 때문이다.
'javaScript↗' 카테고리의 다른 글
| javaScript 함수(function) (0) | 2024.04.11 |
|---|---|
| javaScript 조건문(if-else), 반복문(for,while) (0) | 2024.04.11 |
| javaScript 연산식 (0) | 2024.04.09 |
| javaScript 템플릿 리터럴 (0) | 2024.04.09 |
| javaScript 객체(Object) 변수, 상수 (0) | 2024.04.09 |