![propansystem[プロパンシステム]](https://propansystem.net/wp-content/themes/sydney/images/header.jpg "propansystem[プロパンシステム]")
hasAttribute()、removeAttribute()について
前回の投稿で使用したHTMLドキュメントをもとに、hasAttributeとremoveAttributeのメソッドを調べてみます。
HTMLドキュメントは前回投稿した以下のものを用意しました。
[js]
<!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">
// hasAttributeで「name属性」の有無を取得
let test1 = document.getElementById("p1").hasAttribute("name");
console.log("test1 -> " + test1);
// hasAttributeで「names属性」の有無を取得
let test2 = document.getElementById("p1").hasAttribute("names");
console.log("test2 -> " + test2);
// 一旦「name属性」を削除する
let test3 = document.getElementById("p1").removeAttribute("name");
console.log("test3 -> " + test3);
// 改めて「name属性」の有無を取得する
let test4 = document.getElementById("p1").hasAttribute("name");
console.log("test4 -> " + test4);
</script>
</body>
</html>
[/js]
上記の出力結果は
[js]
test1 -> true
test2 -> false
test3 -> undefined
test4 -> false
[/js]
となります。
test1では、[js]<div id="p1" name="p1name">p1text</div>[/js]というHTMLドキュメント構造から、trueが返りました。
test2では、「names」属性は元々定義されていないのでfalseが返りました。
test3では、removeAttributeメソッドが実行され、その結果、返値の出力としてundefinedになりました。(これは言語仕様としてundefinedが返る為です)
test4では、一度test3のremoveAttributeメソッドが実行された為、改めてname属性を取得しても、存在しない為、falseが返りました。
また、上記のjavascriptが実行された後、HTMLドキュメントからは該当のname属性のDOMが削除されています。
最初は
[js]
<div id="p1" name="p1name">p1text</div>
[/js]
というDOM構造でしたが、実行後は
[js]
<div id="p1">p1text</div>
[/js]
というDOM構造になっています。