(Javascript) DOM method

DOM : Document Object Model

• 문서 객체 모델, 웹페이지(HTML 및 XML문서)의 콘텐츠 및 구조, 스타일요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스
• JS 같은 스크립트 언어가 쉽게 웹페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할

 

console.log(window.location);
console.log(location);

console.log(window.navigator);
console.log(window.navigator.userAgent);

console.log(document.head);

console.log(document);
console.dir(document);

 

위 코드들의 결과

 

const root = document.getElementById("root");

root.onwheel = (e) => {
  console.log(e.target);
};

document.getElementById("name").onchange = (e) => {
  console.log(e.target.value);
};

document.getElementById("name").oninput = (e) => {
  console.log(e);
};

const tempElem = document.createElement("div");
root.append(tempElem);
root.prepend(tempElem);

document.getElementById("name").style.backgroundColor = "lightgray";

input 태그에 대한 코드 결과

window.onresize = () => {
  let tempWidth = window.innerWidth;
  let tempHeight = window.innerHeight;
  console.log("현재 보여지는 윈도우 창 너비 : " + tempWidth);
  console.log("현재 보여지는 윈도우 창 높이 : " + tempHeight);
};

위 코드로 너비 조절시 나온 결과