【Javascript】 タグの属性などを操作する方法
ここでは、HTMLのタグそのもの(属性など)を操作する方法を紹介します。
要素の取得や追加などは下の記事を見てください。
目次
準備
idやclass変更時、cssが設定されていないと見た目上の区別がつかないため、軽いCSSを設定しておきます。適当にHTML内にstyle要素として入れてください。
.added {
font-size: 24px;
font-weight: bold;
color: #ff0000; /* 赤色 */
}
#added {
font-size: 24px;
font-weight: bold;
color: #0000ff; /* 青色 */
}
.copyright {
color: #444444;
font-size: 10px;
}
HTMLは、次のコードであるものとして進めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<nav id="headerNav">
<ul>
<li class="nav-item nav-top">トップ</li>
<li class="nav-item">商品一覧</li>
<li class="nav-item">カテゴリ</li>
<li class="nav-item">タグ</li>
</ul>
</nav>
</header>
<main id="app">
<p>Hello, World!!</p>
</main>
<footer>
<div class="copyright">
copyright ...
</div>
</footer>
</body>
</html>
class操作
付与されているクラスを操作します。
classの取得(classList)
取得した要素に対し, .classListを付与します。
let li = document.querySelector("#headerNav .nav-top");
console.log(li.classList);
DOMTokenList(2) ["nav-item", "nav-top", value: "nav-item nav-top"]
DOMTokenListはほぼ配列で、for-in、for-of、forEachなどはできます (valueはスルーされる) が、map、filterなどはなく、少し限定的です。
valueは、実際に設定されている生の値です。
classの追加(classList.add)
See the Pen DOM3 dom op1 by Totori (@souki202) on CodePen.
classは、addする対象が既に追加したいクラスが付与されていた場合、何も起こりません。つまり、何度addしても同じクラスが増えすぎるなどはありません。
このように、同じ操作を何度繰り返しても同じ結果になる性質を、冪等性と呼びます。
この場面では用語を知らなくても問題ないですが、データベースやAPI設計時に冪等性を知っておくことは非常に重要です。
classの削除(classList.remove)
classList.removeします。
See the Pen DOM3 dom op2 by Totori (@souki202) on CodePen.
小さくなっていた文字が大きくなっていることがわかります。 (copyright…のテキスト)
classの切り替え(classList.toggle)
classList.toggleします。
See the Pen by Totori (@souki202) on CodePen.
toggleはクラスの有無を切り替えるメソッドで、クラスがあればremoveし、なければaddします。
idの取得、更新
取得した要素のidで取得でき、代入すれば更新できます。
See the Pen DOM3 dom id by Totori (@souki202) on CodePen.
idは1つのタグに複数指定することはできないため、addやremoveなどはありません。削除したい場合は空文字列を入れておきましょう。
その他属性の操作
〇〇Attributeという名前のメソッドを利用します。
属性があるか取得(hasAttribute)
値は不要で、存在するかどうかだけ知りたいときはhasAttributeを利用します。
const li = document.querySelector("#headerNav .nav-top");
console.log(li.hasAttribute("id"));
false
hasAttributesでは、href、type、requiredなど、あらゆる属性であるかどうかを取得できます。
属性の値を取得(getAttribute)
getAttributeします。属性自体がない場合はnullになり、属性はあるが値がない場合は空文字列になります。if文を書く際は注意が必要です。
const li = document.querySelector("#headerNav .nav-top");
console.log(li.getAttribute("class"));
nav-item nav-top
classListとは違い、classの場合でも文字列です。getAttributeと同様に、あらゆる属性で取得できます。
属性を設定(setAttribute)
setAttributeします。
See the Pen by Totori (@souki202) on CodePen.
<input type="text" required>を追加した上で、動作を検証しています。
setAttribute("属性名", "値")のようにして利用します。
属性を削除(removeAttribute)
removeAttributeします。
See the Pen by Totori (@souki202) on CodePen.
空文字列をsetAttributeでは、属性そのものは残ります。(値が空)
それに対し、こちらは属性そのものを削除します。
styleの操作
.style.styleNameに代入します。ここで、ハイフン区切りのstyle(font-sizeなど)は、大文字区切り (fontSizeなど) になります。
See the Pen DOM3 dom style by Totori (@souki202) on CodePen.
もちろん、p.style.fontSizeからは値の取得もできます。
const p = document.querySelector("#app p");
p.style.fontSize = "24px";
console.log(p.style.fontSize);
24px
ここで、単位が必要なstyleで単位を入れ忘れないように注意しましょう。しばしば忘れます。
まとめ
classは実質複数個であるため、add, remove, toggleなどで操作します。それ以外の属性は値が実質1つなので、set, removeなどで操作します。
