[💻 코드스테이츠 FE 44기] 부트캠프 - DOM

JiEun·2023년 3월 7일

DOM 부트캠프 코드스테이츠 프론트엔드

부트캠프[코드스테이츠 FE 44기]

목록 보기

16/81

✔️ 시작

이번 학습은 DOM에 대해 알아 보았으며 HTML과 Javascript를 연결하는 방법에 대해 배웠다.

📍 배운것

📌 DOM(Document Object Model)

DOM은 Javascript언어의 일부가 아닌 웹 사이트를 구축하는 Web API 이다.
DOM을 사용해 문서와 해당 요소에 엑세스 한다.
<script> 태그를 이용해 HTML를 Javascript와 연결한다.
트리 구조(부모가 자식을 여러개 가진다.)

✔️ <body>하단에 <script>태그를 넣어야하는 이유

HTML 읽을 때 script를 만나면 멈추는 부분이 생기고 그 만큼 지연된다.

Javascript가 생성되지 않은 DOM 조작을 시도할 수 있다.
<html>
  <head></head>
  <body>
    ...
  	<script src=""></script>
  </body>
</html>

📌 HTML요소 Javascript에 불러오기

getElementById : 아이디 이름 작성(단일)
getElementsTagName : 태그 이름 작성(다중)
gatElementsByClassName : 클래스 이름 작성(다중)
querySelector : css selector 형식으로 작성(단일)
querySelectorAll : css selector 형식으로 작성(다중)

📌 부모, 자식, 형제 노드 접근하기

1. 부모 노드

parentNode : 부모 노드 반환
parentElement : 부모 노드의 요소 반환

2. 자식 노드

childNode : 자식 노드 중 모든 노드 반환 (text, comment 모두 포함)
children : 자식인 노드 중 요소 반환
firstchild/lastchild : 맨 처음/마지막 노드 반환
firstElementChild/lastElementChild : 맨 처음/마지막 노드의 요소 반환

3. 형제 노드

previousSibling/nextSibling : 기준이 되는 노드의 이전/다음 노드를 반환
previousElementSibling/nextElementSibling : 기준이 되는 노드의 이전/다음 요소를 반환

	모든노드	요소 노드만
부모	parentNode	parentElement
자식	childNodes	children
	firstChild	firstElementChild
	lastChild	lastElementChild
형제	previousSibling	previousElementSibling
	nextSibling	nextElementSibling

참고 : 코딩앙마
🔗 https://youtube.com/playlist?list=PLZKTXPmaJk8JVQv3XSNF8yJMdsxbFrO3S

📌 DOM 제어

createElement : 요소 생성
append/appendChild : 요소 추가
classList : class 접근
- add : 추가
- remove : 삭제
- toggle : 추가/삭제
- replace : 변경
setAttribute : 속성 추가
remove/removeChild : 요소 삭제

✏️ 마치며

DOM에 대해 자세히 배울 수 있었고 HTML에 Javascript에 어떻게 접근해야하는지, 추가/삭제 등 다양한 내용을 배웠다.

DOM이 대략적인 의미를 알고 있었지만 이번 학습을 통해 어떤 뜻인지 자세히 알 수 있었던 시간 이였다.

그리고 내가 작업하고 있는게 정확히 어떤 명칭을 갖고 있는지도 알 수 있었다.

아직 Javascript의 길은 먼 거 같다...

JiEun

💻 프론트엔드를 목표로 성장 중! (알아봤던 내용 등을 정리하기)

[💻 코드스테이츠 FE 44기] 부트캠프 - DOM

부트캠프[코드스테이츠 FE 44기]

✔️ 시작

📍 배운것

📌 DOM(Document Object Model)

✔️ `<body>`하단에 `<script>`태그를 넣어야하는 이유

📌 HTML요소 Javascript에 불러오기

📌 부모, 자식, 형제 노드 접근하기

1. 부모 노드

2. 자식 노드

3. 형제 노드

📌 DOM 제어

✏️ 마치며

[💻 코드스테이츠 FE 44기] 부트캠프 - JavaScript Koans

[💻 코드스테이츠 FE 44기] 부트캠프 - 유효성 검사 과제

0개의 댓글

[💻 코드스테이츠 FE 44기] 부트캠프 - DOM

부트캠프[코드스테이츠 FE 44기]

✔️ 시작

📍 배운것

📌 DOM(Document Object Model)

✔️ <body>하단에 <script>태그를 넣어야하는 이유

📌 HTML요소 Javascript에 불러오기

📌 부모, 자식, 형제 노드 접근하기

1. 부모 노드

2. 자식 노드

3. 형제 노드

📌 DOM 제어

✏️ 마치며

[💻 코드스테이츠 FE 44기] 부트캠프 - JavaScript Koans

[💻 코드스테이츠 FE 44기] 부트캠프 - 유효성 검사 과제

0개의 댓글

✔️ `<body>`하단에 `<script>`태그를 넣어야하는 이유