DOM 조작하기

요소 노드 취득

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 텍스트 노드는 요소 노드의 자식 노드이고, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텐스트 노드나 어트리뷰트 노트를 조작하고자 할 때도 마찬가지다.

👍 querySelector / querySelectorAll

요소 노드를 취득하는 방법에는 여러가지가 있다. getElementById, getElementByClassName 등도 존재하지만 querySelector 을 사용하면 속도는 느리지만 일관된 방식으로 요소 노드를 취득할 수 있다는 장점이 있다.
querySelectorAll 은 여러 개의 요소 노드 객체를 갖는 NodeList 객체를 반환한다. NodeList 객체는 유사 배열 객체이면서 순회 가능한 이터러블이다.

여기서 querySelector 은 Document.prototype 이면서 Element.prototype 이다. 즉, createElement 의 반환값이나 Element 요소에서도 사용할 수 있는 메서드이다.

---

노드 생성 / 추가 / 삭제

createElement 메서드를 사용하면 요소 노드를 생성하여 반환한다. 메서드의 매개변수에는 tagName 의 문자열을 전달한다.

const li = document.createElement('li');

그러나 createElement 는 DOM 트리에 추가하는 메서드는 아니다. 즉, 요소 노드를 생성만 하고 추가하는 메서드는 appendChild 메서드를 사용해야 한다.

// createTextNode는 텍스트 노드를 생성하는 메서드
const textNode = document.createTextNode('Hello');

// textNode를 li 노드의 자식 노드로 추가
li.appendChild(textNode);

지정된 위치에 노드를 삽입하기 위해서는 insertBefore 메서드를 사용하면 된다. insertBefore 메서드는 파라미터로 두 개의 인수를 전달받는다. 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다.

removeChild 메서드는 인수로 전달한 노드를 DOM에서 삭제한다. 삭제할 노드는 removeChild 메서드를 호출한 노드의 자식 노드이어야 한다.

---

어트리뷰트 조작

어트리뷰트 조작도 가능하다. getAttribute 와 setAttribute 를 사용해서 어트리뷰트 값을 가져오거나 설정할 수 있다.

const input = document.querySelector('.user');
// value 어트리뷰트 값을 읽는다.
const inputValue = input.getAttribute('value');
// value 어트리뷰트 값을 'Hello'로 변경한다.
input.setAttribute('value','Hello');

---

innerHTML 과 element (feat. textContent)

innerHTML 은 요소 노드의 모든 HTML 마크업을 문자열로 반환한다. textContent 는 HTML 마크업을 무시하지만 innerHTML 은 HTML 태그가 포함된 모든 것을 반환한다.

😖 innerHTML의 단점

1. 크로스 사이트 스크립팅 공격에 취약.

2. 기존의 자식 노드까지 모두 제거하고 다시 새롭게 자식 노드를 생성.

   • innerHTML 을 사용해서 HTML 마크업을 할당하는 경우에는 기존의 모든 노드들을 제거하고 innerHTML에 할당한 문자열을 HTML로 다시 생성한다. 유지되어도 좋은 기존의 자식 노드들까지 모두 제거하기 때문에 효율적이지 않다.

3. 새로운 요소를 삽입하고 싶은 경우 위치를 지정할 수 없음.

이처럼 innerHTML 프로퍼티는 복잡하지 않은 요소를 새롭게 추가하거나, 추가한 뒤 요소의 변화가 없는 경우에는 유용하지만 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입하는 경우에는 사용하지 않는 것이 좋다. 이럴 땐 위에 설명한 요소를 생성하고 삽입하는 메서드를 사용하는 것이 좋다. 또한 태그 내부의 텍스트 노드들만 변경이 자주 일어나는 경우에도 textContent 를 사용하는 것이 좋다.