hasAttribute()、removeAttribute()について

前回の投稿で使用したHTMLドキュメントをもとに、hasAttributeとremoveAttributeのメソッドを調べてみます。

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>

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

サーバ上のHTMLはこちら(test1.html)

上記の出力結果は

test1 -> true
test2 -> false
test3 -> undefined
test4 -> false

となります。

test1では、

<div id="p1" name="p1name">p1text</div>

というHTMLドキュメント構造から、trueが返りました。
test2では、「names」属性は元々定義されていないのでfalseが返りました。
test3では、removeAttributeメソッドが実行され、その結果、返値の出力としてundefinedになりました。(これは言語仕様としてundefinedが返る為です)
test4では、一度test3のremoveAttributeメソッドが実行された為、改めてname属性を取得しても、存在しない為、falseが返りました。

また、上記のjavascriptが実行された後、HTMLドキュメントからは該当のname属性のDOMが削除されています。

最初は

<div id="p1" name="p1name">p1text</div>

というDOM構造でしたが、実行後は

<div id="p1">p1text</div>

というDOM構造になっています。

hasAttribute()、removeAttribute()について

コメントを残す