Select & Manipulate

css에서 요소를 선택하고, 해당 요소에 스타일링을 지정한 것과 같이, DOM에서도 요소(Element)를 선택하고, 그 요소가 해야할 일을 처리하는 코드를 작성할 수 있다. 이 때 DOM 요소를 선택하고 조작하는 APIs는 "document" 객체에서 제공하는 내장 메서드이고, 이것을 DOM APIs라고 부른다.  

 

+) Element | DOM에서 반환하는 하나의 JS Object를 말한다.  

Select Elements | document. ~

1. getElementById(str) | 해당하는 id를 속성 값으로 갖는 요소를 찾아 반환, 해당하는 요소가 없으면 null 반환
   • 이 때 요소는 html의 요소가 아니라, DOM의 JS Object이다. 
2. getElementsByTagName(str) | 해당하는 tag 요소를 모두 찾아 HTMLCollection으로 반환, 해당하는 요소가 없으면 텅 빈 HTMLCollection을 반환
   • HTMLCollection | array-like iterable
     • ✅ index, length, for... of 
     • ❌ array 내장 method(ex. map...) 
3. getElementsByClassName(str) | 해당하는 class를 속성 값으로 갖는 요소를 모두 찾아 HTMLCollection으로 반환
4. querySelector(str) | css selector를 이용해서 원하는 타입을 지정하고, 이에 해당하는 첫번째(한 개) 요소를 반환
   • document.querySelector("#id"), (".class"), ("tagName")
   • 자식 선택자 뿐만 아니라 :nth-of-type()과 같은 가상 선택자도 함께 사용할 수 있다. 
5. querySelectorAll(str) | css selector를 이용해서 원하는 타입을 지정하고, 이에 해당하는 모든 요소를 NodeList (array-like iterable)로 반환

 

const banner = document.getElementById('banner');
console.dir(banner); // banner obj가 갖고있는 모든 property와 method를 확인할 수 있다.

Manipulate Elements | selectedElement. ~

모든 DOM 요소는 수백개의 property와 method를 가지고 있다. 원하는 요소를 선택한 뒤에, 해당 요소의 property나 method를 이용하면 원하는 대로 요소를 조작할 수 있다. 아래는 자주 사용되는 property와 method를 타입 별로 정리한 것이다.  

 

innerHTML vs. innerText vs. textContent

 

1. contents | 요소의 컨텐츠 조작하기, contents is which existed in between <opening> and </closing tag>
   • innerHTML | 요소의 텍스트 컨텐츠 뿐만 아니라 html 마크업 컨텐츠 전체를 포함해서 반환
   • innerText | 현재 렌더링 된 텍스트 컨텐츠를 반환
   • textContent | 현재 렌더링 되지 않은 텍스트 컨텐츠(ex. display: none)도 포함해서 반환, html 파일에서 줄바꿈 된 영역을 표현해서 반환
2. attributes | 요소의 속성(href, src, id, class...) 조작하기 
   
   • getAttribute("attr") | html 파일에서 해당 속성에 입력된 값을 직접 반환 
   • setAttribute("attr", "value") | 해당 속성의 값을 지정한 값으로 추가/변환
   • element.src = "" | 원하는 요소를 선택한 뒤에 속성 값을 직접 선택할 수도 있다. 이 때에는  html 파일에서 입력된 값을 가져오는 것이 아니라, js 파일을 통해 계산된 값(computed value)을 가져오기 때문에 getAttribute와 미세한 차이가 있다. 
