JavaScriptでh1のinnerTextを取得する方法｜子要素のテキストを除外する
h1タグ内に子要素（spanなど）が含まれている場合、単純にinnerTextを取得すると子要素のテキストまで一緒に取られてしまいます。h1直下のテキストのみを取得したい場合は、childNodesとtextContentを組み合わせることで実現できます。
childNodes[0].textContent;
仕組みの解説
querySelector()で取得したh1要素に対してchildNodesを使うと、その子ノードの一覧（NodeList）が返されます。[0]で最初の子ノード、つまりh1直下のテキストノードにアクセスし、そこからtextContentを取得することで、子要素内のテキストを除外した値が得られます。
サンプルコード
以下が具体的なコード例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div class="first-header">
<div class="second-header">
<h1> This is h1 tag........<span>This is span tag inside h1 tag.......... </span></h1>
</div>
</div>
</body>
<script>
var valueOfh1 = document.querySelector('div.second-header h1');
var value = valueOfh1.childNodes[0].textContent;
console.log(value);
</script>
</html>
実行方法
上記のプログラムを実行するには、コードを「index.html」などの任意の名前で保存します。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してください。
出力結果
このプログラムを実行すると、次のような出力が得られます。
コンソールには以下のように出力されます。
-
JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】
JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam
-
【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説
Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要