JS의 특색 기능들 정리

js가 가지는 차별점은 아래의 3가지 라고 생각한다.

 

1. html문서의 특정 태그를 추출 및 조작(변경, 제거)

2. js를 이용해 html 태그를 삽입

3. 이벤트의 활용.

 

1. 특정 태그의 지정

1) 태그 선택하기

document.getElementById('id') : html에 지정된 id값을 찾아서 해당 태그를 지정한다.

document.getElementsByClassName('class') : html에 지정된 class를 가진 모든 요소를 반환한다.(배열)

document.querySelector('selector') : html에서 css선택자 방식으로 선택된 첫번째 요소를 반환한다.

document.querySelectorAll('selector') : html에서 css선택자 방식으로 선택된 모든 요소를 반환한다.(배열)

 

document.title: 페이지의 제목(<title>)을 수정하거나 가져옵니다.

document.body / document.head: body나 head 태그에 바로 접근합니다.

document.URL: 현재 페이지의 전체 URL을 가져옵니다.

document.cookie: 쿠키 정보를 읽거나 설정합니다.

 

2) 내용이나 속성 변경하기

element : 1)에서 선택자를 이용해서 지정한 하나의 요소.

element.textContext : 요소 안의 텍스트를 읽어오거나 수정함.

-1] element.textContext = '예시' >> '예시' 라는 문자열 값으로 치환

-2] consol.log(element.textContext) >> element에 있는 text 값을 읽어서 콘솔창에 표기

 

element.innerHTML : 요소 안의 HTML 태그를 해석해서 수정합니다.

element.setAttribute('attr','value') : 속성을 설정합니다.(삭제는 불가)

ex) img태그의 src, a태그의 href 등

element.style.[속성값] = value : 스타일의 속성값을 해당 value로 변경합니다.

element.classList : 클래스를 추가, 제거, 반전할 때 사용합니다.

 

 

 

2. 요소 생성 및 추가/삭제 (Creation & Deletion)

document.createElement('tagName'): 새로운 HTML 요소를 메모리 상에 만듭니다.

parent.appendChild(element): 특정 부모 요소의 마지막 자식으로 추가합니다.

parent.removeChild(element) : 특정 부모의 아래에 있는 요소를 삭제합니다.

element.remove() : 지정된 요소를 삭제합니다.

parent.insertAdjacentHTML("position", element) : 부모태그를 기준으로 position의 위치에 element를 추가합니다.

 

position에 따른 추가 위치

 

"beforebegin"

<parent>

"afterbegin"

<자식태그들/>

"beforeend"

</parent>

"afterend"

 

 

3. 이벤트의 활용

아래의 이벤트는 element.addEventListener('타이밍','실행값(함수)') 형태에서 사용할 수 있다.

혹은 on+타이밍 형태로 이벤트를 추가할 수 있다.

 

on+타이밍의 경우 새롭게 작성하면 덮어쓰기가 되는 것이고

addEventListener를 사용할 경우 계속해서 추가가 된다.

 

특정기능을 삭제하고 싶다면 on+타이밍 = null이나 removeEventListener를 사용해야한다.

 

1) 마우스 이벤트

click : 마우스 왼쪽 클릭

dblclick : 마우스 왼쪽 더블클릭

mouseenter : 마우스 포인터가 요소의 영역에 들어올 때

mouseover : 마우스 포인터가 요소의 위에 있을 때

mouseleave : 마우스 포인터가 요소를 벗어날 때

mouseout : 마우스 포인터가 요소를 벗어난 상태일때 ??

contextmenu : 마우스 오른쪽 클릭을 했을 때

 

2) 키보드 이벤트

keydown : 키를 누르는 순간

keyup : 눌렀던 키를 올리는 순간

keypress : 키가 눌려있는 상태일 때 지속적으로 발생

 

특정 키를 점검하는 방법

event.key를 활용해서 현재 눌린 키 값을 알 수 있다.

addEventListener에서 람다식으로 event라는 입력을 받으면 특정 이벤트가 일어날 때 어떤 event가 일어났는지를 확인할 수 있게 된다.

 

아래의 코드를 이용해 현재 무슨 키가 입력되는지를 확인해볼 수도 있다.

document.addEventListener('keydown', (e) => { console.log(`입력된 값(key): ${e.key} | 물리적 위치(code): ${e.code}`); });

 

 

3) 폼 및 입력 이벤트

submit : <form> 태그가 제출되는 상황에서 사용

* event.preventDefault() : 이벤트의 발생을 정지하는 코드.

chage : 입력값이 바뀌고 포커스를 잃었을 때

input : 사용자가 키보드를 누를 때 마다 발생

focus : 입력창을 활성화 했을 때

blur : 입력창이 비활성화 되었을 때

 

4)

DOMContentLoaded : HTML 문서 구조가 완전히 로드 되었을 때(스크립트를 안전하게 실행하기 위한 기준으로 사용)

load : 특정 element의 모든 리소스가 로드되었을 때

resize : 브라우저 창 크기를 조절할 때

scroll : 페이지를 스크롤 할 때