[javascript] DOM의 활용

 

1. 요소 노드 선택하기

태그로 선택: document.getElementsByTagName("li"); 

id로 선택: document.getElementById(“id");

class로 선택: document.getElementsByClassName("class");

name으로 선택: document.getElementsByName("name");

* css 선택자로 선택:

document.querySelector('css') > 선택자에 해당하는 태그 중 가장 첫번째 태그 하나

document.querySelectorAll('css') > 선택자에 해당하는 태그 모음 (NodeList)

 

 

2. 요소 노드 생성하기

document.createElement('div'); > 생성하고자 하는 태그 이름으로 작성

(innerHTML로도 노드를 생성할 수 있지만 엄밀히 말해 생성은 아닌 것 같다. 노드 내부의 빈 곳을 새로운 내용으로 교체하는 것과 같은듯. 비어있는 곳에 요소 노드나 텍스트 노드를 할당함으로 노드를 생성하는 것처럼 보일 수 있다.)

 

 

3. 요소 노드 삭제하기

Node.remove();

 

 

4.요소 노드 이동하기

prepend, append, before, after 활용

 

1) node.prepend(): 노드 맨 앞에 삽입

오늘 목록의 두 번째 자식을 내일 목록의 맨 앞으로 이동

 

2) node.append(): 노드 끝에 삽입

내일 목록의 두 번째 자식을 오늘 목록의 맨 끝으로 이동

 

3) node.before(): 노드 이전에 삽입

오늘 목록의 두 번째 자식을 내일 목록의 마지막 자식의 앞으로 이동

 

4) node.after(): 노드 다음에 삽입

내일 목록의 두 번째 자식을 오늘 목록의 세 번째 자식 뒤로 이동

 

 

 

출처: 코드잇