[JavaScript] DOM

Front/JavaScript

[JavaScript] DOM

ddo04 2024. 7. 6. 23:21

📱 DOM (Document Object Model)

html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등
어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미
모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨
DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함
요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기
요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요
html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메소드들을 활용하게 됨
제공되는 메소드는 5가지
id 값으로 요소를 선택하거나 class 값으로 요소를 선택하거나 태그 이름 요소 자체 선택자로 선택하는 방법 있음

📱 getElementByld()

id 값을 사용해서 요소 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 id="title" class="title_class">Hello</h2>

    <script src="test.js"></script>
    
    
const title = document.getElementById('title');

console.log(title);

📱 getElementByClassName()

클래스 이름을 가지고 요소 선택
Element 뒤에 s도 붙음
getElementById -> getElementsByClassName
()에 들어가는 인자의 값은 선택할 요소가 가지고 있는 클래스 값
html에서 아이디 값은 유일한 값
메소드를 사용하였을 때 선택되는 요소는 하나이지만 중복해서 다수의 요소들 동일한 클래스를 사용할 수 있음
반환되는결과값도 단일 요소가 아니라 배열처럼 리턴

const title = document.getElementsByClassName('title_class');

console.log(title);

📱 getElementByTagName()

태그 이름으로 요소를 선택하는 방법
요소가 하나가 아니라 여러 개가 될 수 있기 때문에 동일한 태그를 사용하는 요소들이 배열처럼 변환

const title = document.getElementsByTagName('h2');

console.log(title);

📱 querySelector(), querySelectorAll()

요소를 선택할 때 Id 값이나 클래스 이름이나 태그 이름으로 선택하는 방법이 좋지는 않음
아이디를 사용하는 친구를 선택할 때는 이 메소드를 썻다가 클래스로 선택하려면 또 다른 메소드를 썻다가 이런 식으로 하여야 함
querySelector()은 동일한 메소드를 사용해서 아이디나 클래스, 태그 이름으로 모두 선택할 수 있음
태그의 이름을 작성하면 태그의 이름으로 선택이 됨
css처럼 #을 붙이고 Id 값을작성하면 아이디를 기준으로 요소가 선택
css처럼 .을 붙이고 class 이름을 명시하면 클래스를 기준으로 선택할 수 있게 됨
querySelectorAll()은 인자로 지정한 선택자와 일치하는 요소들을 모두 선택하는 다수의 요소들을 배열처럼 가져오기위해 사용하는 메소드

const title = document.querySelector('title');
const title = document.querySelector('#title');
const title = document.querySelector('.title_class');

console.log(title);

클래스를 사용하는 모든 요소들을 마치 배열처럼 리턴하게

📱 HTML 요소의 속성을 변경하는 방법

선택한 요소의 속성 값이나 스타일 등을 변경하는 방법에 대해서
innerText를 사용하여 기존에 주었던 값을 변경
style.color를 사용하여 폰트의 색상을 변경

📱 HTMLElement

html Element 객체가 가지고 있는 하나의 프로퍼티이고 html 모든 요소들이 html Element라는 객체를 상속받고 있기 때문임
html Element가 가지고 있는 프로포트는 다양

📱 createElement()

새로운 요소를 생성해서 html 문서에 추가하는 방법
인자 값으로 생성하려는 요소의 태그를 문자열로 전달하면 됨
생성된 요소는 동일한 태그 요소를 선택한 것과 같음
html Element 객체를 상속받기 때문에 innerText나 style 같은 프로퍼티를 사용하여 값이나 스타일 등을 조작할 수 있 음
이렇게 생성한 요소를 실제 문서에 추가해주지 않으면 보이지 않음
문서에 추가해주기 위해서는 기존의 문서에 있는 어떤 요소를 가져온 다음에 그 요소를 붙여주는 과정 필요
appendChild 메소드를 사용해서 인자로 우리가 생성한 타이틀을 전달을 해주게 되면 새로 생성한 요소가 문서에 출력이 됨

const title = document.createElement('h1');
const body = document.querySelector('body');

title.innerText = '새로운 친구에요!';
title.style.color = 'red';

body.appendChild(title);