要素を操作してみよう

querySelector()やgetElementById()を使って要素を取得する方法について見ていきます。

・querySelectorを使うことによって対象の要素を指定することが出来ます。DOM は document という特殊なオブジェクトで扱うことができて、文書内から特定の要素を取得するには querySelector() というメソッドを使うことができます。

・例えばＨＴＭＬをh1をChenged!という文字に変わるようにしたい場合はにh１を指定する時に使います。document.querySelector(‘h1’).としてあげればドキュメントの中にｈ１というように指定できます。

・中身のテキストは .textContent で表現できるのでtextContent =‘welcome!’

・5秒後に変わるようにセットしたいときは、関数にしてあげて setTimeout() で書き換えてみましょう。setTimeout(update, 5000);としてあげればおkです。

・こちらでは CSS のセレクターをそのまま使えるのですが、セレクターが複雑になってくると指定するのも面倒ですし、文書の構造が変わったら、書き換えが必要になることもあります。なのでJavaScript では、ある 1 つの要素を操作するときには、 id 属性もよく使われます。

・id 属性を target としてみましょう。id が target なので #target と書いても良いですし、 id を指定して要素を探すには特殊なメソッドが用意されていて、 getElementById() というメソッドを使っても OK です。

・document.getElementById(‘target’).textContent = ‘welcome!’;としてあげれば5秒後に指定したidがwelcome!に変わります。

この記事が気に入ったら
いいねまたはフォローしてね！

よかったらシェアしてね！