DOM Node 조작하기

• DOM을 조작할 수 있는 API

document. 으로 사용할 수 있는 APIs :  https://www.w3schools.com/jsref/dom_obj_document.asp

element. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_all.asp

• 유용한 DOM 탐색 엘리먼트 속성

구글의 검색창 form을 변수 f로 지정

tagName : 엘리먼트의 태그명 반환

textContent : 노드의 텍스트 내용을 설정하거나 반환

nodeType : 노드의 노드 유형을 숫자로 반환

firstElementChild : 첫번째 자식 엘리먼트를 반환

(firstChild는 공백이나 text도 자식 엘리먼트로 인식하기 때문에 자주 쓰지 않는다)

• 유용한 DOM 조작 API

1. 해당 엘리먼트.appendChild(추가할 노드) : 해당 엘리먼트에 마지막 자식 노드로 노드를 추가

2. 해당 엘리먼트.removeChild(삭제할 노드) : 해당 엘리먼트의 특정 노드 제거
   

exam1

exam2

             

 

 

3. 해당 엘리먼트.insertBefore(기준 노드, 추가할 노드) : 기준 노드 뒤에 추가할 노드를 더함
   (복붙이 아니라 잘라내기와 같음)

                                

 

※ 요즘 프론트 프레임워크의 경우, 노드의 추가 삭제를 좀 더 간편하게도 가능(위의 방법은 표준 방법)

• HTML을 문자열로 처리해주는 DOM API
  (매우 유용 - 위의 DOM 조작보다 간편 : 생성과 속성을 한번에)

1. innerText : 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환(getter, setter 모두 가능)
   

        

        

        

        getter

        

        setter

2. innerHTML : 지정된 엘리먼트의 내부 html을 설정하거나 반환(getter, setter 모두가능)
                    엘리먼트를 생성과, 속성을 한번에 줄 수 있으므로 유용    

getter

setter

※ innerText는 문자를 추가하는 정도이지만, innerHTML은 tag를 더하여 엘리먼트 자체를 추가할 수도 있다.

※ 2번째 <p> 태그를 지정할 때

 

추가/삭제에 따라 순서가 바뀔 수 있으므로 class나 id 속성을 추가하여 지정하는 것이 더 안정적

※ insertAdjacentHTML-vs-innerHTML-vs-appendChild 

    2014년도    

    2018년도(비슷해짐)