WebページはHTMLでマークアップされています。テキストを含み、Webページ上のあらゆる要素は何らかの形でマークアップされています。マークアップしている箇所を「要素(Element)」と言い、この要素をJavaScriptで操作をします。
もちろん、要素を指定する、ということだけがJavaScriptではありません。しかし、Webページを操作する場合はHTMLの要素を指定して様々な操作を行うことができるようになることがWebページの制作には欠かすことができません。
オブジェクトを利用できるようになることがJavaScriptの第一歩であり、HTMLが作り出したオブジェクトを構造化したものがDOMと呼ばれるものです。
JavaScriptによるHTMLを操作する、ということをDOMを操作するとよく言います。
下記のように操作したい要素を取得し、どのように操作するのか命令文を書くことになります。
//HTMLのp要素を指定する。
const element = document.querySelector('p');
//HTMLのp要素に指定されたclass[sample]を指定する。
const element_class = document.querySelector('p.sample');
//HTMLのp要素に指定されたclass[onlySample]を指定する。
const element_id = document.querySelector('p#onlySample');
簡単に操作をしたい場合は下記のように要素していからinnerTextを利用してテキストを差し替えることが可能です。
なお、上記のdocument.querySelector
は最初の要素を一つだけ読み込みます。
すべてを指定したい場合はdocument.querySelectorAll
を使うことで可能です。
ここをJavaScriptで書き換えます。
<p class="sample">ここをJavaScriptで書き換えます。</p>
const element_class = document.querySelector('p.sample');
element_class.innerText = '実はここをJavaScriptで書き換えるというスクリプトを実行しています。';
「innerText
」は簡単に説明すれば要素のテキスト情報を取得できます。この場合は取得した上でテキストの指定をしているため、書き換わるように処理されます。
似たような処理として「textContent
」と「innerHTML
」があります。
「textContent
」は要素に含まれるテキスト情報のみを取得します。innerTextと変わらないように思えますがinnerTextは改行を示す情報なども取得することに対して、textContentはあくまでテキスト情報のみです。
「innerHTML
」はHTML要素を含んで取得することが可能です。そのためHTMLそのものを取得、書き換えを行いたいときに使われることが多いです。
// innerTextはテキスト情報及び改行などを含んで取得
element_class01.innerText = '書き換えたいテキスト';
// textContentはテキスト情報のみを取得
element_class02.textContent = '書き換えたいテキスト';
// innerHTMLはHTMLを含んだテキスト情報を取得
element_class03.innerHTML = '<p>書き換えたいテキスト</p>';
上記の書き方ですとWebページを読み込んだタイミングで実行してしまうため、後記の「イベント」を実行するということ、それと「タイミング」を指定する必要があります。