最新！JavaScript入門講座タグ要素の属性をわかりやすく解説

前回はDOMのノードについて解説しました。
DOMの扱い方に慣れたところで、次は中身に入っていきます。

DOMは書き換えたり、更新したりする以外にもHTMLの属性も変更することが可能です。今回はDOMから要素を追加、書き換える方法を解説していきます。

本記事のペルソナ

JavaScript初学者の方
DOMについて勉強したい方
DOMで属性の扱い方を学びたい方

属性の説明
DOM要素の属性の操作
1. 要素の属性の取得
2. 要素属性(setAttribute)
まとめ
参考文献

属性の説明

まず、この解説を始めるにあたって、属性について軽く説明していきたいと思います。属性というのは、HTMLのタグ要素に紐づけるものです。
HTMLのタグ要素というのは例として下記になります。

HTMLタグ例

div
p
article
nav
footer

これらがタグ要素になります。
これに対して、属性はタグに様々な副次的な要素をもたらします。以下が属性の例となります。

属性

class
id
name

これらの属性は要素に名前やidを振って、要素を特定できたりなどほかにも様々なことができます。今回はこの属性についてフォーカスしていきます。

DOM要素の属性の操作

要素の属性の取得

最初に、DOM要素の属性を取得する方法について解説します。DOM要素を取得する方法は同じくDOM要素を取得し、メソッドを使います。

最初に、HTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div id="js-div">
            <p id="js-rest" class="cs-rest">Rest API</p>
            <p id="js-graph" class="cs-graph">GraphQL</p>
        </div>
        <script src="script.js"></script>
    </body>
</html>

const doc = document;
const jsRest =  doc.getElementById("js-rest");
const jsGraph = doc.getElementById("js-graph");
const div = doc.getElementById("js-div");

console.log(jsRest.getAttribute("id"));
console.log(jsGraph.getAttribute("class"));

console.log(jsRest.id);
console.log(jsGraph.className);

index.htmlファイルをブラウザで開いてみましょう。その後、ディベロッパー・ツールを開いてみましょう。
要素の属性と属性の値がコンソールに出力されていることがわかると思います。

要素属性(setAttribute)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>

        <div id="div">
            <p id="js-engel">エンゲル係数 10.13</p>
            <p id="js-rg">R > G </p>
        </div>
        <script src="script.js"></script>
    </body>
</html>

const doc = document;
const engel = doc.getElementById("js-engel");
const rg = doc.getElementById("js-rg");
let attribute = doc.createAttribute("lang");
attribute.value = "jp";
jsRest.setAttributeNode(attribute);

attribute = doc.createAttribute("class");
attribute.value = "cs-div";
div.setAttributeNode(attribute);

engel.setAttribute("class","cs-engel");
rg.setAttribute("id","alt-id");
engel.target.value = "_brank";

再度、index.htmlファイルをブラウザで開いてディベロッパー・ツールを開いてみましょう。HTML要素にない属性が追加されていることがわかると思います。

setAttributeは属性を付加させるメソッドになります。これを使うことによって、後天的JavaScriptで属性を付加させることが可能です。