22.04.13

js로 html 요소 선택 방법

.querySelector() : css처럼 불러온다.

document.querySelector(".myDivClass")
document.querySelector("#myDivClass")
document.querySelector("div")

.getElementById() : id만 불러온다.

document.getElementById("myDivId")

.getElementByClass() : class만 불러온다.

document.getElementById("myDivClass")

classList

선택된 Element의 클래스명들을 반환

classList.add(클래스명)     해당 Element에 클래스명 추가 
classList.remove(클래스명)  해당 Element에 클래스명 삭제 
classList.toggle(클래스명)  해당 Element에 클래스명이 존재하면 추가하고, 없으면 제거 

addEventListener(”event”, function(){})

선택된 Element가 어떠한 이벤트를 가질 때 뒤의 함수가 호출

document.getElementById("button").addEventListener("click", function(){
	//button이 클릭될 때 함수 호출
});

(”event”, function(){})

아래는 "event" 넣을 수 있는 이벤트 들

 click  클릭 시 (마우스 버튼에서 손가락을 땐 순간) 
 mouseenter  마우수를 요소 위에 올리면 
 mouseover  마우스를 요소 위에 올리면 (자식 Element도 영향을 받음) 
 mouseout  마우스가 요소 밖으로 벗어날 때 
 mousedown  클릭 하고 버튼에서 손가락을 때기 전 
 focus  포커스가 갔을 때 
 keypress  키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생 
 keydown  키를 누를 때 
 keyup  키를 눌렀다가 떼는 순간 
 submit 제출 할때
 load  웹 페이지 소스가 다운로드 되었을 때 
 resize  창크기를 조절 할 때 
 scroll  스크롤바, 마우스 휠, up, down 버튼으로 스크롤 할 시 
 unload  링크를 클릭해서 다른 페이지로 이동하거나 브라우저나 브라우저 탭을 닫았을 때 
 change  form 필드의 상태가 변경 되었을 때 

event.preventDefault()

a 태그 또는 submit 태그는 눌렀을 때 고유의 동작으로 페이지를 이동시키거나, 리로드 되거나, form 안에 input 값을 전송하는 동작을 하는데 이걸 중지시키는 역할을 한다.

window

window 객체는 웹 브라우저의 창을 가르키며, window 객체를 이용하여 브라우저를 조작 할 수 있다.
창을 닫거나 열고, 좌표값 등을 다룰 수 있다.

DOM 제어

Document Object Model

appendChild(Element) : 선택한 Element의 자식 Element 마지막에 추가
remove() : 선택된 Element 삭제
removeChild(삭제할 Element) : 선택된 Element의 자식 Element 삭제
createElement(Element) : Element 생성, 그 후 appendChild()로 추가해줘야 함
firstChild/lastChild : first면 첫번째, last면 마지막 자식 Element 반환

---

추가내용

JS에서 태그 여러개 생성 하는 방법

function myFunction() {
    const div = document.createElement('div');
    div.innerHTML = '이것이 추가될 문장입니다.';
    document.querySelector('#myDIV').appendChild(div);
}

위 코드는 함수를 호출할 때마다 같은 div 를 id = myDIV 태그의 자식으로 생성한다.

const div = document.createElement('div');
function myFunction() {
    div.innerHTML = '이것이 추가될 문장입니다.';
    document.querySelector('#myDIV').appendChild(div);
}

위 코드는 함수 바깥에서 div를 선언 해주고 있기 때문에 함수를 계속 출력해도 div는 하나만 생성된다. 이후에는 의미없는 업데이트만 일어나고 추가 생성은 없다.