뒤로 가기
홈으로 이동
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총 정리 표
✔ 학습 완료

이런 러닝패스는 어때요?

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

서원석의 프로필 이미지
서원석
의 학습노트

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

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기