DOM의 구조를 조회할 때에는 console.dir을 써보자.
console.log와는 다르게 DOM을 객체의 모습으로 출력한다.
console.dir(document.body)를 조회해보면, 수많은 속성들이 나온다.
console창에 직접 출력해보기.
그리고 출력된 객체에서, children속성을 찾아보면 속성값으로 다양한 노드 엘리먼트가 들어있을것이다. 이러한 자식요소들은 document.body.children으로 조회 가능하다. 그리고 bracket notation을 활용하여 children이 가지고 있는 유사배열에 접근이 가능하다.
물론 .parentElement를 통하면 부모 엘리먼트에도 다시 접근이 가능하다.
어제 배웠던 메소드들을 적어보자
document.createElement('원하는 요소명')을 변수에 할당하고
document.body.append(변수)를 하면 변수에 담겨있는 createElement가 body에 할당이 된다.
append()는 여러개의 자식요소를 할당이 가능하다. 리턴값 없음.
appendChild()는 하나만 가능하고, 오직 Node 객체만 받을 수 있다
DOM String을 넣으면 에러가 발생한다. 리턴값 반환
DOM을 통해 HTML 엘리먼트를 조회하기 위해서는 querySelector를 사용할 수 있다.
태그 또는 id 또는 class를 통해 접근 및 조회가 가능하다.
(query는 "000를 조회한다")
getElementById('id값') // 아이디이므로 고유하다 element뒤에 s가 붙지 않는다.
getElementsByClassName('class값')
getElementsByTagName('태그엘리먼트')
querySelctorAll('#dasdasd .sdada')
구체적으로 선택을 위해서는 query시리즈를 통해서 조회하고 값을 가져와보자.
getElementById가 조금 더 빠르고 지원이 잘 된다고한다. 참고.
유효성 검사
document.querySelector('#username').value = "새로운 값"
으로 값을 가져올 수도 있고, 값을 변경도 가능하다.
.classList.add('클래스명')
.classList.remove('클래스명') 도 많이 사용했다.
이걸 통해서 클래스를 통해 입력해뒀던 CSS 설정들을 특정조건에서 위 두가지 메소드를 통해 줬다 뻇다 하면서, 웹의 디자인을 동적으로 바꿀 수 있었다.
그리고 btn.onclink = function() {실행} 과
btn.addEventListner('click',function(){})을 통해 클릭 이벤트를 만들수도 있었다.
function handler() {}
btn.onclick = handler; 이렇게도 가능하다. 하지만 유의할 것은 handler뒤에 ()을 붙이면 안된다는 것이다.
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
let currentMenu = ____; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}두 버튼의 핸들러가 동일한 함수에 의해 동작한다. 함수의 재사용~ 모듈~
function handleClick(event) {
console.log(event); // <-- 어떤 내용이 콘솔에 출력되나요?
// let currentMenu = ____; // TODO
// console.log(currentMenu + '를 클릭하셨습니다.');
}event 객체가 무엇인가, event.target은 event가 일어날 객체를 의미.
이벤트 버블링의 가장 마지막에 위치한 최하위 요소를 반환. 즉, 클릭된 요소를 기준으로 사용할때!
event.currentTarget 이벤트가 바인딩된 요소, 해당되는 요소를 반환.
나중에 써먹어보자.
추가로 이벤트 객체는 무수히 많다.
대표적인 것들로는
- onsubmit
- onchange
- onmouseover
- onkeyup
- event.preventDefault
innerHTML
예제로 하나만 봐도 기억이 날것이다. 이해는 했다. 헷갈리면 검색해보자
let li = document.createElement('LI');
li.innerHTML = `<div class="username'>` + id + `</div> <div class="contents">``</div>`
목적지.appendchild(li);바닐라 자바스크립트 치트시트
https://gist.github.com/thegitfather/9c9f1a927cd57df14a59c268f118ce86
레퍼런스 자료들을 압축해둔 자료다
