[JavaScript] DOM - CRUD

Hannahhh·2022년 7월 14일

JavaScript

목록 보기

20/47

🔍 DOM - CRUD

document 객체를 통해서 HTML element를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법을 실습 후, 정리한다.

실습 repository는 코드 스테이츠에서 제공받은 코드를 사용했다.(html, css)
실습 파일을 다운받은 후, html파일을 크롬에서 열고 개발자도구의 console 탭에서 코드를 작성하여 실습했다.

✔ CREATE

DOM으로 새로운 HTML element를 만드는 방법이다.

document.createElement('div')  // 새로운 <div>요소를 생성한다.

// 위에서 생성한 <div>요소를 변수 tweetDiv에 할당한다.
const tweetDiv = document.creatElement('Div')

위에 코드를 입력해도 생성만 되었을 뿐, 연결은 되어있지 않기 때문에 요소는 '공중에 떠있는 상태'이다. 따라서, 화면에 변화는 생기지 않는다.

✔ APPEND

DOM으로 생성된 HTML element를 부모 노드에 포함하는 방법이다.


//위에서 생성한 <div>요소를 담은 변수 tweetDiv를 <body>요소에 append한다.
doucument.body.append(tweetDiv)

크롬의 개발자도구 -> Elements 탭에서 <body>요소에 <div>요소가 추가된 것을 확인할 수 있다.

✔ READ

DOM으로 HTML element를 조회하는 방법이다.

querySelector의 첫 번째 인자로 셀렉터를 전달하여 element의 정보를 조회할 수 있으며, HTML 요소('div'), id('#tweetList'), class('.tweet') 세 가지가 가장 많이 사용된다.


// 클래스 이름이 tweet인 HTML 요소를 조회한다.
const oneTweet = document.querySelector('.tweet')

// 클래스 이름이 tweet인 요소가 여러개 있다면, 여러 개의 요소를 한번에 가져오자.
// 클래스 이름이 tweet인 모든 요소를 유사배열로 받아온다.
const tweets = document.querySelectorAll('.tweet')

유사 배열?
querySelectorAll을 이용해 조회한 요소들은 배열처럼 for문을 사용할 수 있다. 단, 배열이 아니라 유사 배열(aka.배열이 아닌 배열, 배열형 객체 등)이다. (정식명칭은 Array like Object)

Internet Explorer와 같이 이전 버전의 브라우저 호환성을 신경 써야 한다면, 옛날 방식을 사용해야 할 수도 있다.

아래는 get으로 시작하는 DOM 조회 메서드이다.

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

CREATE에서 생성한 <div>요소는 <body>요소에 위치해있다. container에 넣기 위해서는 아래 코드를 입력해야한다.

// ID이름이 container인 HTML 요소를 조회한다.
const container = document.querySelector('#container')

// CREATE에서 생성한 <div>요소를 container의 마지막 자식요소로 추가한다
container.append(tweetDiv)

크롬의 개발자도구 -> Elements 탭에서 <container>요소에 <div>요소가 추가된 것을 확인할 수 있다.

✔ UPDATE

DOM으로 HTML Element를 변경하는 방법이다.

// UPDATE 실습을 위해 oneDiv라는 이름의 <div>요소를 생성한다.
const oneDiv = document.createElement('div');

console.log(oneDiv) // <div></div>

// textContent를 사용하여 위에서 생성한 <div>요소에 문자열을 입력한다.
oneDiv.textContent = 'dev';

console.log(oneDiv) // <div>dev</div>

// 다른 요소들 처럼 CSS 스타일링이 적용될 수 있도록 <div> 요소에 같은 이름의 class를 추가한다.
oneDiv.classList.add('tweet')
//oneDiv.setAttribute('class', 'tweet')

console.log(oneDiv) // <div class="tweet">dev</div>

// UPDATE된 내용: 문자열을 입력하여 텍스트를 채우고 클래스를 추가하여 스타일링을 적용함

// append를 이용해 container의 자식요소로 추가한다.
const container = document.querySelector('#container')

container.append(oneDiv)

append 후, 추가한 <div>요소가 tweet의 스타일이 적용된 상태로 화면에 출력된다.

setAttribute()

setAttribute()를 이용해 생성한 요소의 attribute를 설정해줄 수 있다.

// 아이디가 "javascript"이고, 내용이 "awesome"인 <a>요소를 생성
let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript') //<a> 요소의 ID가 Javascript가 되도록 설정
aElement.textContent = 'awesome'

✔ DELETE

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

// 앞에서 가장 먼저 생성한 <div>요소인 tweetDiv을 삭제한다.
tweetDiv.remove()

단, 여러 개의 자식 요소를 삭제하려면? 아래에 기술한 방법을 사용해야한다.

innerHTML

innerHTML을 이용해 모든 자식 요소를 지울 수 있다.

// ID 이름이 container인 자식 요소들을 삭제한다.
document.querySelector('#container').innerHTML = '';

removeChild & While

그러나 위의 코드는 제목에 해당하는 H2 'Tweet List'까지 삭제한다.

이를 방지하기 위한 방법으로 removeChild와 while을 이용해 자식요소를 삭제한다.

