작업 전 웹 페이지

DOM 교체 시도

innerHTML을 사용하세요.
이것을 사용하면 HTML의 요소를 바꿀 수 있습니다.
그럼 바로 코드 시작하겠습니다.
다음은script입니다.js에서 썼습니다.

window.addEventListener("load", function() {
  let btn = document.querySelector("a#btn-square");
  btn.addEventListener("click", function() {
    console.log("Hello world");
  });
　以下、置換をするために追加したコードです
  let btn2 = document.querySelector("a#btn-square2");
  let changeText = document.querySelector("p.text2");
  btn2.addEventListener("click", function() {
  changeText.innerHTML = '変更されました';
  });
});

다음은 HTML입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScriptPractice</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div class = "top">
      <a href="#" id="btn-square">おはよう</a>
      <p class = "text">挨拶は大事だよ</p>
    </div>
    <div class = "middle">
      <a href="#" id="btn-square2">こんにちは</a>
      <p class = "text2">挨拶は基本だよ</p>
    </div>
    <div class = "down">
      <a href="#" id="btn-square3">おやすみ</a>
    </div>
  </body>
</html>

하는 일은 매우 간단하다.
우선,document.querySelector("a#btn-square2");... 을 누르다
요소를 가져오는 중입니다.그리고 변수로 그걸 정의해.
let changeText = document.querySelector("p.text2");그렇지만
요소를 가져오는 중입니다.변수를 사용하여 정의합니다.
다음 코드도 있어요.

btn2.addEventListener("click", function() {
  changeText.innerHTML = '変更されました';
  });

이 코드에서 클릭할 때 inner HTML 방법을 사용하여 변수 (change Text) 의 내용을 변경합니다.
결과는 교체 버튼을 누르면 다음과 같다.

DOM 추가 시도

다음에는 클릭 후 요소를 추가하는 기능을 실현하고 싶습니다.
저것은 클라스 리스트다.dd 방법을 사용합니다.
그럼 실제 코드예요.

window.addEventListener("load", function() {
  let btn = document.querySelector("a#btn-square");
  btn.addEventListener("click", function() {
    console.log("Hello world");
  });
  let btn2 = document.querySelector("a#btn-square2");
  let changeText = document.querySelector("p.text2");
  btn2.addEventListener("click", function() {
  changeText.innerHTML = '変更されました';
  });
  let btn3 = document.querySelector("a#btn-square3");
  btn3.addEventListener("click", function() {
    changeText.classList.add("red");
  });
});

또한 CSS 파일에서 레드 클래스에서 백그라운드-color:레드;열다
기술할 필요가 있다.
이것도 쉽게 만들었어요.
document.querySelector("a#btn-square3");에서 요소를 가져옵니다.
변수를 정의하고 addeventListener 방법을 사용하여 변수를 정의합니다.
이벤트에 불을 붙일 예정입니다.
그리고 바꿀 때 사용하는 변수changeText에서classList입니다.dd 방법 사용하기
명령 변수에 레드 클래스를 추가합니다.
여기에 추가된 버튼을 누르면 다음과 같은 모양이 될 것이다.

DOM 삭제

이번에 나는 어떤 반을 삭제하는 실시 방안을 실시하고 싶다.
저것은 클라스 리스트다.remove 방법을 사용합니다.
그럼 실제 코드예요.

window.addEventListener("load", function() {
  let btn = document.querySelector("a#btn-square");
  btn.addEventListener("click", function() {
    console.log("Hello world");
  });
  let btn2 = document.querySelector("a#btn-square2");
  let changeText = document.querySelector("p.text2");
  btn2.addEventListener("click", function() {
  changeText.innerHTML = '変更されました';
  });

  let btn3 = document.querySelector("a#btn-square3");
  btn3.addEventListener("click", function() {
    changeText.classList.add("red");
  });

  let btn4 = document.querySelector("a#btn-square4");
  btn4.addEventListener("click", function(){
    changeText.classList.remove("red")
  })
});

이것도 간단해.
document.querySelector("a#btn-square4");에서 요소 가져오기
그리고 btn4.Add Event Listener 이벤트에서 화낼 준비 OK.
changeText.classList.remove ("red") 에서 레드 클래스를 삭제하는 이벤트를 표시합니다.
방금 빨간색으로 변한 상태에서 삭제 버튼을 누르면 빨간색만 사라진다는 것이다.
한번 해보세요.
놀면 이해가 깊어지니까 추천해드려요.

Reference

이 문제에 관하여(JavaScript의 DOM을 사용한 다양한 작업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Nyanmaru-12/items/c29cf5541a89e20a29ee

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript의 DOM을 사용한 다양한 작업

작업 전 웹 페이지

DOM 교체 시도

DOM 추가 시도

DOM 삭제

Reference

좋은 웹페이지 즐겨찾기