JavaScriptのDOMで特定のHTML要素やHTMLコード、タグ内のテキストを取得する方法を紹介します。
目次
- 要素の取得方法
- getElementById メソッド(
id
属性を元に検索) - getElementsByClassName メソッド(
class
属性を元に検索) - getElementsByTagName メソッド(HTMLのタグ名で検索)
- getElementById メソッド(
- html要素の取得方法
- 要素のテキスト/コード/属性値の取得方法
- 要素のコードを取得(outerHTML)(
<html>...</html>
全文) - 子要素のコードを取得(innerHTML)(内側の
<body></body>
等) - 要素のテキストを取得(innerText, textContent)(タグを含めない)
- 要素の属性を取得(getAttribute)(
lang="ja"
の"ja"
の部分)
- 要素のコードを取得(outerHTML)(
要素の取得方法
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'