#　Attribute（属性）とは…

属性は要素を拡張し、動作を変更したりメタデータを提供したりします。
属性は常に name="value" の形式を取ります (属性の識別子に関連付けられた値が続きます)。
(MDNより抜粋)

#　今回使うHTMLファイル
今回のゴール：＜li＞タグにclass属性を追加します

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <ul>
        <li class="first" id="special">私はfirstクラスを持っています。</li>
        <a href="first.html" id="link">リンク</a>
        <li>私は属性をもっていません。</li>　<!--　←ここにclass属性を追加します -->
    </ul>
    <!-- JavaScript -->
    <script src="main.js"></script>
</body>
</html>


#１，まず、＜ul＞タグ直下＜li＞タグのid属性値を取得してみます！　【getAttribute();メソッド】


>```javascript:app.js
    // <ul>タグ直下の<li>タグを取得する
    const first = document.querySelector('.first');
    // id属性値を取得
    const idValue = first.getAttribute('id');
    // コンソール表示
    console.log(idValue); // spesialが表示

#２，次に＜a＞タグのhref属性値を取得してみます！　【getAttribute();メソッド】

app.js

// <a>タグを取得する
const link = document.getElementById('link');
// href属性値を取得
const showLink = link.getAttribute('href');
// コンソール表示
console.log(showLink);  // first.htmlが表示


#３，最後に、属性のない＜li＞タグにclass属性を追加します　【setAttribute();メソッド】

>```javascript:app.js
    // <li>タグを取得する
    const last = link.nextElementSibling;
    // class="first"を追加
    last.setAttribute('class', 'first');
    // コンテンツを追加
    last.textContent= '私はfirstクラスを持っています。';
    // コンソール表示
    console.log(last);

#４，デベロッパーツールで確認

＜li＞タグに属性が追加されていることがわかると思います。