멋쟁이사자 FE7 35일차

멋쟁이사자 FE7

멋쟁이사자 FE7 35일차

FrontEnd 개발자 준비생 최현우 2023. 8. 29. 17:32

728x90

Findings (배운 점)

JS

getAttribute

HTML 요소의 속성 값을 가져오는 JavaScript 메서드이다. 예를 들면, 이미지 태그 <img>는 "src"라는 속성을 가지고 있는데, "getAttribute" 메서드는 이러한 속성 값을 JavaScript 코드에서 읽어올 때 사용된다.

<!DOCTYPE html>
<html>
<head>
    <title>getAttribute 예제</title>
</head>
<body>

<img id="myImage" src="image.jpg" alt="미미의 사진">

<script>
// 이미지 태그의 "src" 속성 값을 가져와서 출력합니다.
let image = document.getElementById("myImage");
let srcAttributeValue = image.getAttribute("src");
</script>

</body>
</html>

setAttribute

HTML 요소의 속성 값을 설정하는 JavaScript 메서드이다. 예를 들어, 링크 태그 <a>는 "href"라는 속성을 가지고 있는데, setAttribute 메서드는 이러한 속성 값을 JavaScript 코드에서 변경하거나 추가할 때 사용된다.

<!DOCTYPE html>
<html>
<head>
    <title>setAttribute 예제</title>
</head>
<body>

<a id="myLink" href="#">클릭하세요</a>

<script>
// 링크 요소의 "href" 속성 값을 변경합니다.
let link = document.getElementById("myLink");
link.setAttribute("href", "https://www.kakao.com");
</script>

</body>
</html>

removeAttribute

HTML 요소에서 속성을 제거하는 JavaScript 메서드이다.

<!DOCTYPE html>
<html>
<head>
    <title>removeAttribute 예제</title>
</head>
<body>

<img id="myImage" src="image.jpg" alt="현우의 사진">

<button id="removeButton">속성 제거</button>

<script>
let removeButton = document.getElementById("removeButton");
removeButton.onclick = function(){
    let image = document.getElementById("myImage");
    image.removeAttribute("src"); // 속성 제거 버튼을 클릭했을때, 이미지 요소의 "src"속성 제거
};
</script>

</body>
</html>

className

HTML 요소의 class를 추가하는 속성이다.

// html
<div id="myDiv" class="box">이것은 박스입니다.</div>
<button id="addClassButton">클래스 추가</button>

// css
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
}

.new {
  background-color: green;
}

// js
let myDiv = document.getElementById("myDiv");

// className 속성을 사용하여 클래스 추가
myDiv.className = "box new"; // <div id="myDiv" class="box" class="new">이것은 박스입니다.</div>
// +="(공백)new" 으로도 추가 할 수 있다.

// 위의 방법이 아닌 새로운 class명만 넣어준다면, 기존의 class는 삭제됨
myDiv.className = "new"; // <div id="myDiv" class="new">이것은 박스입니다.</div>

classList

"classList"는 HTML 요소의 클래스를 유사배열로 만들어 목록을 다루는 객체이다. 이를 통해 class를 추가, 제거, 토글 등을 수행할 수 있다.

유사 배열(또는 배열 비슷한 객체) : 실제 JavaScript 배열의 모든 기능을 갖지는 않지만, 인덱스로 접근하고 길이 속성을 가지고 있는 객체

// html
<div id="myDiv" class="box"></div>

// js
let myDiv = document.getElementById("myDiv");

// class를 추가.
myDiv.classList.add("highlight");

// class를 제거.
myDiv.classList.remove("box");

// 클래스가 이미 존재한다면 제거하고, 없다면 추가한다.
myDiv.classList.toggle("highlight");

Apply (적용)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>training3</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <p>할 일 : <b data-information="title"></b></p>
    <p>담당자 : <b data-information="manager"></b></p>
    <p>상태 : <b data-information="status"></b></p>
    <div>
      상태 변경:
      <button class="btn" data-status="대기중">대기중</button>
      <button class="btn" data-status="진행중">진행중</button>
      <button class="btn" data-status="완료">완료</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

[data-status] {
  padding: 5px 10px;
}

[data-status="대기중"] {
  background-color: #ff6767;
  color: #ffffff;
}

[data-status="진행중"] {
  background-color: #5f62ff;
  color: #ffffff;
}

[data-status="완료"] {
  background-color: #07c456;
  color: #ffffff;
}

const informations = document.querySelectorAll("[data-information]");
const list = {
  title: "자바스크립트 공부하기",
  manager: "최현우",
  status: "",
};

for (let el of informations) {
  const information = el.dataset.information;
  el.textContent = list[information];
}

const btns = document.querySelectorAll(".btn");
for (let btn of btns) {
  const status = btn.dataset.status;
  btn.onclick = function () {
    informations[2].textContent = status;
    informations[2].dataset.status = status;
  };
}

Feeling (느낀 점)

비표준 속성을 통해 실습을 진행해 봤다. 비표준 속성은 TIL이 아닌, 기술 블로그에 따로 글을 작성할 예정이다. 비표준 속성을 사용하는 것은 개발자의 선택적은 부분이라 생각한다. 하지만 상황에 따라서 비표준 속성을 사용할 수 있다면 더욱 능률이 올라갈 것이라고 생각한다. 만약 사용한다면 data-* 형태와 dataset 프로퍼티를 사용하는 것이 더욱 안전하다는 점 잊지 말자.