Javascript / DOM / 기초 / createElement, textContent, append, remove, querySelector

 

DOM의 정의

 

DOM : HTML 문서를 동적 제어하기 위해 Javascript로 표현한 것 (정도로 이해하자..)

 

DOM은 Document Object Model의 약자로, JavaScript를 이용해서 HTML의 속성값을 제어하는 것을 뜻한다.

HTML으로 작성된 문서를 동적으로 제어하기 위해서 HTML 문서를 Javascript형태로 바꾸는 것이다!

(또는 HTML 문서 자체를 Javascript로 작성하는 것)

 

이것은 HTML과 javascript의 구조가 Tree구조로 되어있기 때문에 가능하다.(마치 조직도와 같이..)

HTML의 트리구조를 Javascript의 트리구조로 치환하여 표현해보자.

 

다음의 HTML 코드는 

1 2 3 4 5

<div id = "burger" class = "Cheese Ham">     Get one burger     <div> What kind of source do you wanna add?</div>     <span> What kind of drink do you want?</span> </div> Colored by Color Scripter

cs

 

다음의 Javascript를 통한 객체형태로 표현될 수 있다.

Object(객체)의 형태로 작성되어 있다.

'key : value'의 형태로 작성된 것을 확인할 수 있으며, value는 Primitive, Reference type 모두를 사용하여

작성된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

{     tagName: 'DIV',     id: 'practice',     classList: ['Cheese', 'Ham']     textContent: 'Get one burger',     parentElement: body,     children: [       {         tagName: 'DIV',         textContent: 'What kind of source do you wanna add?'       }       {         tagName: 'SPAN',         textContent: 'What kind of drink do you want?'       }     ] } Colored by Color Scripter

cs

 

---

 

HTML 요소를 객체형태로 보는법

 

이러한 구조는, 개발자 도구(F12)의 콘솔화면에서 console.dir(document) 라고 입력하여 확인할 수 있다.

(document는 해당 웹페이지를 나타냄)

javscript에서 object의 value를 조회하는 방법인, 'object이름.key값'(dot notation)을 입력하면 value를 얻어낼 수 있다.

ex) document.charset  // 결과 : 'UTF-8'

 

 

---

 

 

CRUD(Create, Read, Update, Delete) + append

 

DOM의 이해를 위해 Javascript로 HTML의 element을 생성, 읽기, 편집, 삭제 하는 방법을 배워본다.

 

 

1) element 생성, 추가 (Create)

document.createElement('tag이름')

element를 생성한다는 것은, HTML의 Tag를 만든다고 이해해도 무방하다.

 

let one = document.createElement('div')
 
console.log(one)  //결과 : <div></div>

생성된 element는 실제 DOM 구조에 연결된 것이 아니라, 개별적으로 존재하고 있다.

(생성은 되었으나, 실제 DOM 구조 속에 포함되지 않음)

element를 제대로 다 만들고 나서, DOM 구조 속에 포함시켜보자.

 

- 뒷 부분에 나오겠지만, document의 자식 요소에 .createElement를 적용하면 에러가 난다.

예를 들어,  document.body.createElement 시 에러가 나오니, 일단 document.createElement로 생성을 하자.

 

---

 

2) element 편집 (Update)

 

element안에 text를 쓰거나, 조회하는 method는 textContent 이다.

요소선택.textContent = '입력할 text'

위에서 생성한 'one' 변수 안에 cake라는 text를 추가한다.

 

textContent 외 innterHTML 이라는 method도 있는데,

※ innerHTML은 Javascript의 해킹툴에 보안상 취약한 점도 있으며 javascript의 '문자열끼리 더하기' 등 여러가지 문제로 인해 보통사용하지 않는다.

 

다만, innerHTML은 .innerHTML = '<span> text </span>' 이라고 입력 시, <span> 태그가 생성되며 'text' 라는 내용을 입력하지만, .textContent = '<span>text</span>'을 입력하면, <span> 태그가 생성되지는 않고, 내용 자체가 '<span>text</span>'이 된다.

 

 

class의 지정은

요소선택.className = '원하는 class 이름'

 

 

id의 지정은

요소선택.id = '원하는 id 이름'

 

으로 지정할 수 있다.

 

let one = document.createElement('div')
console.log(one)  //결과 : <div></div>
 
 
one.textContent = 'cake'
console.log(one)  //결과 : <div>cake</div>
 
 
one.className = 'food'
console.log(one)  //결과 : <div class = "food">cake</div>
 
 
one.id = 'iceCake'
console.log(one)  //결과 : <div class = "food" id = "iceCake">cake</div>

 

 

