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>
上記の出力結果は
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構造になっています。