<JS> 자바스트립트로 HTML수정

자바스크립트에서 태그, id, class 등을 생성하거나 수정할 수 있다. 이를 위해 DOM과 메서드, 프로퍼티의 범위에 대해 정확하게 이해해야 한다.

오늘 연습해 볼 부분은 사실 CSS에서 충분히 작성 가능함은 물론, CSS로 작성하는 편이 일반적으로 깔끔하나 DOM과 이벤트리스너를 연습해본다는 개념으로 접해본다.

1. HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>
<body>
  <script src=""></script>
</body>
</html>

온전히 자바스크립트로 문서를 수정할 것이기 때문에, 추후 자바스크립트 연결을 위한 <script>태그 외에는 비워둔다.

2. Javascript

let h2 = document.createElement("h2"); // 1. HTML에 없는 태그를 생성

h2.innerHTML = "Hello!"; // 2. 생성한 태그에 넣을 내용 기입
h2.style.color = "white";
document.body.appendChild(h2); // 3. <body>태그의 자식으로 만들어서 최종적으로 웹에 나타나게 함

document.body.style.setProperty('background-color', 'cornflowerblue'); //기본 배경화면 설정
document.querySelector("body").classList.add("backColor"); //태그에 클래스를 직접 만들 수 있다.
// <body class="backColor">
// .classList.add 외에 만드는 방법은
// document.querySelector("body").setAttribute("class", "backColor");
// 동일한 방법으로 id를 만들거나 내부 속성값을 수정할 수 있다.
// document.querySelector("body").setAttribute("id", "idBackColor");

let backColor = document.querySelector("body.backColor");

function handleResize() {
  let intFrameWidth = window.innerWidth;
  let newColor;
  if(intFrameWidth<=800) newColor = 'cornflowerblue';
  else if(intFrameWidth<1000) newColor = '#B04AEB';
  else newColor = '#F3D24D';
  backColor.style.backgroundColor = newColor;
}

window.addEventListener("resize", handleResize);

const title = document.querySelector("body h2");
const handleSet = {
  handleMouseEnter: () => {
    title.style.color = "#1abc9c";
    title.innerText = "The mouse is here";
  },
  handleMouseLeave: () => {
    title.style.color = "#3498db";
    title.innerText = "The mouse is gone!";
  },
  handleMouseClick: () => {
    title.style.color = "#9b59b6";
    title.innerText = "clicked!";
  },
  handleWindowResize: () => {
    title.style.color = "#f39c12";
    title.innerText = "You just resized!";
  },
  handleConText: () => {
    title.style.color = "#e74c3c";
    title.innerText = "That was a right click!";
  }
};
// 함수로 하나하나 만들기보다 객체로 만들어 메서드를 사용하는 게 깔끔하다

title.addEventListener("mouseenter", handleSet.handleMouseEnter);
title.addEventListener("mouseleave", handleSet.handleMouseLeave);
title.addEventListener("click", handleSet.handleMouseClick);
window.addEventListener("contextmenu", handleSet.handleConText); 
//좌클릭은 "click" 우클릭은 "contextmenu"
//어디에 우클릭해도 적용되게 하려면 window에서 메서드를 불러와야 한다.
window.addEventListener("resize", handleSet.handleWindowResize);

태그를 적재적소에 자유자재로 생성, 수정하려면 연습이 필요하다.

메서드를 불러와 사용함에 있어 사용하고자 하는 변수, 메서드의 스코프가 중요했다.

저작자표시 비영리 변경금지 (새창열림)

'Programing > Javascript' 카테고리의 다른 글

[JS] 정규 표현식 RegExp (0)	2022.06.01
[JS] 구조 분해 할당 (0)	2022.05.18
<JS> for문 탐색 (0)	2022.04.08
<JS> 최솟값, 최댓값 (0)	2022.03.30
[JS] 객체 (0)	2022.03.25

'Programing > Javascript' 카테고리의 다른 글

티스토리툴바