【JavaScript】getAttribute の使い方｜属性値の取得・存在チェック・dataset との違い・setAttribute / removeAttribute まで解説

const value = element.getAttribute(attributeName);
// attributeName: 取得したい属性名（文字列）
// 戻り値: 属性の値（文字列）または null

<a id="myLink" href="/about" class="nav-link" data-section="company">会社概要</a>

const link = document.getElementById("myLink");

console.log(link.getAttribute("href"));         // "/about"
console.log(link.getAttribute("class"));        // "nav-link"
console.log(link.getAttribute("data-section")); // "company"
console.log(link.getAttribute("target"));       // null（属性なし）

<img id="logo" src="/images/logo.png" alt="ロゴ" width="200">
<input id="email" type="email" name="user_email" placeholder="メールアドレス" required>
<a id="extLink" href="https://example.com" target="_blank" rel="noopener">外部リンク</a>

const img = document.getElementById("logo");
console.log(img.getAttribute("src"));   // "/images/logo.png"
console.log(img.getAttribute("alt"));   // "ロゴ"
console.log(img.getAttribute("width")); // "200"（文字列）

const input = document.getElementById("email");
console.log(input.getAttribute("type"));        // "email"
console.log(input.getAttribute("name"));        // "user_email"
console.log(input.getAttribute("placeholder")); // "メールアドレス"

const extLink = document.getElementById("extLink");
console.log(extLink.getAttribute("target")); // "_blank"
console.log(extLink.getAttribute("rel"));    // "noopener"

<a id="relLink" href="/about">About</a>

const link = document.getElementById("relLink");

// getAttribute: HTMLに書かれた値そのまま
console.log(link.getAttribute("href")); // "/about"

// DOM プロパティ: 完全なURLに解決される
console.log(link.href); // "https://example.com/about"

<input id="agree" type="checkbox" checked>

const cb = document.getElementById("agree");

// getAttribute: HTML属性の初期値
console.log(cb.getAttribute("checked")); // ""（空文字列）

// DOM プロパティ: 現在の状態（真偽値）
console.log(cb.checked); // true

// ユーザーがチェックを外した後
cb.checked = false;
console.log(cb.getAttribute("checked")); // "" （HTML属性は変わらない）
console.log(cb.checked);                 // false（現在の状態を反映）

<div id="product"
     data-product-id="12345"
     data-price="1980"
     data-in-stock="true"
     data-category-name="electronics">
  商品カード
</div>

const el = document.getElementById("product");

console.log(el.getAttribute("data-product-id"));    // "12345"
console.log(el.getAttribute("data-price"));         // "1980"
console.log(el.getAttribute("data-in-stock"));      // "true"
console.log(el.getAttribute("data-category-name")); // "electronics"

const el = document.getElementById("product");

// ケバブケース → キャメルケースに自動変換
console.log(el.dataset.productId);    // "12345"
console.log(el.dataset.price);        // "1980"
console.log(el.dataset.inStock);      // "true"
console.log(el.dataset.categoryName); // "electronics"

<button id="submitBtn" disabled>送信</button>
<input id="nameInput" type="text" value="">

const btn = document.getElementById("submitBtn");
const input = document.getElementById("nameInput");

// hasAttribute: 属性の有無を true/false で返す
console.log(btn.hasAttribute("disabled")); // true
console.log(btn.hasAttribute("hidden"));   // false

// getAttribute での null チェックでも同じ判定は可能
console.log(btn.getAttribute("disabled") !== null); // true

// 空文字の value 属性: 存在はしている
console.log(input.hasAttribute("value"));    // true
console.log(input.getAttribute("value"));    // ""（空文字）

element.setAttribute(name, value);
// name:  属性名（文字列）
// value: 設定する値（文字列に変換される）

const link = document.createElement("a");

// 属性を設定
link.setAttribute("href", "/contact");
link.setAttribute("class", "btn btn-primary");
link.setAttribute("target", "_blank");
link.setAttribute("rel", "noopener noreferrer");
link.setAttribute("data-action", "navigate");

console.log(link.getAttribute("href"));  // "/contact"
console.log(link.getAttribute("class")); // "btn btn-primary"

// 既存の属性を上書き
link.setAttribute("href", "/about");
console.log(link.getAttribute("href")); // "/about"

const btn = document.querySelector("#submitBtn");

// disabled 属性を削除 → ボタンが有効になる
btn.removeAttribute("disabled");
console.log(btn.hasAttribute("disabled")); // false

// 存在しない属性を削除してもエラーにならない
btn.removeAttribute("data-nonexistent"); // 何も起きない

const input = document.getElementById("username");
const btn = document.getElementById("submitBtn");

input.addEventListener("input", () => {
  if (input.value.trim().length > 0) {
    btn.removeAttribute("disabled");
  } else {
    btn.setAttribute("disabled", "");
  }
});

function toggleAccordion(header) {
  const content = header.nextElementSibling;
  const isOpen = header.getAttribute("aria-expanded") === "true";

  // 開閉状態を反転
  header.setAttribute("aria-expanded", String(!isOpen));
  content.setAttribute("aria-hidden", String(isOpen));

  // 表示切り替え
  content.style.display = isOpen ? "none" : "block";
}

function filterByCategory(category) {
  const cards = document.querySelectorAll(".product-card");

  cards.forEach(card => {
    const cardCategory = card.getAttribute("data-category");

    if (category === "all" || cardCategory === category) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
}

// 使用例
filterByCategory("electronics");

const img = document.getElementById("mainImage");

// サムネイルクリックでメイン画像を切り替え
document.querySelectorAll(".thumbnail").forEach(thumb => {
  thumb.addEventListener("click", () => {
    const fullSrc = thumb.getAttribute("data-full-src");
    img.setAttribute("src", fullSrc);
    img.setAttribute("alt", thumb.getAttribute("alt"));
  });
});