要素を取得する際のプロパティ
要素を操作するのに必要なプロパティ、メソッドを確認しておきます
innerHTML 指定した要素をタグを含めて取得する
textContent 指定した要素のテキストのみを取得する
<div id="myDiv"><p>取得する要素のテキスト</P></div>
const myEconte = document.getElementById("myDiv");
// myEconte:div#myDiv
// myEconte.innerHTML: <p>取得する要素のテキスト</p>
// myEconte.textContent:"取得する要素のテキスト"
CSSセレクターで取得する場合は以下の様に記述
const myEconte2 = document.querySelector("#myDiv");
// myEconte2:div#myDiv
要素の取得と変更
つぎのようなHTMLを変更します
以下のHTMLの「古いテキスト」の部分を「要素の変更」ボタンが押されたら「新しいテキストです」に変更します
<button onclick="upElement()">要素の変更</button>
<p id="myElement">古いテキスト</p>
<script>
function upElement() {
// container変数に要素(ID=”myElement”)を取得
const container = document.getElementById("myElement");
// 取得した要素内のテキストを書き換えます
container.textContent = "新しいテキストです";
}
</script>
上記で、「古いテキスト」が「新しいテキスト」に書き換わります
要素の作成と追加
以下のdiv要素内の「元のテキスト」の後に「新しい要素」を追加します
ボタンをクリックするとp要素とテキスト「新しいテキストです」が作られ、追加されます
以下の例ではクリックのたびに追加されて行きます
<button onclick="addElement()">要素の追加</button>
<div id="myadElement">元のテキスト</div>
<script>
function addElement() {
// addCont変数に要素(ID=”myadElement”)を取得
const addCont = document.getElementById("myadElement");
//新しく追加する要素(Element)を作成します
const addText = document.createElement('p');
addText.textContent = "新しいテキストです";
//作った要素を所得した要素内に追加します
addCont.appendChild(addText);
}
</script>
要素の削除
上記で追加した要素を1つずつ削除します
<button onclick="delElement()">要素の削除</button>
<script>
function delElement() {
const delEcont = document.getElementById("myElement");
const childEcont = delEcont.queryselect("p");
delCont.removeChild(childCont);
}
</script>
上記の処理では仮にタグを削除してしまって無くなった場合、ボタンをクリックした時にエラーが起きるます。
そのために、エラーを回避する処理が必要となるかもしれません。
※ここでは割愛します。
上記の全てのサンプルコードでは、動作を確認するために<script>タグの処理をHTML内に記述していますが、推奨されていません。
実際にはJavaScriptは、別ファイルに記述することが必要かと思われます。
コメント