자바스크립트 객체 다루기

표준 내장 객체 사용하기

String 객체

속성 length
메서드 includes(), replace(), split() 등등

Array 객체

속성 length
파괴적 메서드 push(), unshift(), pop(), shift() 등등 - 원본 데이터 변경
비파괴적 메서드 forEach(), filter 등등 - 원본 데이터 유지

Date 객체

getTime()

브라우저 객체 모델 사용하기

BOM
표준 내장 객체와 다르게 자바스크립트에 내장된 객체가 아니라 웹 브라우저에서 제공하는 객체

window 객체

주로 웹 브라우저 창과 관련 있는 속성이 존재

문서 객체 모델과 이벤트 다루기

문서 객체 모델 이해하기

DOM
생성 주체 : 웹 브라우저
html 문서 -> 객체

주요 노드 타입

문서 노드
요소 노드
속성 노드
텍스트 노드
주석 노드

노드 선택하기

(document 객체 속성으로 조작)

속성으로 노드 선택

모든 노드 탐색, 요소 노드 탐색

메소드로 노드 선택

get 메서드 : getElementById, getElementsByClassName
css 선택자 : query 메서드 - querySelector (이게 더 좋음)

노드 조작하기

콘텐츠 조작

요소 노드의 콘텐츠 조작하기

• textContent 요소 노드의 '모든 텍스트에 접근'
• innerText 요소 노드의 '텍스트 중 웹 브라우저에 표시되는 텍스트에 접근'
• innerHTML 요소 노드의 '텍스트 중 HTML 태그를 포함한 텍스트에만 접근'

스타일 조작

style 속성 사용
속성명 사이의 -를 뺄셈연산자로 인식하므로 카멜표기법 이용

const pEl = document.querySelector("p");
pEl.style.color = "red";

클래스 속성 조작

class 속성 사용 + 클래스 선택자

데이터로 속성 조작하기

data-* 속성 조작하기

메서드로 속성 조작

.setAttribute

노드 추가/삭제하기

// 12.4 노드 추가 & 삭제 p.479
        const nodeAdd = document.createElement("a") // a 노드 생성
        const textNode = document.createTextNode("링크") // 텍스트 노드 생성
        const addHref = document.createAttribute("href") // 속성 생성

        addHref.value = "www.naver.com";
        nodeAdd.appendChild(textNode); // 자식 노드에 연결
        document.body.appendChild(nodeAdd); 
        nodeAdd.setAttributeNode(addHref);

삭제 : [부모노드].removechild([자식노드]) + 쿼리 셀렉터로 여러개 삭제 or 모든 요소 찾아서 IF문으로 삭제
모든 요소에 접근
[노드이름].forEach([요소]) => {[문장]});

폼 조작하기

폼 태그 선택하기

form 태그 -> forms 속성/ name 속성

이벤트 다루기

이벤트 객체와 THIS

11장 1분 퀴즈
3 ) 4번

12장 1분 퀴즈
1 ) 3번 문서 객체 모델은 웹브라우저에서 생성되므로 자바스크립트 언어 사양에는 포함되어 있지 않다.
2 ) 1번
3 ) 2번