문서객체모델(DOM - Document Object Model)

지두팔·2024년 5월 29일
DOMJavaScriptTIL
post-thumbnail

문서객체모델 (DOM)

  • 문서 객체 : HTML의 태그들
  • 문서 객체 모델 : 문서 객체를 조합해서 만든 전체적인 형태
  • 문서 객체를 조작한다 == 태그를 조작한다.

💡 Tip!
현재 웹 브라우저에서 DOM을 조작하는 언어가 자바스크립트 뿐이라 자스 == DOM 이라고 생각할 수 있지만 DOM은 꼭 자스로 구현되는 것 만은 아니라고 한다! 다른 언어로도 구현 가능함.
DOM은 자스 없이도 DOM 인터페이스 구현만으로도 조작이 가능하다.


자바스크립트로 DOM에 접근하는 방법

DOM의 인터페이스를 이용하여 DOM에 접근할 수 있다.

document

  • 웹 페이지에서 가장 최상위라 할 수 있는 HTML을 포함하고 있는 객체. 즉, 문서 전체를 대표하는 객체

node

  • DOM 트리의 기본 단위로, 웹 문서의 각 요소, 텍스트, 주석 등을 나타냄

문서 객체 선택

  • 이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것. 자바스크립트를 사용하여 내부 글자 변경하거나 스타일 변경 등 가능함
메서드설명
document.querySelector(선택자)선택자로 1개 선택. CSS 선택자를 사용하여 요소를 선택함
document.querySelectorAll(선택자)선택자로 여러 개 선택. CSS 선택자를 사용하여 여러 요소를 선택함
document.getElementById(id)아이디로 1개 선택. 주어진 ID 속성을 가진 요소를 선택함
document.getElementsByTagName(tagName)태그 이름으로 여러 개 선택. 주어진 태그 이름을 가진 모든 요소를 선택함
document.createElement(tagName)새로운 요소 생성. 주어진 태그 이름을 가진 새로운 요소를 생성함
node.appendChild(node)자식 노드 추가. 선택한 노드에 자식 노드를 추가함
node.removeChild(node)자식 노드 제거. 선택한 노드에서 자식 노드를 제거함
element.innerHTML문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
node.textContent문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
element.setAttribute(name, value)속성 설정. 선택한 요소에 주어진 이름과 값을 가진 속성을 설정함
element.getAttribute(name)속성 값 가져오기. 선택한 요소에서 주어진 이름을 가진 속성의 값을 반환함
element.addEventListener(type, listener)이벤트 리스너 등록. 선택한 요소에 이벤트 리스너를 등록하여 지정된 이벤트가 발생할 때 호출됨

(등등)
위의 방법들로 동적으로 노드를 생성하거나 삭제 / 변경이 가능하다.

정적 생성

  • 웹 페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는 것

동적 생성

  • 웹 페이지를 실행 중에 자바스크립트를 사용해 문서 객체를 생성하는 것

이벤트 활용

  • 이벤트 모델: 이벤트를 연결하는 방법
  • 모든 이벤트 모델의 이벤트 리스너는 첫번째 매개변수로 이벤트 객체(in 이벤트 관련 정보) 를 받음.

표준 이벤트 모델

  • addEventListener 메서드사용하여 이벤트 연결
  • 이벤트 리스너 여러개 연결 가능
  • 현재 많이 사용
document.addEventListener("keyup", () => {
 // 문장
});

고전 이벤트 모델

  • 문서객체가 갖고있는 on~~으로 시작하는 속성에 함수를 할당에서 이벤트를 연결하는 방법
  • 이벤트 리스너 하나만 연결할 수 있음
document.input.onkeyup = () => {   // onkeyup은 속성
 // 문장
});

인라인 이벤트 모델

  • HTML 요소의 on~~ 속성에 자바스크립트 코드 넣기. on속성 내부에서 변수 이벤트 활용가능.
  • 2000년 이후로 거의 사용되지 않았으나, 최근 F.E. F/W 에서 인라인 이벤트 모델을 활용하는 형태로 코드를 작성하여 현재 인라인 이벤트 모델도 다시 많이 쓰이고있음.