---

 

3) element 선택 (Read) + DOM에 추가(append)

 

생성된 element를 선택하는 방법은,

 

querySelector(), querySelectorAll(),
getElementById, getElementsByClassName(), getElemenetsByTagName()

 

등이 있다.

() 안에 '.class 이름', '#id이름' 등을 넣으면 element를 선택하여 해당 정보를 조회할 수 있게 된다.

※getElementById는 'Elements' 가 아니라 'Element'를 쓴다. 단일 element라서 그렇다.

 

<div class="contents">
  <div class="food">
    <div class="word">cheese</div>
    <div class="word">burger</div>
  </div>
  <div class="drink">
    <div class="word">soft drink</div>
    <div class="word">grape ade</div>
  </div>
</div>
 
 
document.querySelectorAll('.word')  //결과 : NodeList(4) [div.word, div.word, div.word, div.word]
document.querySelector('.word')  //결과 : <div class="word">cheese</div>

 

querySelectorAll('.class 이름') 입력 시, .class 이름과 일치하는 모든 결과를 배열형태로 반환해준다.

배열이므로, 조회된 각 항목을 얻어내기 위해서는 index를 뒤에 달아주면 된다.

ex)  document.querySelectorAll('.word')[0] = 조회 결과 중 첫 번째 요소

 

querySelector('.class 이름') 입력 시, .class 이름과 일치하는 모든 항목 중, 제일 위에 있는 element만 반환해준다.

 

 

 

 

---

 

DOM에 추가 (append, appendChild)

 

이제 만들어진 element를 DOM의 document안에 넣어주어야 한다.

 

DOM 구조에 연결을 위해서,

 

추가하고 싶은 위치 선택(querySelector 등).append(선택된 변수이름 또는 '문자열')

 

를 이용하여 document에 추가할 수 있다.

 

 

 

어떤 element의 자식요소로 추가하고 싶다면, .appendChild method를 이용한다.

 

추가하고 싶은 위치 선택(querySelector 등).appendChild(선택된 변수이름)

 

선택 method(querySelector 등)를 이용한다면 사실상 .append와 .appendChild의 차이는 거의 없다.

다만, append는 괄호() 안에 문자열을 삽입할 수 있고, appendChild는 괄호안에 변수값을 넣어주어야만 한다.

일반적으로 append를 많이 쓴다.

 

<div class="contents">
  <div class="food">
    <div class="word">cheese</div>
    <div class="word">burger</div>
  </div>
  <div class="drink">
    <div class="word">soft drink</div>
    <div class="word">grape ade</div>
  </div>
</div>
 
 
let a = document.createElement('div')
a.textContent = 'coffee'
a.className = 'word'
 
document.querySelector('.drink').append(a)  //결과 : class="drink" 아래에 <div class="word">coffee</div>가 추가됨

 

---

 

 

4) element 삭제

 

element의 삭제는 remove method를 통해 가능하다.

remove method는 선택되는 element와 그 하위 element를 모두 삭제한다.

removeChild method는 부모.자식요소로 선택된 element만 삭제한다.

 

삭제하려는 element 선택 .remove(element 선택)

 

 

삭제하려는 부모 element 선택.removeChild(부모 element선택.childNodes[삭제하려는 child의 index])

 

 

<div class="contents">
  <div class="food">
    <div class="word">cheese</div>
    <div class="word">burger</div>
  </div>
  <div class="drink">
    <div class="word">soft drink</div>
    <div class="word">grape ade</div>
  </div>
</div>
 
 
let a = document.querySelector('.drink')
a.removeChild(a.childNodes[0])  // 결과 : <div class="word">soft drink</div>가 삭제됨
a.remove(a.childNodes[0])  // 결과 : <div class="drink">...</div> 전체가 삭제됨

 

15번 줄에서 childNodes[0]을 입력하였음에도, remove method를 사용하였기 때문에 child element가 아니라 부모 element(drink)가 모두 삭제되었음에 유의하자.

 

 

 

---

 

 

data-set

 

화면상에 보이지 않는 data로 HTML 코드 내에 숨겨놓는 data를 쓰기 위한 속성이다.

보통 서버상에서의 통신 등의 이유로 코드 내에 data를 남겨놓되, 화면상에 출력은 되지 않도록 하는 것이 필요하다.

그렇기 때문에 data-set 속성을 이용한다.

 

 

HTML

 

1 2 3

<div data-user="charlie" data-user-id="2">     charlie white </div> Colored by Color Scripter

cs

 

 

Javascript

 

1 2

$0.dataset.user // 'charlie' $0.dataset.userId // '2'

cs