[JS] DOM[createElement(), append(), querySelector(),setAttribute(’속성명’, ’속성값’), remove() ]

DOM(Document Object Model)

HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model,

DOM으로 HTML을 조작할 수 있습니다.

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script>요소를 만나면,

웹 브라우저는 HTML 해석을 잠시 멈춥니다.

HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다.

<script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요.

DOM 구조를 조회할 때에는 console.dir이 유용합니다.

console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력합니다.

학습 목표

• DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)
• DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)
• DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)
• DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)
• 생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND)
• innerHTML과 textContent의 차이를 이해한다.

개념학습

CREATE

document.createElement()

---

APPEND

document.append()

---

READ

• DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있다.
• 셀렉터로는 HTML 요소, id, class 세 가지가 가장 많이 사용된다.

querySelector

• 하나의 요소를 가져올 때

document.querySelector('')
// .??? class
// #??? id

• 여러 개의 요소를 한 번에 가져올 때
  • querySelectorAll은 모든 HTML 요소를 받아옵니다.
  • '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다.

document.querySelectorAll()

• querySelector 와 비슷한 역할

document.getElementById('container')

// querySelector 와 비슷한 역할을 하는 오래된 방식이라? 이해ㄲㄱ
const getOneTweet = document.getElementById('container')

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

CREATE에서 생성한 div 요소를 container에 넣을 준비를 마쳤습니다.

다음 코드를 입력하면, container의 맨 마지막 자식 요소로 tweetDiv를 추가

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

---

UPDATE

• CREATE, APPEND, READ를 통해 내가 원하는 것을 새롭게 UPDATE를 할 수 있다.

oneDiv라는 이름의 <div> 요소

document.createElement(’태그명’)

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

이번 콘텐츠 UPDATE에서는 기존에 생성한 빈 div 태그를 업데이트하여, 보다 다양한 작업을 할 수 있습니다. 먼저, textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.

요소생성변수.textContent = ‘문자열 입력값’

oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

[코드] textContent를 이용해 문자열을 입력합니다.

앞서 생성한 div 엘리먼트를 container에 append 했을 때, CSS 스타일링이 적용되지 않았습니다. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.

요소생성변수.classList.add(’클래스명’)

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

[코드] classList.add를 이용해 'tweet' 클래스를 추가합니다.

생성한 엘리먼트에 텍스트를 채웠고, 클래스를 추가하여 스타일링을 적용했습니다. 이번에는 append를 이용해 container의 자식 요소로 추가합니다.

??.append(요소생성변수)

const container = document.querySelector('#container')
container.append(oneDiv)

[코드] append를 이용해 container의 자식 요소에 oneDiv를 추가합니다.

doc.querySelector(’?’).setAttribute(’속성 명’, ’속성 값’)

.setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다.

속성의 현재 값을 얻으려면 

[getAttribute()](<https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute>); 

속성을 제거하려면 

[removeAttribute()](<https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute>).

문법

element.setAttribute( 'attributename', 'attributevalue' )

attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다.

예를 들어

document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )

id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.

---

DELETE

요소생성변수.remove()

??.remove()

여러 개의 자식 요소를 지우려면, 어떻게 해야 할까요?

innerHTML 을 이용하면, 아주 간단하게 모든 자식 요소를 지울 수 있다.

컨테이너의 모든 자식 요소를 지우려면, 다음과 같이 입력!!

 

 

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

innerHTML 을 이용하는 방법은 분명 간편하고 편리한 방식이지만,

innerHTML은 보안에서 몇 가지 문제를 가지고 있습니다. 이 방법을 대신할 다른 메서드를 사용합니다.

removeChild 는 자식 요소를 지정해서 삭제하는 메서드입니다. 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다.

 

다음의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드입니다.

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

[코드] container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거합니다.

 

 

removeChild 와 while 을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제됩니다. 이를 방지하기 위한 방법은 여러 가지가 있습니다. 자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 요소를 하나만 남기게 할 수도 있습니다.

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

[코드] container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거합니다.

 

 

또는 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있습니다.

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

[코드] 클래스 이름이 tweet인 요소만 찾아서 제거합니다.