11 :: DOM, 노드

11 :: DOM, 노드

728x90

엘리스 SW 엔지니어 트랙 11일차

오규석 코치님

DOM 이해하는 날

Document Object Model

태그는 노드라고 할 수 있다고 하신다

DOM 구성 될 때

태그, 텍스트, 주석까지 모두 노드다

Test1 // h1 태그도 노드 Test2 // 들어있는 Test2도 노드 // 줄바꿈도 노드 Test3 Test4 // 이 녀석도 노드 // 모든게 노드!! 라고 적은 이 주석도 노드

노드 탐색

nextSibling

firstChild

previousSlbling

nextElementSibling

등

하지만 직접 getElementyById, querySelector로 가져오기 때문에

잘 사용할 일은 없다고 한다

JavaScript에서 노드 만들어서 HTML에 넣기

let header = document.createElement('h2') // h2 태그 노드 만들고 let textNode = document.createTextNode("Hello World") // 텍스트 노드 만들고 header.appendChild(textNode) // 텍스트 노드를 header 노드의 자식으로 집어넣기 console.log(header); document.querySelector('body').appendChild(header) // body 태그안에 header를 집어넣기

이벤트

이벤트 처리 방법도 알아봤다

form 새로고침 방지

let form = document.querySelector('#form') form.addEventListener("submit", function(event) { event.preventDefault() // 새로고침 방지 form.reset() // 폼 리셋 })

마무리

무언가를 배울 때

어려워 보이는 용어에 겁이 생기는데

노드로 그런 녀석이었다

노드에 대한 이해가 아직 미완성 느낌이지만

분명히 한층 더해진 느낌이다

sagrada familia by Brandon Gurney #unsplash

from http://forgottenknowledge.tistory.com/177 by ccl(A) rewrite - 2021-11-09 21:27:17