LearnFit

 YouTube, 자바스크립트 DOM & EVENT #2 부모, 자식, 형제 노드

서원석님의 학습노트

자바스크립트 DOM & EVENT #2 부모, 자식, 형제 노드

#전체

#개발자

#프론트엔드

#자바스크립트

#javascript

#js

#es6

#강좌

#tutorial

#중급

#intermediate

#dom

#event

#돔

#이벤트

#parentNode

#childNodes

#firstChild

#lastChild

#previousSibling

#nextSibling

#parentElement

#children

#firstElementChild

#lastElementChild

#previousElementSibling

#nextElementSibling

00:26document.querySelectorAll('p') document.getElementsByTagName('p') 반환값이 각각 NodeList, HTMLCollection입니다. 이후 차이점을 설명합니다.

02:10parentNode로 부모 노드에 접근가능

02:16parentElement로도 접근가능 *그런데 대체 차이가 무엇일까요?

03:02Element, 즉 요소 노드는 HTML tag로 이루어진 요소를 의미합니다.

03:05Node는 다양한 타입이 존재합니다 *HTML Element도 type 중 하나

03:31Attribute node도 Node의 타입 중 하나입니다. *img 태그로 예를 들자면, alt, src 같은 것들입니다.

03:33Text node도 Node 타입 중 하나입니다. *<p>LearnFit</p> 여기서 LearnFit이 Text Node인 것이죠.

03:39주석, Document도 각각 Node 타입입니다.

03:44즉, parentNode는 Node의 type에 상관없이 부모인 Node를 반환합니다.

03:50반면 parentElement는 부모인 Node 중 Element Node type만 반환합니다.

04:23ul의 childNodes는 자식 Node들을 반환합니다.(9개) *Node의 type을 상관하지 않고 모두 가져옵니다.

04:30ul의 children은 자식 Element Node들만 반환합니다.(3개)

06:46firstChild, lastChild는 자식 Node를 반홥합니다. *Node의 타입 상관 없이

07:04firstElementChild, lastElementChild는 자식 element Node를 반환합니다.

07:51형제 노드에 대한 접근 previousSibling, nextSibling(모든 형제 Node를 대상으로 접근) previousElementSibling, nextElementSibling(형제 중 Element Node를 대상으로 접근)

07:54총 정리 표

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기