[프론트엔드스쿨] WIL 9주차

제로베이스 프론트엔트 스쿨 9주차 WIL

 

Weekly I learned...

 

1. 객체 프로퍼티 설정 / 프로토타입 상속

- 객체 프로퍼티의 플래그, getter/setter, 프로토타입에 대해서 학습하였다. 관련한 문제를 출제해서 정리해보았다. 프로토타입은 너무 헷갈려서 다시한번 정리가 필요할 것 같다.

2022.09.27 - [JavaScript] - [스터디] 객체 프로퍼티 설정 / 프로토타입 상속

 

2. DOM 조작 메서드 복습

- 과제2를 시작하려다가 제로베이스 기초강의에서는 DOM조작 메서드들을 너무 간략하게 다뤄서 예전에 사두고 안보고 있었던 유데미에 colt씨의 강의에서 필요한 부분을 찾아보았고, (스스로를 위해) 간략하게 정리해본다.

 

 1) DOM : 문서 객체 모델, 웹페이지를 구성하는 JS 객체들의 집합, 브라우저에서 모든 HTML요소가 객체로 변환되어 존재하고, 이들간의 관계를 트리로 나타낼 수 있다. 이 트리구조의 최상위 객체가 document.

 

 2) DOM 선택 메서드

  - getElementById( ) : ID가 일치하는 요소 찾아서 있으면 해당 요소 리턴 없으면 null이 리턴됨

  - getElementsByTagName( ) : 태그네임이 일치하는 모든 요소를 HTMLCollection으로 반환함, 없으면 비어있는 상태로 반환

  - getElementsByClassName( ) : 클래스 이름으로 선택, HTMLCollection으로 반환함. 

      (HTMLCollection : Element의 집합, 배열처럼 생겼으나 배열아님, iterable collection으로 for...of는 사용가능)

  - querySelector( ) : 위의 세 메서드보다 최신, css 선택자처럼 괄호안에 선택자를 넣어서 모든 요소 선택가능, 첫번째로 일치하는 값 하나만 반환한다.

  - querySelecorAll( ) : 선택자 일치하는 모든 요소를 NodeList로 반환

 

 3) DOM 조작 메서드

  - innerText : 태그 사이의 텍스트를 반환(숨겨진 항목은 무시됨)

  - textContent : 마크업한 포맷대로 보여준다. 숨겨진 항목도 보여준다.

  - innerHTML : 마크업의 전체 내용을 출력한다.(태그까지), HTML로 취급한다. 연산자 사용으로 요소 추가/삭제도 가능

  - Attribute : document.querySelector.attribute 로 사용시 해당 속성 선택가능 (JS객체로 반환된다(계산된 값))

  - getAttribute( ) : 속성으로 선택, HTML자체에서 직접 가져온다. 

  - setAttribute(attr, value) : 속성의 값을 value로 설정/변경할 수 있다.

  - style: 스타일 객체를 가져와서(이때 스타일은 빈문자열로 나온다) 설정할 수 있게 해준다. 카멜케이스로 작성해야함(ex. body.style.backgroundColor)

  - window.getComputedStyle(선택자) : 계산된 스타일로 구성된 객체 반환됨

  - classList : 요소의 클래스를 검색, 제어, 조작할 수 있게 해준다.

  - classList.add( ): 클래스 추가

  - classList.remove( ) : 클래스 제거

  - classList.contains( ) : 클래스 적용 여부 파악

  - classList.toggle( ) : 클래스가 있으면 제거되고, 없으면 추가된다. 호출할때마다 이 싸이클이 반복된다. (유용하게 사용됨)

  - parentElement : 부모 요소 반환됨

  - childElementCount :  자식 요소 개수 반환됨

  - children : 자식요소 반환, HTMLCollection으로 반환됨

  - nextSibling / previousSibling : 인접한 형제 요소, 해당하는 DOM 노드가 반환된다.

  - nextElementSibling / prevousElementSibling : 형제요소 자체가 반환됨 (공백과 텍스트 노드 무시됨)

  - createElement( ) : 새 DOM요소 만들기

  - append : 새로만든요소를 어디에 포함되게 할 것인지 정해주는 메서드, 한번에 여러개 삽입 가능, 문자열도 전달 가능, 요소의 끝에 삽입됨, 보다 최신 문법

  - appendChild( ) : append와 같은 역할이나 한번에 하나만 삽입가능하며, 문자열은 전달 불가능, 요소의 마지막 자녀로 만들어 준다.

  - pretend : 요소의 앞에 추가

  - insertAdjacentElement(position, element) : 인접한 형제로 삽입하고 싶을때 사용, position 지정 필요

  - after/before : 뒤/앞에 추가

  - removeChild( ) : 요소 제거, 선택한 요소 제거가 아닌 요소에서 자식을 제거하는 것. (제거하려는 요소의 부모를 호출해야함)

  - remove( ) : 요소 제거, 제거하려는 요소에 호출하는 메서드

 

 4) DOM 이벤트

  - 이벤트가 발생하면 반응하게 한다.

  - 사용자 인터렉션에 반응하는 법: 1) html요소에 인라인으로 속성 추가, 2) 자바스크립트 안에서 추가, 3) addEventListener 사용(베스드방법)

 

 5) addEventListener('event', call back function)

  - 선택된 요소에 이벤트가 발생시 콜백함수가 실행될 수 있게 해준다.

 

 

 

 

 

아쉬운 점 / 추후계획

- 자료구조/알고리즘 : 문제를 학습하기 위해 푸는 느낌보다 과제를 해결하기 위해 푸는 느낌으로 자꾸 접근해서 어느순간 자꾸 쉬운걸 골라서 풀고 있는 느낌이 들었다. 지난주 시험을 통해서 앞으로 공부해야 할 방향과 부족한 부분들을 점검할 수 있었는데, 그 부분에 맞춰서 관련 문제들을 풀어봐야겠다. (자료구조 및 알고리즘 종류별로 돌아가면서 풀기!)

- 자바스크립트 이론 : 공부엔 때가 있다는 말이 뭔지 알거같다. 확실히 이해도 느리고 금방 까먹는다. 머릿속이 혼돈 그 잡채이다 못해 진짜 잡채가 되버린 느낌...하지만 노력엔 때가 없지! 한번에 다 이해하고 습득하려는 욕심을 부리지 않고 몇번 본다고 생각하고 차근차근 익혀봐야겠다!

- 계획: 자바스크립트 과제인 과제2를 시작해야겠다!