- 메소드 앞에 Node나 Node의 하위 개념인 Element, CharacterData 등으로 풀네임(?)을 적었지만, 실제 사용할때는 생략!
- 아래에 있는 것들 외에도 더 많은 것들이 있음! 현재 여기 있는 것들은 각 종류별로 대표적인 것만!
접근
일반적인 선택
일반적으로 다음과 같이 태그, 아이디, 클래스, 네임, CSS 선택자로 요소를 선택할 수 있음
- 태그 요소 선택 : document.getElementsByTagName(태그 이름)
- 아이디 요소 선택 : document.getElementById(아이디 이름)
- 클래스 요소 선택 : document.getElementsByClassName(클래스 이름)
- 네임 속성 요소 선택 : document.getElementsByName(name 속성값)
- CSS 선택자(id는 #, class는 .)로 검색한 첫번째 요소를 선택 : document.querySelector(선택자)
- CSS 선택자로 선택된 모든 요소를 배열로 선택 : dument.querySelectorAll(선택자)
참고로 querySelectorAll는 콤마로 구분하여 여러 선택자를 동시에 입력할 수도 있음
객체 집합 선택
document object collection(객체 집합)으로 요소들을 선택할 수도 있음
- form 요소를 모두 반환 : document.forms
- img 요소를 모두 반환 : document.images
- href속성을 가지는 area, a 요소를 모두 반환 : document.links
노드 정보 접근
- 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(속성)
생성
- 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과 같이 이미 존재한다면, 기존 속성을 무시하고 덮어씌우게 됨
변경
HTML요소나 요소의 속성을 원하는대로 변경할 수 있음
- Node.nodeValue : 요소, 요소의 속성, 요소의 텍스트에 접근하고 변경하여 저장할 수 있음
- Element.setAttribute(속성 이름, 부여할 속성 값), Element.setAttributeNode : 요소의 속성값을 변경할 수 있음
- Element.innerHTML : 요소의 내용에 접근하거나 변경할 수 있습니다. 자식 요소를 포함해 하나의 문자열로 만들 수 있음
- Node.textContent, innerText : 텍스트 콘텐츠에 접근하거나 변경할 수 있습니다. 보안상 innerHTML이 권장됨.
교체
- Node.replaceChild : 기존 자식 노드를 새로운 자식 노드로 교체함. 부모 노드.replaceChild(새 자식 노드, 기존 자식 노드)
- CharacterData.replaceData : 텍스트를 새로운 텍스트로 교체함. 텍스트 노드.replaceData(오프셋, 문자수, 새 텍스트)
replaceData의 오프셋은 기존에 존재하는 텍스트 데이터에서 몇 번째 위치부터 교체할지를 정하는 것이며, 0부터 시작.
추가
다음은 요소를 어디에 추가할 것인지 지정하는 메소드
- Node.appendChild : 요소를 특정 요소의 자식 리스트 끝에 붙여 추가함. appendChild(추가할 자식노드)
- Node.insertBefore : 요소를 기준 자식 노드 바로 앞에 추가함. insertBefore(추가할 노드, 기준 자식노드)
- Node.insertData : 텍스트 노드의 데이터에 새로운 텍스트를 추가함. insertData(오프셋, 추가할 텍스트 데이터)
insertData의 오프셋 또한 replaceData의 오프셋과 사용 방법은 똑같음. 교체가 아니라 삽입이라는 점만 다름.
제거
- Node.removeChild : 자식 노드 리스트에서 특정 자식 노드를 제거함. removeChild(제거할 자식 노드)
- Element.removeAttribute : 특정 노드의 속성 이름으로 속성을 제거함. removeAttribute(제거할 속성 이름)
느낀점
- 메소드는 있는데, 활용 예제가 없어서 아쉽다 ㅠㅠ
참고
#Software Engineer #IRISH