// ID 이름이 container인 HTML 요소를 조회한다.
const container = document.querySelector('#container');

// container의 자식요소가 1개만 남을 때까지, 마지막 자식요소를 제거한다.
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

이후, 화면에 H2 'Tweet List'만 출력된다.

특정 class 이름을 가진 요소 제거

// class 이름이 tweet인 HTML 요소를 조회한다.
const tweets = document.querySelectorAll('.tweet')

// forEach 반복문을 사용해 class이름이 tweet인 요소들을 제거한다.
// 참고로 forEach는 배열에서만 사용가능하다! (단, 요소들은 유사배열일 뿐 배열이 아님!)
tweets.forEach(function(tweet){
    tweet.remove();
})

// for ~ of문을 사용하여 class 이름이 tweet인 요소들을 제거한다.
for (let tweet of tweets){
    tweet.remove()
}

제목인 H2 'Tweet List'는 class이름을 가지고 있지 않고, 위의 제거된 요소들과 같은 ID 이름을 가졌기 때문에 화면에 H2 'Tweet List'만 출력된다.

✔ Quiz

`aElement`를 HTML에서 제거하기 위한 올바른 방법을 모두 고르세요

<body>
   <div>
    <div>hello</div>
    <div id="world">
      world
      <a id="javascript"></a>
    </div>
    <span id="code">code</span>
    <span>states</span>
  </div>
</body>

let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'

1) document.deleteNode(aElement)
=> deleteNode 라는 메서드는 없다.

2) aElement.remove()

3) document.querySelector("#world").remove()
=> #world 의 요소를 전부 지운다.

4) document.querySelector("#world").remove(aElement)
=> #world 의 요소를 전부 지운다.

5)document.querySelector("#world").removeChild(aElement)

id가 "world"인
요소의 자식으로, 텍스트 "world" 다음에 변수 aElement를 넣고자 할 때, 올바른 방법을 고르세요.

<body>
   <div>
    <div>hello</div>
    <div id="world">world</div>
    <span id="code">code</span>
    <span>states</span>
  </div>
</body>

let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'

// TODO : 이후에 써야 할 코드를 선택지에서 고르세요.

1) document.querySelector('world').insertBefore(aElement)

=> insertBefore은 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입하는 것으로,문법은 let insertedNode = parentNode.insertBefore(newNode, referenceNode); 을 따른다. referenceNode에 명시적으로 Node나 null을 전달해야하는데, Node일 경우 해당 Node앞에 새로운 노드가 삽입되고, null일 경우 노드 목록 끝에 삽입된다.

2) document.querySelector('#world').cloneNode(aElement)
=> cloneNode는 element나 node를 복제하는 것으로 , 문법은 let 복제된 새로운 노드 = 복제되어야 할 node.cloneNode(deep);을 따른다.
*deep: 해당 node의 children까지 복제하려면 true, 해당 node만 복제하려면 false

3) document.getElementById('world').appendChild(aElement)

=> appendChild는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 것으로, 분법은 let aChild = element.appendChild(aChild);을 따른다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 노드를 현재 위치에서 새로운 위치로 이동시킨다.

4) document.querySelector('world').prependChild(aElement)

=> prependChild라는 메서드는 존재하지 않는다.

5) document.getElementById('#world').insertAfter(aElement)

=> insertAfter라는 메서드는 존재하지 않는다.

Reference:
코드스테이츠
MDN

Hannahhh

이전 포스트

[JavaScript] DOM의 정의 및 구조

다음 포스트

[JavaScript] DOM - CRUD

JavaScript

🔍 DOM - CRUD

✔ CREATE

✔ APPEND

✔ READ

✔ UPDATE

setAttribute()

✔ DELETE

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

innerHTML

removeChild & While

특정 class 이름을 가진 요소 제거

✔ Quiz

`aElement`를 HTML에서 제거하기 위한 올바른 방법을 모두 고르세요

id가 "world"인
요소의 자식으로, 텍스트 "world" 다음에 변수 aElement를 넣고자 할 때, 올바른 방법을 고르세요.

[JavaScript] DOM의 정의 및 구조

[JavaScript] DOM - element와 node/ property, method 들의 차이점

0개의 댓글

[JavaScript] DOM - CRUD

JavaScript

🔍 DOM - CRUD

✔ CREATE

✔ APPEND

✔ READ

✔ UPDATE

setAttribute()

✔ DELETE

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

innerHTML

removeChild & While

특정 class 이름을 가진 요소 제거

✔ Quiz

aElement를 HTML에서 제거하기 위한 올바른 방법을 모두 고르세요

id가 "world"인 요소의 자식으로, 텍스트 "world" 다음에 변수 aElement를 넣고자 할 때, 올바른 방법을 고르세요.

[JavaScript] DOM의 정의 및 구조

[JavaScript] DOM - element와 node/ property, method 들의 차이점

0개의 댓글

`aElement`를 HTML에서 제거하기 위한 올바른 방법을 모두 고르세요

id가 "world"인
요소의 자식으로, 텍스트 "world" 다음에 변수 aElement를 넣고자 할 때, 올바른 방법을 고르세요.