DOM Manipulation

DOM

Document Object Model의 약자. HTML, XML문서 의 프로그래밍 인터페이스이다. 해당 문서들을 구조화된 표현으로 제공하여 프로그래밍 언어가 해당 요소들을 다룰 수 있도록 한다.

 

window object

브라우저에 해당하며 DOM문서를 포함하고 있는 객체. 최상위이기 때문에 가지고 있는 메서드들을 점표기법 없이 사용 가능하다. 아래는 기타 여러가지 하위 object or methods

// WINDOW METHODS / OBJECTS / PROPERTIES
console.log(123);

// Alert
// alert('Hello');

// Prompt
// const input = prompt();
// alert(input);

// Confirm
// if (confirm("r u sure?")){
//   console.log("Yes");
// } else {
//   console.log("No");
// }

let val;

// Outer height and width
val = window.outerHeight;
val = window.outerWidth;

// inner height and width
val = window.innerHeight;
val = window.innerWidth;

// Scroll points
val = window.scrollY;
val = window.scrollX;

// Location Object
val = window.location;
val = window.location.hostname; // server, domain name here
val = window.location.href; // protocol + hostname + port
val = window.location.search; // parameter

// Redirect
// window.location.href = "http://google.com";

// window.location.reload();

// History Object
// window.history.go(-3);
// val = window.history.length;

//Navigator Object
val = window.navigator;
val = window.navigator.appName;
val = window.navigator.appVersion;
val = window.navigator.userAgent;
val = window.navigator.platform;
val = window.navigator.vendor;
val = window.navigator.language;

console.log(val);

 

document object

DOM 문서에 해당하는 객체

 

---

DOM 선택하기

1) single element

HTML 요소의 id를 이용해 선택

console.log(document.getElementById("my-form"));

 

새로 나온 querySelector를 이용해 선택

console.log(document.querySelector(".container"));

 

2) multiple element

querySelectorAll을 이용해 다중 요소 선택

console.log(document.querySelectorAll(".item"));

 

기타추천하지 않는 다중요소선택 방법

console.log(document.getElementsByClassName("item"));
console.log(document.getElementsByTagName("li"));

 

이하 dom manipulation 예시

// ul.remove();
// ul.lastElementChild.remove();
ul.firstElementChild.textContent = "Hello";
ul.children[2].innerText = "Brad";
ul.lastElementChild.innerHTML = "<h1>Hello</h1>";

// change style
const btn = document.querySelector(".btn");
btn.style.background = 'red';

---

addEventListener

첫 번째 매개변수에 원하는 이벤트, 두 번째 매개변수에 동작하길 원하는 함수를 정의함.

const btn = document.querySelector(".btn");

btn.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("clicked");
});

---

setTimeout

첫 번째 매개변수로 동작하길 원하는 함수를, 두 번째 매개변수로 시간(ms)를 지정하여 특정 시간 이후 인자로 받은 함수가 동작하게 할 수 있음. 비동기이다

setTimeout(() => msg.remove(), 3000);