[js] DOM_element

웹문서에서 처음 화면에 내용이 보이지 않다가 클릭이나 이벤트 등이 발생하면 내용이 나타나는 경우가 있다
이럴 때 css의 display 속성을 사용해서 만들 수도 있지만 DOM 트리에 새로운 노드를 추가하는 방법도 있다
BUT 주의할 점! 노드를 추가하면 단순히 요소 노드 뿐만이 아니라 텍스트와 속성 노드도 함께 추가해야 한다

DOM에서 새로운 노드를  만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 한다.
노드리스트란? DOM에 접근할 때 querySelectorAll() 메소드를 사용해 여러 노드들의 정보를 저장한 것이다

 

createElement
텍스트 노드를 사용하는 새로운 요소 추가하기

1. 요소 노드 만들기-createElement() 메소드

var newP = document.createElement('p');

 -> 새로운 노드를 만든 것이지 웹문서에 새로운 노드를 추가한 게 아니다

 

2. 텍스트 노드 만들기-createTextNode() 메소드

var txtNode = document.createTextNode('dom');

-> 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결한다

 

3. 자식 노드 연결하기-appendChild() 메소드

부모노드.appendChild(자식노드)

newP.appendChild(txtNode);
document.getElementById('info').appendChild(newP);

-> 요소와 텍스트 노드가 연결되고 웹문서에 추가되었다.

 

 

insertBefore()

E.insertBefore(A, B) : E의 child 중 B 앞에 A를 child로 insert

var para = document.createElement('p');
var node = document.createTextnode('insertBefore()');
para.appendChild(node);
child = document.getElementById('p1');
element.insertBefore(para, child);

-> child를 기준으로 before. para가 child.

 

 

removeChilde()

child = document.getElementById('p2');

element.removeChild(child);