자바스크립트는 HTML 문서에 동작을 부여하기 위해 열흘만에 개발된 스크립트 언어이다. 때문에, 프로그래밍 언어로써의 가치보다는 HTML혹은 브라우저를 조작하는 용도로 오래 쓰여왔다. 위의 역할을 수행하기 위한 많은 라이브러리나 패키지가 존재하지만, 자바스크립트 자체의 동작 방식을 익혀야 내 의도에 맞추어 도구를 선택하여 사용할 수 있다.
HTML) Document 객체
Document는 자바스크립트를 통해 접근할 수 있는 주요 객체로, 웹 페이지를 열면 해당 페이지에 작성된 HTML을 가리키는 객체이다. 페이지가 렌더 되었을 때, 이미 자바스크립트 엔진으로 문서를 조작할 수 있도록 준비되어있다.
HTML)document.title
문서의 head - title 태그에 작성된 내용에 접근. 값을 확인하고, 갱신할 수도 있다.
HTML)document.body
문서 객체 내의 바디 태그와 그 안에 작성된 내용을 가리키는 요소.
HTML)document.getElementById()
HTML 태그 중 인자값으로 받은 문자열 값을 아이디로 하는 요소에 접근하는 메서드로, 해당 요소를 반환 값으로 갖는다.
HTML) HTML태그.innerText
선택 된 HTML태그의 내부 텍스트 컨텐츠에 접근하는 코드.
HTML) HTML태그.id / HTML태그.className
각각 선택 된 HTML태그의 id값과 클래스값에 접근하는 코드.
HTML) HTML태그.style.color
선택 된 HTML태그의 색상에 접근하는 코드.
브라우저) console.dir()
인자 값의 객체 정보를 콘솔에 출력
HTML)document.getElementsByClassName()
HTML태그 중 인자값으로 받은 문자열 값을 클래스로 하는 요소들을 가져와 array로 반환하는 메서드
HTML)document.getElementsByTagName()
HTML태그 중 인자값으로 받은 문자열 값을 태그이름으로 하는 요소들을 가져와 array로 반환하는 메서드
HTML)document.querySelector()
HTML태그 중 인자값으로 받은 문자열 값을 선택자로하여, 해당 선택자가 가리키는 태그를 반환하는 메서드. CSS메서드처럼 자식요소 선택, 클래스선택, ID선택 등이 가능하다. 충족하는 태그가 여럿인 경우 가장 상단에 있는 태그를 반환한다.
HTML)Event
유저가 HTML 문서를 조작하는 동작을 의미하며, 자바스크립트를 활용하면 이 이벤트를 감지(listen)하여, 유저반응형 동작을 구현할 수 있다.
HTML)HTML태그.addEventListener(a, b)
선택된 HTML태그에 인자값으로 넣은 동작(a)을 감지하도록 설정하는 메서드. 두 번째 인자값으로는 실행할 함수(b)를 지정할 수 있다.
HTML)HTML태그.on+eventname
선택된 HTML태그에 감지할 수 있는 이벤트를 선택하는 값으로, 해당 키값에 실행할 함수를 넣어서 이벤트 리스너의 역할을 대체할 수 있다.
HTML).removeEventListener
태그에 지정된 이벤트 리스너를 제거하는 메서드
브라우저)window.addEventListener()
이벤트 리스너는 윈도우를 포함한 브라우저 객체가 가지고 있는 값에도 지정이 가능하다.
- console.dir() 혹은 mdn 검색을 통해 감지 가능한 이벤트들을 확인할 수 있다.
- click
- mouseenter
- mouseleave
- resize(window)
- copy(window)
- offline(window)
- online(window)
** document.div는 없음
마무리
이것이 바닐라의 직관적인 달달함인가
