javascriptのDOM操作_3

プログラミング学習

2025/01/27 2024/07/25

次は属性の取得をしていきます。
以前の「javascriptのイベント」では、「let button = document.getElementById(‘xxx’);」
とか、「const event = document.querySelector(“.event”);」があったのをおぼえていますか？
これをもう少し詳しくやっていきます。

まず、HTMLファイルを書いていきます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            タイトル
        </title>
　　　　<link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="event" id="div1">Hi Champ!</div>
        <script src="js/test.js"></script>
    </body>
</html>

そしてJavaScriptファイルです。

document.addEventListener('DOMContentLoaded', () => {
  
  const exampleAttr = document.querySelector(".event");

  exampleAttr.classList.add('is-active');
});

これで開発者ツールで「要素」タグを見てください。
<div class=”event” id=”div1″>Hi Champ!</div>のところが<div class=”event is-active” id=”div1″>Hi Champ!</div>になっているはずです。
これはexampleAttr.classList.add(‘is-active’);でクラスを追加しています。
もちろん、cssファイルでis-activeを設定すればそのcssも追加されます。
<link rel=”stylesheet” href=”css/style.css” />で指定したファイルに書きましょう。

.is-active{visibility: hidden;}

これで見えなくなります。

なので、こんなことができます。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            タイトル
        </title>
    </head>
    <body>
        <button class="event" id="div1">Hi Champ!</button>
        <script src="js/test.js"></script>
    </body>
</html>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  
  const exampleAttr = document.querySelector(".event");

  function buttonClick(){
    exampleAttr.classList.add('is-active');
  }
  
  exampleAttr.addEventListener('click', buttonClick);
});

これで開発者ツールで確認しながら、ボタンを押してみてください。
<div class=”event is-active” id=”div1″>Hi Champ!</div>になっていますよね？
これでcssを活用してみてください。
面白いことができます。
あと、classList.addの他にも、classList.removeがあったりします。
例

exampleAttr.classList.remove('is-active');

これでクラスを逆に減らすことができます。

基本的な操作はこれでおしまいです。
次からゲームを作ることを考えています。