자바스크립트의 시작
<body>
...
...
<script src="index.js"></script>
</body>자바스크립트로 태그 선택
document.getElementById('id')
/*아이디에 해당하는 태그 하나*/
document.getElementsByClassName('class')
/*클래스에 해당하는 태그 모음 (HTMLCollection)*/
document.getElementsByTagName('tag')
/*태그에 해당하는 태그 모음 (HTMLCollection)*/
document.querySelector('css')
/*css선택자 태그 중 가장 첫번째 태그 하나*/
document.querySelectorAll('css')
/*css선택자 태그 모음 (NodeList)*/
유사배열
: 배열과 유사한 객체
ex) HTMLCollection NodeList DOMTokenList
-
숫자 형태의 indexing 가능
-
length 프로퍼티 있음
-
배열의 기본 메서드 사용 가능!⭐
-
Array.isArray(유사배열)의 리턴값은false
이벤트
: 웹페이지에서 발생하는 사건들 ( 버튼 클릭, 스크롤, 키보드 입력 .. )
이벤트 핸들링
: 자바 스크립트를 통해 이벤트를 다루는 일
이벤트 핸들러 ( 이벤트 리스너 )
: 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드
const btn = document.querySelector('#myBtn');
btn.onclick = function() {
alert('환영합니다!');
};
DOM
: Document Object Model
각 객체를 노드(Node)라는 용어로 표현하고,
태그는 요소 노드, 문자는 텍스트 노드로 구분
DOM Tree
요소 노드 이동 프로퍼티
element.childeren >> element의 자식 요소 모음 ( HTMLCollection )
element.firstElementChild >> element의 첫번째 자식 요소 하나
element.lastElementChild >> element의 마지막 자식 요소 하나
element.parentElement >> element의 부모 요소 하나
element.previousElementSibling >> element의 이전 or 좌측에 있는 요소 하나
element.nextElementSibling >> element의 다음 or 우측에 있는 요소 하나
모든 노드에 대한 이동 프로퍼티
node.childNodes >> Node의 자식노드 모음 ( NodeList )
node.firstChild >> Node의 첫번째 자식노드 하나
..
..
etc.
요소 노드 프로퍼티
element.innerHTML
: 요소 노드 내부의 HTML 코드를 문자열로 리턴
( 줄바꿈, 들여쓰기 O )
요소 안의 정보를 확인할 수도 있지만,
내부의 HTML 자체를 수정할 때 좀 더 자주 활용
element.outerHTML
: 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴
( 줄바꿈, 들여쓰기 O )
새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의
element.textContent
: 요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 가져옴
( 줄바꿈, 들여쓰기 O )
새로운 값 할당 시 innerHTML처럼 내부의 값을 완전히 새로운 값으로 교체
textContent는 말그대로 텍스트만 다루기 때문에,
특수문자도 그냥 텍스트로 처리 ⭐
요소 노드
요소 노드 만들기
document.createElement('태그이름')
요소 노드 꾸미기
element.textContent element.innerHTML etc..
요소 노드 추가 및 이동하기
element.prepend element.append element.after element.before
요소 노드 삭제하기
element.remove()
html 속성
- 속성에 접근하기: element.getAttribute('속성')
- 속성 추가(수정)하기: element.setAttribute('속성', '값')
- 속성 제거하기: element.removeAttribute('속성')
스타일
-
style 프로퍼티 활용하기
element.style.styleName = 'value'; -
class 변경을 통해 간접적으로 스타일 적용하기
element.classNameelement.classList
classList의 유용한 method
classList.add : 클래스 추가, 여러개의 값 전달 가능
classList.remove : 클래스 삭제, 여러개의 값 전달 가능
classList.toggle : 클래스 없으면 추가하고 있으면 삭제, 하나의 값 전달 가능
