DOM & CRUD

moono·2023년 1월 21일

JavaScript

목록 보기

13/23

DOM (Document Object Model)

Document Object Model
HTML 요소를 Javascript Object 처럼 조작할 수 있다.
DOM 을 통해 웹페이지의 컨텐츠, 구조, 스타일 읽고 조작

console.dir : console.log 와 달리 DOM을 객체의 모습으로 출력

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu">menu</div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture">news-picture</div>
      </div>
    </div>
    <div id="footer">footer</div>
  </body>
</html>

console.dir(document.body.children)
// HTMLCollection(3)
// 0: div#nav / 1: div#news-contents / 2: div#footer

let newsContents = document.body.children[1]
console.dir(newsContents) // div#news-contents

CRUD

Create (요소 생성)

createElement()

새로운 <div> 요소를 만들지만, 현재 공중부양 상태, 실제 웹 페이지 상에서도 보이가 하려면 append 를 해야함

document.createElement('div')
****
const tweetDiv = document.createElement('div')
// 변수에 새로운 <div> 요소를 할당

Append

document.body.append(tweetDiv)

append 라는 메서드로 변수 tweetDiv 를 <body> 에 넣음
하지만 내용이 없어서 표시가 container 안에 아무것도 없음

Read (요소 선택)

HTML 문서의 요소를 선택하기 위해 사용할 수 있는 document의 메서드

getElementById('아이디명') : 아이디로 요소 선택
⇒ 출력 결과는 HTMLHeadingElement
getElementByClassName('클래스명') : 클래스로 요소 선택
⇒ 해당 클래스를 가진 요소 모두 선택 / 출력 결과는 HTMLHeadingElement
getElementByTagName('태그명') : 태그 이름으로 요소 선택
⇒ 해당 태그를 가진 요소 모두 선택 / 출력 결과는 HTML태그명Element
getElementByName() : name 속성으로 요소 선택
⇒ 해당 name 속성 값 가진 요소 모두 선택 / 출력 결과는 NodeList에 감싸진 HTML태그명Element

<input type="text" name="user">
<input type="text" name="user">

const inputs = document.getElementsByName('user');
console.log(inputs) // NodeList (2) [input, input]
// 인자로 전달된 문자열과 동일한 name 속성 값을 가진 요소 모두 선택

querySelector() : 선택자로 첫번째 인자 요소 선택
셀렉터로는 HTML요소 ('div') 와 id ('#tweetList') class ('.tweet ') 으로 가장 많이 사용
⇒ 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회

const oneTweet = document.querySelector('.tweet')

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

querySelectorAll() : 선택자로 선택되는 요소 모두 선택
클래스 이름이 tweet인 요소 여러개를 한번에 가져오기 위해 사용
이렇게 조회한 HTML 요소들은 배열처럼 for문 사용 가능
⇒ 하지만 HTML 요소들은 배열이 아니고 유사배열 형태!

클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아옴
⇒ 출력 결과는 NodeList에 담겨진 HTML태그명Element

const tweets = document.querySelectorAll('.tweet')

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

container 변수에 container 라는 id를 가진 요소를 선택
tweetDiv 변수에 div 요소 생성하는걸 할당
container id를 가진 요소에 div를 생성하고 추가하기

Update (요소 변경)

선택된 특정 요소는 속성 값, 스타일 등의 내용을 변경할 수 있다.
우리가 선택한 요소들이 innerText, textContent 등에 접근할 수 있는 이유는
이들이 HTMLElement 가 가지고 있는 속성(Property) 이고, 선택된 요소들이 HTMLElement 를 상속받기 때문

<h2>Hello</h2>

const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>

oneDiv.textContent = 'dev'; // textContent 로 비어있는 div 엘리먼트에 문자열을 입력
console.log(oneDiv) // <div>dev</div>

oneDiv.classList.add('tweet') // classList.add 로 class 추가
console.log(oneDiv) // <div class="tweet">dev</div>

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

title.innerText = '안녕하세요!';
title.style.color = 'red';

⇒ title 은 HTMLHeadingElement 를 가지고는데,
HTMLHeadingElement 는 HTMLElement 를 상속받기 떄문에
HTMLElement 의 속성이나 메서드에 접근할 수 있다.

Delete

삭제하려는 요소 위치 알고 있는 경우

remove

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

⇒ id가 container인 요소 아래 tweetDiv 추가하고 remove로 삭제

여러 개의 자식요소 지우려면?

innerHTML

document.querySelector('#container').innerHTML = '';

⇒ id가 container인 요소 아래의 모든 요소 지우기
⇒ 간단하고 편리하지만 보안에서 몇 가지 문제를 가지고 있음

removeChild
자식 요소를 지정해서 삭제하는 메서드로 모든 자식 요소를 삭제하기 위해 반복문(while, for 등)을 활용할 수 있음

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

⇒ container의 첫 번째 자식 요소가 존재하면 첫번째 자식 요소를 제거
근데 이러면 제거되지 말아야할 H2 같은 것들이 제거 될 수 있으니
자식 요소가 담고 있는 문자열을 비교해 h2만 남기거나,

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

⇒ container의 자식 요소가 1개만 남을때까지, 마지막 요소를 제거

새로운 변수를 생성하고 h2를 할당해뒀다가 반복문이 끝난 뒤 추가할 수 있다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

⇒ 클래스 이름이 Tweet인 요소만 찾아서 제거

그 외 알면 좋을 메소드 및 정보

.createTextNode()

선택한 요소에 텍스트를 추가
⇒ 단순히 텍스트를 추가하는게 아니라 노드를 생성하는 것

element.createTextNode('My Text')

form 자체에 name 설정

form 자체에 name 설정하면 querySelector로 접근하지 않고
바로 document.formname으로 접근 가능
출처
form 에 접근하기

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

let ageElems = form.elements.age;

.setAttribute()

element.setAttribute('속성명', '속성값')
선택한 요소의 속성값을 정함
⇒ 이미 속성값이 존재한다면 그 값을 지우고 새 값 적용

<p>
  <a id="link" href="#">moono</a>
</p>

document.querySelector('#link').setAttribute('href', 'https://velog.io/@moonozz')
// link id를 가진 요소 선택 후 href 속성값 변경

Reference

moono

이전 포스트

ES6 주요 문법

다음 포스트