엘리스 SW 엔지니어 트랙 11일차
오규석 코치님
DOM 이해하는 날
Document Object Model
태그는 노드라고 할 수 있다고 하신다
DOM 구성 될 때
태그, 텍스트, 주석까지 모두 노드다
<html>
<head></head>
<body>
<h1>Test1</h1> // h1 태그도 노드
<h1>Test2</h1> // 들어있는 Test2도 노드
// 줄바꿈도 노드
<div style="border: 1px solid black">
<h4>Test3</h4>
<h4>Test4</h4>
</div>
// 이 녀석도 노드
</body>
</html>
// 모든게 노드!! 라고 적은 이 주석도 노드
노드 탐색
- 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() // 폼 리셋
})
마무리
무언가를 배울 때
어려워 보이는 용어에 겁이 생기는데
노드로 그런 녀석이었다
노드에 대한 이해가 아직 미완성 느낌이지만
분명히 한층 더해진 느낌이다
'Web Dev > ELICE' 카테고리의 다른 글
| 13 :: 스코프, 호이스팅, 실행컨텍스트 그리고 문제들 (0) | 2021.11.11 |
|---|---|
| 12 :: 노드 복습, 자바스크립트 카레이싱 (1) | 2021.11.10 |
| 10 :: 자기소개 페이지 만들기 (0) | 2021.11.06 |
| 9 :: JavaScript 활용, 난이도 급 상승 (0) | 2021.11.05 |
| 8 :: JavaScript 입출력, Number() parseInt(), 정규표현식 복습 (0) | 2021.11.04 |