<script>
  const  listner = (e) => {
  }
</script>

<body onkeyup="listner(e)">
</body>

DOMContentLoaded 이벤트

  • 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
    (문서객체가 모두 만들어진 다음에 스크립트 실행해달라!)
  • <head> 에 위치한 <script> 가 <body> 에 있는 문서에 접근하려면
    화면에 문서 객체를 모두 로드&파싱할 때 까지 기다려야함.
    • 근데 body 태그가 생성되기 전에 위치 해 있는 놈이라서 바디로 접근할 수가 없음.
    • DOMContentLoaded 요 놈이 DOM 조작을 가능하게 함
      (문서 객체를 모두 읽고 요기 있는 콜백함수 실행해줘!)
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("HTML 문서가 완전히 로드&&파싱됨");
});

이벤트 발생 객체

코드의 규모가 커지면 이벤트 리스너를 외부로 분리하는 경우가 늘어난다. 이럴 경우 이벤트를 발생한 객체에 어떻게 접근을 할 수 있을까?

  • event.currentTarget 속성 사용
  • this 키워드 사용
    • 얜 화살표 함수에서 사용 못함. 함수 선언문에서만 사용 가능.

기본 이벤트 막기

기본 이벤트 : 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것
ex) (링크 클릭 시 이동, 제출 버튼 클릭 시 이동 등)

  • preventDefalut() : 기본 이벤트 제거 시 사용하는 메서드

button 태그 관련 -

  • <button></button> 👉 클릭 이벤트
    • ❗ <form> 태그 안에 버튼 태그가 있다면 input의 type="submit"과 동일하게 동작함.
  • <input type="button" /> 👉 클릭 이벤트
  • <input type="submit" /> 👉 submit 이벤트
    • ❗ <form> 태그 안에 위치해야 함

💡 <form> 태그 내 submit 버튼을 누를 경우 form 태그 전체 데이터 제출 이벤트 발생.
💡 버튼 태그는 type을 명시하지 않을 경우 기본으로 submit 기능을 수행함.


localStorage 객체

  • localStorage: 웹 브라우저에서 데이터를 로컬에 저장할 수 있는 방법을 제공하는 Web Storage API의 일부
  • 쿠키와 달리 만료 기한이 없으며, 사용자 세션이 끝나도 데이터가 유지됨
// ex
// 데이터 저장
localStorage.setItem('username', 'doopal');

// 데이터 가져오기
let username = localStorage.getItem('username');

// 특정 데이터 삭제
localStorage.removeItem('username');

// 모든 데이터 삭제
localStorage.clear();

// 저장된 데이터 개수 확인
let count = localStorage.length;

JSON 객체를 localStorage에 저장하기

  • JSON 객체를 문자열로 변환하여 localStorage에 저장하고, 다시 JSON 객체로 변환하여 사용할 수 있음. 이 과정에서 JSON.stringify와 JSON.parse 메서드를 사용.
  • JSON.stringify : 자스 객체 > JSON 문자열
  • JSON.parse : JSON 문자열 > 자스 객체
// JSON 객체
let user = {
    name: 'doopal',
    age: 20,
    email: 'doopal@example.com'
};

// JSON 객체를 문자열로 변환하여 localStorage에 저장
localStorage.setItem('user', JSON.stringify(user));

localStorage에서 JSON 객체 가져오기

// localStorage에서 JSON 문자열을 가져오기
let userStr = localStorage.getItem('user');

// JSON 문자열을 JSON 객체로 변환
let userObj = JSON.parse(userStr);

console.log(userObj.name);  // 'doopal'
console.log(userObj.age);   //  20
console.log(userObj.email); // 'doopal@example.com'
profile
지두팔
후론트엔드 개발자를 꿈꿔요 💭
이전 포스트

eslint 와 prettier

다음 포스트

React Hooks - useState와 useRef 비교

0개의 댓글