非標準のHTML属性について
前回の投稿ではHTMLElementオブジェクトについて調べてみましたが、
HTMLElementオブジェクトは必ずしも標準のHTML属性(DOM標準)だけにあるものではなく、非標準(DOM非標準)のHTML属性も扱うことができます。
また、Element型には要素の取得として、getAttribute()メソッドが使え、
要素の設定として、setAttribute()メソッドが使えます。
例えば、とあるHTMLに対して、要素の取得や設定を行うには、次のように書きます。
HTMLドキュメントは以下のものを用意しました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <div id="test1"> <div id="p1" name="p1name">p1text</div> <div id="p2">p2text <div id="c1">c1text</div> <div id="c2">c2text</div> <div id="c3">c3text</div> </div> <div id="p3" name=3>p3text <div id="d1">d1text</div> <div id="d2">d2text</div> <div id="d3">d3text</div> <div id="d4">d4text</div> </div> </div> </body> </html>
上記のHTMLドキュメントに対し、getAttributeメソッドを試してみます。
getAttributeはElementのメソッド(インターフェイス)で、要素の指定した属性の値を返します。
let test1 = document.getElementById("p1").getAttribute("className");
console.log("test1 -> " + test1);
出力結果は
test1 -> p1name
になります。
ここで注意が必要な点は、値は全て文字列として取得されることです。
例えば、id=”p3″のdivタグに対して、同様にgetAttributeでname属性を取得してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
<div id="p2">p2text
<div id="c1">c1text</div>
<div id="c2">c2text</div>
<div id="c3">c3text</div>
</div>
<div id="p3" name=3>p3text
<div id="d1">d1text</div>
<div id="d2">d2text</div>
<div id="d3">d3text</div>
<div id="d4">d4text</div>
</div>
</div>
<script type="text/javascript">
let test1 = document.getElementById("p1").getAttribute("name");
console.log("test1 -> " + test1);
let test3 = document.getElementById("p3").getAttribute("name");
console.log("test3 -> " + test3);
</script>
</body>
</html>
出力結果は
test1 -> p1name test3 -> 3
となりますが、後者の「3」は文字列として取得されています。