📌학습 내용
📖DOM
자바스크립트에서 html을 제어할 때 쓰는 객체
//꼭 기억해야 하는 것
element = 태그
text
attribute 속성
DOM
새로운 html 태그를 생성해서 html 문서에 삽입
기존 html 태그를 JS를 이용해 삭제 가능
기존 html 태그에 새로운 속성 할당
CSS 변경 또는 제거
html 태그에 이벤트 추가
DOM 개념
💡selector: JS -> HTML 접근
// // getElement's' -> 콘솔에서 HTML콜렉션으로 보임 -> 배열 형태 = 유사배열
// // 유사배열: 배열에 존재하는 메서드 중에 일부 메서드는 활용할 수 없는 형태
특정 부분만 가져오기
가져올 부분을 구체화
// service 안에 container가 하나일 보장이 없기 때문에 배열 형태로 가져오게 됨
// 사용할 때는 그래도 인덱스를 지정해줘야 함
위 코드 줄이기
💡 querySelector
html에 접근하는 코드가 매우 간략화되어 편해짐
배열 혹은 유사배열이 아닌 가장 먼저 나오는 하나의 요소를 반환함
// 특정 영역 안 요소에 접근하기
💡 querySelectorAll
해당되는 요소 모두를 HTMLcollection이 아닌 NodeList라는 유사배열로 반환함
// 반복문과 결합하여 각 요소에 일괄적으로 같은 기능을 적용 가능
💡 JS -> HTML 컨텐츠 추가/변경
// innerHTML
영역 안 정보들을 문자열 형태로 전달
// outerHTML
자기 자신을 포함한 정보를 문자열로 전달
"접근 가능 = 변경 가능"
기존 html 정보가 사라지고 새로운 정보가 입력됨
// textContent
텍스트 정보에만 접근하여 변경 가능하게 하는 프라퍼티
접근
변경
// textContent와 innerHTML 차이
// innerText
textContent와 마찬가지로 텍스트 정보에 접근/변경
차이점
innerText는 CSS 속성을 그대로 가져옴
실무에서는 텍스트 자체를 가져오는 textContent 사용을 추천
💡 JS로 HTML 태그를 만들고 삽입하기
// 태그 생성: createElement
// 삽입: appendChild()
앞의 부모를 기준으로 가장 뒤에 자식을 붙임
// 위치 변경
// 자식에게 붙이면 자식의 자식으로
// 주의
같은 부모를 가진 자식들에게 적용할 경우 마지막 자식에게만 적용됨
내가 원하는 위치에 값을 삽입하기: insertAdjacentHTML();
참고
노드와 트리: https://yoongrammer.tistory.com/68?category=956616
💡 JS로 HTML 특정 값 삭제
// removeChild(): 부모를 기준으로 삭제
// // remove(): 부모를 경유하는 번거로움이 없음
// 자식을 선택하기
💡 JS로 CSS 제어
(1) .style
(2) .cssText
문자열 중간에 오타가 있을 때 알아채기 쉽지 않아서 강사님은 쓰지 않음
(3) .setAttribute
속성을 부여하는 메서드를 활용
활용
💡 JS로 Class에 접근하기
className, classList (실무에선 거의 classList만 씀)
className 사용
특정 클래스 하나만 가져오기
// className 단점
// 1. 원하는 클래스를 특정할 때 split을 사용하여 번거로움
// 2. 클래스를 추가할 때는 새로운 클래스로 기존 클래스를 덮어씌우는 개념이기 때문에 기존 클래스가 사라짐. 기존 클래스도 새로운 클래스와 함께 입력해줘야 함
classList
split 없이 특정 클래스를 인덱스로 찍어주면 가져올 수 있음
클래스 추가
클래스 제거
toggle
// add와 remove를 동시에 담당하는 toggle
// 기존에 해당 클래스가 없다면 추가가 되고, 있다면 삭제를 함
contains
클래스의 유무를 t/f로 판단
💡 eventListener
addEventListener
특정 영역에 이벤트 삽입
event list
https://www.w3schools.com/jsref/dom_obj_event.asp
removeEventListener
add한 이벤트를 제거하기
주의점
// 참조타입이라는 점을 잊지말고 같은 주소를 가진 인수를 주어야 함
// 아래의 경우 함수명만 같을 뿐 다른 주소를 가진 각각의 함수이므로 remove 적용 안 됨
Remind
참조타입은 각각의 값이 저장된 주소가 다르다
💡 preventDefault
태그가 가진 기본 속성값을 제거함
📌어려운 점
🤍
📌해결방법
🤍
📌느낀 점
🤍
