非標準の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はこちら(test1)

上記のHTMLドキュメントに対し、getAttributeメソッドを試してみます。
getAttributeはElementのメソッド(インターフェイス)で、要素の指定した属性の値を返します。

let test1 = document.getElementById("p1").getAttribute("className");
console.log("test1 -> " + test1);

出力結果は

1	`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>

サーバ上のHTMLはこちら(test2)

出力結果は

test1 -> p1name
test3 -> 3

となりますが、後者の「3」は文字列として取得されています。

非標準のHTML属性について

コメントを残す