문서 객체 모델 & vs코드 단축키

졍이🥨·2022년 12월 8일
0

📝기술공부

목록 보기
38/40

-07 Chapter. 문서 객체 모델-

HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 HTML 언어에서는 '요소'라고 부름
-> (자바스크립트=)문서 객체

👉 'HTML 요소들을 조작한다'='문서 객체를 조작한다'

문서객체들을 조합해서 만든 전체적인 형태를 '문서 객체 모델(DOM)'


🍇 DOMContentLoaded 이벤트

문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용한다. 이때, 오탈자를 입력해도 오류가 발생하지 않으므로 주의한다.

document.addEventListner("DOMContentLoaded", () => {

🍎 문서객체 가져오기

document.body, document.head, document.title 등으로 HTML 요소를 불러올 수 있다. 이외의 다른 요소들은 별도의 메소드를 사용한다.

document.head
document.body
document.title

head 요소와 body 요소 내부에 만든 다른 요소들은 다음과 같은 별도의 메소드를 사용해서 접근한다.

document.querySelector(선택자) //하나만 추출
document.querySelectorAll(선택자) //문서 객체를 여러개 추출

(선택자)부분에는 CSS 선택자를 입력한다.
👇 CSS 선택자는 다양하지만 자주 사용하는 기본적인 CSS 선택자


🍍 글자 조작하기

textContent는 입력된 문자열을 그대로 넣고, innerHTML은 입력된 문자열을 HTML 형식으로 넣는다.

<head>
  <script>
      document.addEventListner("DOMContentLoaded", () => {
      const a = document.querySelector("#a");
      const b = document.querySelector("#b");

      a.textContent = `<h1>textContent 속성</h1>`
      b.innerHTML = `<h1>innerHTML 속성</h1>`
    })
  </script>
</head>
<body>
  <div id = a></div>
  <div id = b></div>
</body>

실행해보면 div#a의 경우에는 내용에

<h1>textContent 속성</h1>

이 그대로, 태그까지 적혀있지만, div#b의 경우에는 innerHTML 속성이라는 내용이 h1 요소로 변환된 채로 적혀있는 것을 확인할 수 있다.


🍏 문서 객체 생성과 이동 및 제거

1) 문서객체 생성하기

document.createElement(문서 객체 이름)
  • 문서객체를 만든다고 해서 문서 객체가 배치되는 것은 아니며, 어떤 문서 아래에 추가할지도 지정해줘야 한다.
부모 객체.appendChild(자식 객체)

2) 문서 객체 이동하기

  • 위와 똑같이 appendChild를 사용하되, 이미 만들어진 객체로 하면 생성이 아닌 이동이 시행된다.

3) 문서 객체 제거하기

부모 객체.removeChild(자식 객체)
  • appendChild 등으로 이미 연결이 완료된 경우 아래와 같은 방법을 사용
문서 객체.parentNode.removeChild(문서 객체)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
👉 부모 객체를 이런 방법으로 선택도 가능

🫐 이벤트 설정하기

  • 이벤트 : 생성되거나 클릭하는 행동들

  • addEventListener() : 이벤트가 발생할때 실행하는 함수, 이벤트 핸들러 라고도 함

문서 객체.addEventListener(이벤트 이름, 콜백 함수)
  • 이벤트를 제거할때는 removeEventListener를 사용한다.
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)

🌟 번외편 🌟

- VS코드 단축키

Ctrl + `(백틱) : 터미널 열기/닫기

Ctrl + '+' / Ctrl + '-' : 폰트 사이즈 조절

Shift + Alt + (↑, ↓) : 한줄 복사

Alt + (↑, ↓) : 한줄 이동

Ctrl + D : 같은 단어 하나씩 선택 (밑으로 하나씩 선택됨)

Ctrl + Shift + L : 같은단어 전체 선택

Shift + Alt + 마우스 드래그 : 자유 영역 지정


참고자료💟
단축키

profile
Front-End :)

0개의 댓글