[DOM] DOM이란 무엇인가

6235 단어 DOMDOM EventDOM

출처: 엘리스 sw 엔지니어 트랙

🤔 DOM이란?

DOM(document object model)
: 문서 객체 모델

  1. 객체 지향 모델로써 구조화된 문서를 표현하는 방식
  2. HTML이나 XML 문서의 프로그래밍 인터페이스
    : DOM은 문서에 구조화된 표현을 제공, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 해줌

✔️ DOM의 종류

  1. Core DOM: 모든 문서 타입을 위한 dom 모델
  2. HTML DOM: HTML 문서를 위한 dom 모델 ✨
  3. XML DOM: 문서를 위한 dom 모델

HTML DOM

: HTML 문서를 조작학고 접근하는 표준화된 방법
모든 HTML 요소는 HTML DOM을 통해 접근 가능



📝 Document

document 객체

: document 객체는 웹 페이지를 의미
따라서 웹 페이지 내에 존재하는 HTML 요소에 접근하고자 할 땐 반드시 document 객체부터 접근 시작해야함

Document method

1. HTML 요소의 선택

: 새로운 HTML 요소를 선택하기 위해 제공되는 메소드

- document.getElementById(): 해당 아이디 요소
- document.getElementByClassName(): 해당 클래스 요소 모두
=> id는 유일하지만 class는 여러개 있을 수 있기 때문

- document.getElementByName(): 해당 이름 속성값을 가지는 요소 모두

- document.querySelector(): 해당 선택자로 선택되는 요소 1개
- document.querySelectorAll(): 해당 선택자로 선택되는 요소 모두

참고할 것: getElementById 그리고 querySelector 차이점

2. HTML 요소의 생성

: HTML 요소를 선택하기 위해 제공되는 메소드

- document.createElement(): 지정된 HTML 요소를 생성
- document.write(): HTML 출력 스트림을 통해 텍스트 출력

3. HTML 이벤트 핸들러 추가

: HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성

이벤트?

: 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생, 자바스크립트는 발생한 이벤트에 반응해 특정 동작을 수행 (예, 마우스를 올릴 때, 내릴 때, 클릭할 때...)

이벤트 핸들러

: 이벤트가 발생했을 때 그 처리를 담당하는 함수, 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소를 등록된 이벤트 핸들러를 실행

<p onclick="onClick">click</p>
<script>
const onClick=()=>{
  document.getElementByTagName("p").innerHTML ="clicked";
}
</script>


✅ HTML ➡️ DOM

<html>
  <head>
    <title>자바스크립트 기초</title>
  </head>
  <body>
    <article>
      <header>header</header>
      <section>
        <header>header 1</header>
       section1
      </section>
    </article>
  </body>
</html>
BOJ/백준-10699-python
최후의 문법 속성과 img

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage