자바스크립트로 HTML을 조작하는 방법

 

 

자바스크립트로 HTML을 조작하는 방법을 정리해보겠습니다.

 

지난 글에서 문서 객체 모델(DOM)과 노드에 대해 개념을 알아보았습니다. 

 

문서 객체 모델(DOM), 노드 구조와 개념 정리

 

이것들은 엄밀히 말해서 자바스크립트 언어가 아닌 웹 API지만, 자바스크립트로 조작이 가능합니다.

 

이번 글에서는 이러한 웹API를 이용해서 HTML문서를 조작하는 메소드들을 다음과 같이 용도별로 정리해보았습니다.

메소드 앞에 Node나 Node의 하위 개념인 Element, CharacterData 등으로 풀네임(?)을 적었지만, 실제 사용할때는 생략합니다.

 

또한 사용할 수 있는 용도가 방대하기 때문에, 이번 글에서는 메소드의 이름과 용도만 알아보고 실사용 예제는 조금씩 따로 작성해서 본문에 링크하도록 하겠습니다.

 

 

1. 접근

 

일반적인 선택

 

일반적으로 다음과 같이 태그, 아이디, 클래스, 네임, CSS 선택자로 요소를 선택할 수 있습니다.

 

• 태그 요소 선택 : document.getElementsByTagName(태그 이름)
• 아이디 요소 선택 : document.getElementById(아이디 이름)
• 클래스 요소 선택 : document.getElementsByClassName(클래스 이름)
• 네임 속성 요소 선택 : document.getElementsByName(name 속성값)
• CSS 선택자(id는 #, class는 .)로 검색한 첫번째 요소를 선택 : document.querySelector(선택자)
• CSS 선택자로 선택된 모든 요소를 배열로 선택 : document.querySelectorAll(선택자)

 

참고로 querySelectorAll는 콤마로 구분하여 여러 선택자를 동시에 입력할 수도 있습니다.

 

 

객체 집합 선택

 

이 밖에 document object collection(객체 집합)으로 요소들을 선택할 수도 있습니다.

 

객체 집합도 종류가 다양하지만 주로 쓰이는 것들은 아래와 같습니다.

 

• form 요소를 모두 반환 : document.forms
• img 요소를 모두 반환 : document.images
• href속성을 가지는 area, a 요소를 모두 반환 : document.links

노드 정보 접근

 

노드의 정보에 접근하는 기본적인 방법으로는 아래 3가지가 있습니다.

 

• Node.nodeName : 요소의 태그 이름, 속성 이름, 텍스트값을 읽어옵니다.
• Node.nodeType : 요소 노드, 속성 노드, 텍스트 노드, 주석 노드, 문서 노드별 숫자값 읽어옵니다.
• Node.nodeValue : 요소, 요소의 속성, 요소의 텍스트에 접근하고 변경하여 저장할 수 있습니다.

 

 

노드 관계로 접근

 

또한 노드들의 관계를 이용하여 접근하는 방법으로 다음과 같은 것들이 있습니다. 참고로 제이쿼리에서는 이를 트래버싱이라고 부릅니다.
 

• Node.parentNode : 부모 노드에 접근합니다.
• Node.childNodes : 자식 노드 리스트에 접근합니다.
• Node.firstChild : 첫 번째 자식 노드에 접근합니다.
• Node.lastChild : 마지막 자식 노드에 접근합니다.
• Node.nextSibling : 다음 형제 노드에 접근합니다.
• Node.previousSibling : 이전 형제 노드에 접근합니다.

 

document.getElementById 등으로 특정 요소를 선택한 후, 부모나 자식 요소를 노드를 선택하는 등으로 사용할 수 있겠습니다.

 

 

속성에 접근

 

• Element.hasAttribute : 지정한 속성을 가지고 있는지 검사할 수 있습니다. hasAttribute(속성)
• Element.getAttribute : 지정한 요소의 속성을 가져옵니다. getAttribute(속성)

2. 생성

 

• document.createElement : 지정된 HTML 요소를 생성합니다. document.createElement(태그 이름)
• document.createTextNode: 지정된 텍스트 노드를 생성합니다. document.createTextNode(텍스트)
• document.createAttribute : 지정된 HTML 요소의 속성을 생성합니다. document.createAttribute(생성할 속성이름)
• document.createTextNode : 텍스트 요소를 생성합니다. document.createTextNode(텍스트)
• document.write : 텍스트를 출력합니다. document.write(텍스트)
• Node.cloneNode : 요소를 복제합니다. 복제할 노드.cloneNode(자식 노드까지 복제할지 여부를 true, false로 기입)

 

참고로 createAttribute로 생성한 속성 이름이 style과 같이 이미 존재한다면, 기존 속성을 무시하고 덮어씌우게 됩니다.

 

 

3. 변경

 

HTML요소나 요소의 속성을 원하는대로 변경할 수 있습니다.

 

• Node.nodeValue : 요소, 요소의 속성, 요소의 텍스트에 접근하고 변경하여 저장할 수 있습니다.
• Element.setAttribute(속성 이름, 부여할 속성 값), Element.setAttributeNode : 요소의 속성값을 변경할 수 있습니다.

 

• Element.innerHTML : 요소의 내용에 접근하거나 변경할 수 있습니다. 자식 요소를 포함해 하나의 문자열로 만들 수 있습니다.
• Node.textContent, innerText : 텍스트 콘텐츠에 접근하거나 변경할 수 있습니다. 보안상 innerHTML이 권장됩니다.

4. 교체

 

• Node.replaceChild : 기존 자식 노드를 새로운 자식 노드로 교체합니다. 부모 노드.replaceChild(새 자식 노드, 기존 자식 노드)
• CharacterData.replaceData : 텍스트를 새로운 텍스트로 교체합니다. 텍스트 노드.replaceData(오프셋, 문자수, 새 텍스트)

 

replaceData의 오프셋은 기존에 존재하는 텍스트 데이터에서 몇 번째 위치부터 교체할지를 정하는 것이며, 0부터 시작합니다.

 

 

5. 추가

 

다음은 요소를 어디에 추가할 것인지 지정하는 메소드들 입니다.

 

• Node.appendChild : 요소를 특정 요소의 자식 리스트 끝에 붙여 추가합니다. appendChild(추가할 자식노드)
• Node.insertBefore : 요소를 기준 자식 노드 바로 앞에 추가합니다. insertBefore(추가할 노드, 기준 자식노드)
• Node.insertData : 텍스트 노드의 데이터에 새로운 텍스트를 추가합니다. insertData(오프셋, 추가할 텍스트 데이터)

 

insertData의 오프셋 또한 replaceData의 오프셋과 사용 방법은 똑같습니다. 교체가 아니라 삽입이라는 점만 다릅니다.

6. 제거

 

• Node.removeChild : 자식 노드 리스트에서 특정 자식 노드를 제거합니다. removeChild(제거할 자식 노드)
• Element.removeAttribute : 특정 노드의 속성 이름으로 속성을 제거합니다. removeAttribute(제거할 속성 이름)

 

 

 

여기까지 자바스크립트로 HTML을 조작하는 방법에 대해 용도별로 메소드를 알아보았습니다.

 

글이 길어진 관계로, 이벤트나 스타일에 대해서는 따로 작성해서 링크하도록 하겠습니다. 읽어주셔서 감사합니다.