3. styling | 요소의 스타일 변경하기 
   
   • ❌ element.style | 가능한 모든 style property가 포함된 CSSStyleDeclaration 객체를 반환한다.
     • 이 때 property가 css의 문법(ex. font-size)과는 달리 camel case(ex. fontSize)로 지정되어있다. 
     • html 파일에서 태그 내부의 style 속성을 이용해서 지정한 값(inline-style)만 포함되어있고, css 파일에 지정되어 있는 style 속성 값은 포함되어 있지 않다. 
     • 스타일을 변경할 수는 있고, 여기서 지정한 스타일은 html 태그 내부의 속성값으로 지정된다. 따라서 html의 역할의 관점에서 바라보았을 때 좋은 방법이 아님! |   element.style.color = "green" 
   • ❌ setAttribute("class", "value") | 해당 요소에 지정되어 있던 class를 전부 새로운 값으로 덮어버리기 때문에, 이전 클래스 값을 저장하는 코드를 추가로 작성해야 한다.
   • ✅ element.classList | 요소에 지정되어있는 클래스 값을 모두 확인해 볼 수 있다. 
     • classList.add("value"), classList.remove("value") | 특정 클래스를 추가/삭제함으로써 css에서 클래스 선택자로 스타일링한 내용을 제어할 수 있다. 
     • classList.contains("value") | 특정 클래스를 포함하고 있는지, 아닌지를 테스트해서 boolean으로 반환 
     • classList.toggle("value") | 특정 클래스가 현재 포함되어있다면 클래스를 삭제하고, 아니면 클래스를 추가
   • window.getComputedStyle(element) | 해당 요소에 현재 적용되어 있는 모든 스타일 정보를 가지고 있는 CSSStyleDeclaration 객체를 반환, 자주 사용하지는 않음. 
4. 계층 간의 이동 | 한 요소의 parent, child, sibiling 으로 이동한 뒤 그 요소를 지정 
   • parentElement 
   • children | 해당 요소의 자식 요소를 HTMLCollection으로 반환  
   • sibling
     • ❌ nextSibling, previousSibling | 다음/이전 형제요소를 ??? DOM node로 반환, 잘 사용하지 않음
     • ✅ nextElementSibling, previousElementSibling | 다음/이전 형제요소를 DOM 요소로 반환
5. create & append, or remove | 요소를 만들어서 추가하거나, 요소를 삭제하기  
   • document.createElement("tagName") | 요소를 만들지만, document에 추가되는 것은 아니다.
   • append 
     • element.appendChild(child) | 선택된 요소에 원하는 요소(주로 createElement로 만든 요소)를 마지막 자식으로 추가함으로써 document에 추가한다. old version. 
     • element.append(child, child2, ...) | 선택된 요소에 텍스트, element, node를 마지막 자식으로 추가함으로써 document에 추가한다. 여러 개를 한번에 추가할 수 있다. new version. 
     • element.prepend(child) | 마지막 자식 대신 첫번째 자식으로 추가되고, append와 동일하게 작동한다. 
     • element.insertAdjacentElement("position", element) | position 값을 이용해서 선택된 요소의 자식 요소 또는 형제 요소로서 document에 추가한다. 
       • element.after(node), element.before(node), node.insertBefore(new, ref)와 같은 방법도 있다. 
   • remove
     • 👎 element.removeChild(child) | 선택된 부모 요소에서 해당 자식 요소를 제거한다. 아래와 같이 주로 parentElement 메서드와 함께 사용하기 때문에 번거롭다. 
       •  h1.parentElement.removeChild(h1); 
     • ✅ element.remove() |  선택된 요소를 제거한다. 

 

example 

 

const banner = document.querySelector('#banner');
banner.innerHTML += "<em>hello, world!</em>"; // += is possible!

 

기존에 요소의 html 마크업을 유지하면서, 다른 마크업을 추가하고 싶다면 += operator를 이용하면 된다. 

 

for (let i = 0; i < 100; i++) {
    const btn = document.createElement("button");
    btn.innerText = "hey!";    
    con.appendChild(btn);
}

// not working in expected way 
const btn = document.createElement("button");
btn.innerText = "hey!";   
for (let i = 0; i < 100; i++) {
    con.appendChild(btn);
}

 

반복문을 이용해서 요소를 여러개 만들고 appending 하려면 create, append 코드를 모두 함께 블럭 안에서 작성해야 한다.