DOMの操作方法
先日はDOMとはなんなのかっていうのをまとめました。
今日は実際にDOMをどうやって操作するのかという部分を見ていきたいと思います。
DOMを操作する方法の流れとしては
1.要素を取得
2.要素を変更する・追加する・生成する
という流れになります。
要素を取得する
要素を取得するメソッドはgetElementById(id);です。
ById（任意のid）：要素に割り振ったIDを元に
Element：そのIDを持つ要素を
get:取得する
<head>
</head>
<body>
<h1 id="ttl">見出し01</h1>
<div id="wrap01">
<p id="element01">要素</p>
</div>
</body>
h1の内容を取得する場合
<script>
var h = document.getElementById("ttl") // documentオブジェクトの中でttlというIDが割り振られている要素を取得する
console.log(h); //コンソールにhの内容を書き出す
</script>
h1要素が表示されます。
要素の中文字列だけ取り出す
h1要素の中の見出し01という文字列だけを取り出したいときはtextContentプロパティを使います。
<script>
var h = document.getElementById("ttl") // documentオブジェクトの中でttlというIDが割り振られている要素を取得する
console.log(h); //コンソールにhの内容を書き出す
var ttl = h.textContent; // hのテキスト部分のみを取り出す
console.log(ttl); //コンソールにttlの内容を書き出す
</script>
h1要素のテキスト部分のみ取り出すことができます。
このようにドキュメントオブジェクトと色々なプロパティやメソッドを組み合わせることで
要素を変更したり追加したりすることができます。
プロパティやメソッドについては実際に使ってみたときにまとめていきたいと思います。
ということで今回はこのあたりで！
せば！
