Part 1. 4장. HTML과 DOM 조작하기 / 제로초의 자바스크립트 입문

 

HTML 태그 아래 script 위치

→ 화면을 그리는 태그들이 먼저 실행되어

웹 브라우저에 화면이 그려져야

script 태그에서 자바스크립트로 화면 조작 가능

 

 

document.querySelector: HTML 태그를 1개만 가져오는것=선택한다

"  All(): 여러 개의 태그 한꺼번에 선택

 

 

DOM(Document Object Model): document 객체를 통해 접근 및 조작 가능(HTML 태그 선택 가능)

 

특정 1개 태그만 선택할 때

id 속성의 값은 태그에 달 수 있는 고유 값

ex) order라는 id 속성 값이 있으면 앞에 # 붙여서 #order란 선택자로 사용

 

 

2개를 동시에 선택할 때

class 속성 사용

선택할 때 class 속성 값 앞에 .붙임

 

 

태그 안 태그 선택하기

Selector('선택자 내부선택자 내부선택자')

선택자 사이 공백(띄어쓰기)으로 구분

흠,, 상태 됨

 

 

태그.textContent : 태그 내부의 문자열 가져오기

 

 

태그.innerHTML: HTML 태그를 포함한 문자열 가져오기

 

 

버튼 태그 글자 굵게

 

 

textContent: 태그 내부 값 선택할 때 사용

value: 입력 태그

<입력 태그>.vlaue=값; //입력창에 값 넣기

<입력 태그>.focus() //입력창에 커서 두기

 

 

이벤트 리스너: 자바스크립트가 HTML에서 발생하는 이벤트를 감지할 수 있게 함. 자바스크립트는 이벤트를 자동으로 감지 못하기 때문

 

onClickButton 뒤에 () 넣으면 안됨

함수명에 소괄호 붙이면 클릭과 상관없이

함수가 실행되기 때문

버튼 클릭하면 콘솔찍힘