제수기 - 제발 수업내용을 기억해라

Modify DOM

innerHTML

getter : 자식 HTML 태그를 포함한 문자열로 반환해서 가져옴

setter : HTML 태그가 포함된 문자열인 경우, HTML 태그 처리를 해준다. (실제 HTML 태그를 파싱 처리한다)
()

innerText(textContent)

getter 자식 HTML 태그가 있건 말건 그걸 제외한 문자열로 반환

setter HTML 문자가 포함된 문자열을 대입해도 텍스트로 처리된다. (HTML 파싱처리를 안 해준다.)

innerText는 innerHTML 안에 있는 표시까지 그대로 출력해버린다.

참고

outerHTML

getter 태그 자신을 포함해 문자열 반환

setter 태그 자신을 셀프로 대체

---

element.insertAdjancentHTML

기존 요소를 수정하지 않고, 삽입처리하므로 innerHTML 대비 효율적이고 빠르다고 할 수 있다.

element.insertAdjancentHTML(position, html)
begin : 시작태그를 의미한다. end : 종료태그를 의미한다.
beforebegin : 시작태그의 전 | 이전 형제 요소로 추가
afterbegin : 시작태그 뒤 | 첫번째 자식 요소로 추가
beforeend : 종료태그 전 | 마지막 자식 요소로 추가
afterend : 종료 태그 뒤 | 다음 형제 요소로 추가

-> 수업 진행 중 div -> h2로 변경됐음

Elemnt 생성

• elementNode : document.createElement(tagName)
• textNode : document.createTextNode(text)

Node 생성 후에 기존 DOM Tree에 추가해야 한다.

• parent.appendChild(child)
• parent.append(child, ...)

h2

img

Element 제거

remove

값을 날려버림
요소 삭제
element.remove():element
자기자신을 제거

removeChild

자식 삭제
parent.removeChild(child)
자식요소 하나를 제거

innerHTML

모든 자식 요소 제거
parent.innerHTML = '';

Element 이동

기준요소 이동