element를 js로 가져오는 방법

document.

getElementById

• id로 가져오는 것. 하나의 태그를 가져온다. HTML의 요소를 get(가져와라)
• selector라고 부름.
  getElementByTagname - 태그명으로 가져오는 것. 동일 요소가 있을 때 배열 형태로 나타냄.
  getElementByClassName - class명으로 가져오는 것. 동일 요소가 있을 때 배열 형태로 나타냄.
  querySelector - CSS selector 자체를 전달하기 때문에 element를 css 방식으로 검색할 수 있다. 항상 첫번째 element를 출력하기 때문에 조건에 맞는 요소 다 가져오고 싶으면 querySelectorAll을 쓰면 된다.
  querySelector에서는 뭘 검색하는지 명확하게 알 수 없기 때문에 id(#)라고 명시한다.

const title = document.querySelector("#hello");
const title = document.getElementById("hello"); // 두 코드가 하는 일은 완전히 같다.

querySelector()를 사용할 때는 className, tagName 모두 검색이 가능하기 때문에 대상이 id인지 명확히 해줘야 함.
const username = document.querySelector("#userForm #username");
더 구체적인 element를 선택하고 싶을 때 사용함.

getElementById를 통해서 HTML에서 form을 찾고 있음. js가 이걸 찾았다면 loginForm은 HTML 내에 있는 element라는 뜻이다.
const username = document.getElementById("username");

loginForm은 HTML element라서 HTML element 안을 바로 검색할 수 있다.

Events

어떤 행위를 하는 것

문서 객체.addEventListener("event", function); // 콜백함수(function) = 이벤트 리스너, 이벤트 핸들러

function에 실행하는 ()를 쓰지 않는다. ()를 임의로 쓰면 이벤트 발생 전에 실행되기 때문임.

• eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
• title.addEventListener("이벤트 이름", 이벤트 리스너) : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야 함
• removeEventListener("이벤트 이름", 이벤트 리스너): 이벤트 제거

콘솔에서 property 이름 앞에 on이 붙어있다면 event listener다.

title.onclick = handleTitleClick;
title.addEventListener("click", handleTitleClick); // 이 방법 더 선호함.

위 코드 두줄 중 title.addEventListener를 더 선호하는 이유는 나중에 removeEventListener를 통해 event listener를 제거할 수 있기 때문이다.

console.log()

메서드는 웹 콘솔에 메시지를 출력한다.
요소를 HTML과 같은 트리 구조로 출력한다.
console.log() 함수로 document.body 객체를 출력하면 태그 내용이 나옴.
DOM 요소에 대해 특별한 처리를 제공함.

console.dir()

• log 함수 다음으로 가장 많이 사용하는 함수.
  dir 함수는 객체의 속성을 계층구조로 출력한다.
  요소를 JSON과 같은 트리 구조로 출력한다.
  console.dir() 함수로 document.body 객체를 출력하면 객체의 속성이 출력된다.
  DOM JS 객체의 전체 표현을 보려고 할 때 유용하다.

https://nomadcoders.co/javascript-for-beginners/lectures/2895
5:15
출처 - 노마드코더, 혼공자바스크립트