【JavaScript】htmlタグのDOM要素やテキスト／コードを取得する方法

JavaScriptのDOMで特定のHTML要素やHTMLコード、タグ内のテキストを取得する方法を紹介します。

目次

要素の取得方法

getElementById メソッド

document.getElementByIdメソッドを用いることで、id属性の値を元に要素を取得することができます。

<html><body><div id="main">A</div></body></html>
var e = document.getElementById('main');
e.outerHTML == '<div id="main">A</div>'

該当の要素が見つからなかった場合にはnullが返されます。

getElementsByClassName メソッド

document.getElementsByClassNameメソッドを用いることで、class属性に指定されたクラス名を元に複数の要素を取得することができます。

<html><span class="cls">A</span><span class="cls">B</span></html>
var a = document.getElementsByClassName('cls');
var e = a[0];
e.outerHTML == '<span class="cls">A</span>';

document.getElementsByClassName('cls')[1].outerHTML == '<span class="cls">B</span>'

getElementsByClassNameの戻り値は、複数の要素を表すノードリストやHTMLコレクション型となっています（配列のようなもの）。HTML文書内で同名のクラス名が指定されていた場合には、複数の要素が返されます。

該当の要素が一つしか見つからなかった場合も、一つの要素を格納したコレクションが返されます。また要素が一つも見つからなかった場合には、空のコレクションが返されます。その際、コレクションのlengthプロパティの値は0となります。

// <html><span class="cls">A</span></html>
document.getElementsByClassName('XXX').length == 0
document.getElementsByClassName('cls').length == 1

getElementsByTagName メソッド

document.getElementsByTagNameメソッドは# getElementsByClassName メソッドのタグ名版です。指定されたHTMLのタグ名と同名の要素を取得することができます。

<div id="wrapper"><div>A</div><div>B</div></div>
var a = document.getElementsByTagName('div');
a[0].outerHTML == '<div id="wrapper"><div>A</div><div>B</div></div>';
a[1].outerHTML == '<div>A</div>';
a[2].outerHTML == '<div>B</div>';

html要素の取得方法

JavaScriptのDOMでhtml要素を取得する際には、先程の# getElementsByTagName メソッドを用いる方法が広く知られていますが、documentElementプロパティで直接ルート要素（HTML文書の場合はhtml要素）を取得することもできます。

/* いずれも同じ結果 */
document.getElementsByTagName('html')[0]
document.documentElement

似たような働きをするプロパティにfirstChildがありますが、document.firstChildの場合は DOCTYPE 宣言やコメントタグ等が取得される場合があるため利用には注意が必要です。

// <!DOCTYPE html><html></html>
document.firstChild      // `<!DOCTYPE html>`要素が取得される
document.documentElement // `<html></html>`  要素が取得される
// <!--comment--><html></html>
document.firstChild      // `<!--comment-->` 要素が取得される

要素のテキスト／コード／属性値の取得方法

要素のコードを取得（outerHTML）

outerHTMLプロパティでhtmlタグを含んだ全文のコードを取得することができます。

// <html><body></body></html>
document.documentElement.outerHTML == '<html><body></body></html>'

子要素のコードを取得（innerHTML）

innerHTMLプロパティで要素内の子要素の全文を取得することができます。

// <html><head></head><body>hello</body></html>
document.documentElement.innerHTML == '<head></head><body>hello</body>'

要素のテキストを取得（innerText, textContent）

タグを排除した純粋なテキスト部のみを取得したい場合にはinnerTextプロパティやtextContentプロパティを用います。

// <html><body>Hello</body></html>
document.documentElement.innerText == 'Hello'
document.documentElement.textContent == 'Hello'
innerTextを用いる場合は、互換性の問題やブラウザごとの挙動の違いに注意する必要があります。innerTextは2016年に正式に標準化されました。

textContentの場合は、タイトルタグやスタイルタグ、スクリプトタグ内のテキストも含まれてしまう点に注意してください。逆にinnerTextを用いることで、Webブラウザの画面に表示された文章に相当するテキストのみを取得することが可能になります。

// <html><head><title>Title</title></head><body> Hello <script>alert()</script></body></html>
document.documentElement.textContent == 'Title Hello alert()'
document.documentElement.innerText == ' Hello '

要素の属性を取得（getAttribute）

要素の属性の値を取得したい場合には、getAttributeメソッド、またはプロパティの直接参照が行えます。

// <html lang="ja"></html>
document.documentElement.getAttribute('lang') == 'ja'
document.documentElement.lang == 'ja'
広告