[JS] DOM 조작

DOM 동적으로 조작하기

• document 객체의 노드를 생성, 추가, 제거하는 메서드로 DOM을 동적으로 조작할 수 있다.
• 노드 생성 뿐만 아니라 노드의 속성을 제어할 수 있다.
• 요소 노드의 innerHTML, innerText 로 간단하게 동적으로 내용을 수정할 수 있다.
  => 많이 사용하면 성능이 저하되므로 적절히 사용해야 한다.

1. document.createElement()

• 인자 태그의 종류를 문자열의 형태로 전달받고 해당 요소를 동적으로 생성한다.
• 요소가 하나 생성되지만 문서에 나타내지는 않는다.

// div 요소를 하나 생성 => 문서에 출력 x
let boxElement = document.createElement("div");

2. Node.appendChild()

• 인자로 전달된 노드를 호출한 노드의 자식 노드로 문서에 실제로 나타낸다.
  => 요소 노드 뿐만 아니라 텍스트 노드도 나타낼 수 있다.

let container = document.querySelector(".contaier");
let divElem = document.createElement("div");

// 생성 된 div 요소를 .container 요소의 자식 요소로 출력
container.appendChild(divElem);

3. document.createTextNode

• 인자로 전달받은 문자열로 된 텍스트 노드를 생성한다.

let container = document.querySelector(".contaier");
let pElem = document.createElement("p");
// p 태그에 출력하고자 하는 내용의 텍스트 노드 생성
let textNode = document.createTextNode("p태그입니다");

// p 태그에 텍스트 노드 출력
pElem.appendChild(textNode);
// .container 태그에 p 태그 출력
container.appendChild(pElem);

4. document.createAttribute

• 인자로 전달받은 이름의 속성 노드를 생성한다.
• 속성노드.value로 속성값을 지정할 수 있다.
• 요소.setAttritubeNode 의 인자로 전달하여 속성을 적용할 수 있다.
  => 요소.setAttritube 로 대체 가능

let container = document.querySelector(".contaier");
// style 속성 노드 생성
let styleAttr = document.createAttribute("style");
// 생성된 style 속성 노드의 값 할당
styleAttr.value = "background-color: red;";
// .container 의 속성 노드로 지정
container.setAttributeNode(styleAttr);

5. Element.setAttribute

• 요소의 속성값을 추가 혹은 변경한다.
• 첫번째 인자로 변경하려는 스타일 이름(문자열), 두번째 인자로 적용하려는 속성값을 전달한다.
• document.createAttribute를 이용한 방식보다 간단하게 속성 적용이 가능하다.

let inputUserName = document.querySelector("input[name=userName]");
// input태그의 readonly 속성 활성화
inputUserName.setAttribute("readonly", true);

6. Element.innerText

• 요소 노드가 가지는 텍스트 노드의 값을 참조하거나 갱신한다.
• Element.innerText에 값을 할당하면 텍스트 노드의 내용이 갱신된다.

<p>
	저는 p태그입니다.
</p>

let pElem = document.querySelector("p");
console.log(pElem.innerText);

pElem.innerText = "동적으로 변경되었습니다.";
console.log(pElem.innerText);

7. Element.innerHTML

• 요소에 포함된 HTML을 참조하거나 갱신한다.
• Element.innerText와 다르게 문자열을 할당하면 html 요소로 파싱하여 문서에 나타낸다.
  => html 문법에 맞게 태그, 속성 등을 문자열로 작성하면 document가 파싱하여 문서에 출력한다.
• += 연산자를 사용하여 간단하게 동적으로 요소를 추가하는 것이 가능하다.
• document.crateElement에 비해 성능이 떨어져 써야한다면 문자열을 길게 더해 한번만 할당하는 것을 권장한다.

<div class="container"></div>

let container = document.querySelector(".container");

console.log(container.innerHTML);
container.innerHTML = "<div class='box'></div>";
container.innerHTML += "<div class='box'></div>";