DOMからHTML要素を取得・変更しよう

DOM操作では、HTML要素を取得してから、文章、クラス、属性などを変更します。HTML/CSSの知識とJavaScriptが直接つながる部分です。

今回使用するファイル構成

javascript-practice/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

HTML要素を取得する

<article class="card" id="featured-article">
  <h2 class="card-title">変更前のタイトル</h2>
  <a class="card-link" href="/old-url">記事を読む</a>
</article>

const card = document.querySelector('#featured-article');
const title = document.querySelector('.card-title');
const link = document.querySelector('.card-link');

console.log(card);

querySelector()は、条件に一致する最初の要素を返します。要素が見つからない場合はnullになるため、セレクターのつづりを確認します。

複数の要素を取得する

const cards = document.querySelectorAll('.card');

cards.forEach((item) => {
  console.log(item);
});

querySelectorAll()は一致するすべての要素を取得します。

内容とクラスを変更する

title.textContent = 'JavaScriptで変更したタイトル';
card.classList.add('is-active');
card.classList.remove('is-hidden');
card.classList.toggle('is-selected');

textContentは文章、classListはクラスを操作します。見た目の定義はCSSへ置き、JavaScriptでは状態を表すクラスを切り替える方法が管理しやすいです。

.card.is-active {
  border-color: #2563eb;
  background-color: #eff6ff;
}

属性を変更する

link.setAttribute('href', '/buildbooks/javascript');
link.setAttribute('aria-label', 'JavaScriptの記事一覧を開く');

console.log(link.getAttribute('href'));

setAttribute()は属性を設定し、getAttribute()は現在の値を取得します。リンク先だけでなく、アクセシビリティに関係する属性も表示状態と一致させます。

まとめ

DOM操作は「要素を取得する」「内容・クラス・属性を変更する」という順序で考えます。CSSセレクターとHTML構造を理解していることが重要です。

次の記事では、クリックや入力をイベントとして受け取り、DOM操作を実行します。