JavascriptのDOMを使用したHTMLの書き換え

要素の取得 ID名を指定して取得 document.getElementById(“ID名”); タグを指定して取得 document.getElementsByTagName(“タグ名”); classを指定して取得 document.getElementsByClassName(“クラス名”); nameを指定して取得 document.getElementsByName(“name名”); TagName,ClassName,Nameは1つのHTMLファイルの中に同じ要素名を持つ要素が存在する可能性があるためElementsと複数形になっているので注意が必要です。

<div id="test1">ID</div>
<p>タグ</p>
<p class="test2">クラス</p>
<p name="test3">ネーム</p>
 
<script>
document.getElementById("test1");
document.getElementsByTagName("p")
document.getElementsByClassName("test3");
document.getElementsByName("test4");
</script>
  要素の変更 取得した要素に.innerHTMLを代入することで要素の変更を、 .styleを記述することでstyle属性を変更することができます。 また、一つの要素に複数の変更を加える場合は、一度変数に入れることで処理の負担を減らすことができます。

<div id="test">テスト</div>

<script>
var a = document.getElementById("test");
 
a.style.color = "red";
a.innerHTML = "変更";
</script>

    要素の作成 document.createElement(“要素名”);   要素の追加 指定した子要素の1つ前に追加 → 親要素.insertBefore(追加する要素, 指定した子要素); 指定した要素の最後に追加 → 親要素.appendChild(追加する要素);

<body>

<script>
var a = document.createElement("div");
document.body.appendChild(a);
</script>

</body>

  要素の削除 指定する要素.removeChild(“削除する子要素”);

<div id="test">テスト</div>

<script>
var a = document.getElementById("test");
a.parentNode.removeChild(a);
</script>

  属性の取得 指定する要素.getAttribute(“取得する属性”);

<div id="test" style="color:red;">テスト</div>

<script>
document.getElementById("test").getAttribute("style");
</script>

  属性の変更 指定する要素.setAttribute(“属性名”,”設定値”);

<div id="test" style="color:red;">テスト</div>

<script>
document.getElementById("test").setAttribute("style","color:blue");
</script>

  属性の削除 指定する要素.removeAttribute(“属性名”);

<div id="test" style="color:red;">テスト</div>

<script>
document.getElementById("test").removeAttribute("style");
</script>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です