JavaScriptでspan要素のテキストを取得する方法
JavaScriptで要素のテキストを取得するには、document.querySelector()で対象の要素を取得し、そのinnerHTMLプロパティを参照します。以下に、実際に動作するサンプルコードを示します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScriptでspan要素のテキストを取得</h1>
<span class="test">これはspan要素の中にあるサンプルテキストです</span>
<div class="sample"></div>
<button class="Btn">クリック</button>
<h3>
上のボタンをクリックすると、span要素のテキストが表示されます
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let spanEle = document.querySelector(".test");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = "spanのテキスト = " + spanEle.innerHTML;
});
</script>
</body>
</html>
実行結果
このHTMLファイルをブラウザで開くと、次のように表示されます。
「クリック」ボタンを押すと、span要素から取得したテキストが下のdiv要素に出力されます。
コードの解説
document.querySelector(".test")は、class属性が「test」である最初の要素(ここではspan要素)を取得します。次に、addEventListener("click", ...)でボタンのクリックイベントを登録し、クリックされたタイミングで処理を実行しています。
innerHTMLプロパティは、要素内のHTMLを文字列として返します。これを読み取ることでspan要素のテキストを取得でき、取得した値は同じくinnerHTMLを使ってdiv要素に書き出しています。
なお、HTMLタグなどを含まない純粋なテキストだけが必要な場合は、textContentプロパティを使用するのがおすすめです。
-
JavaScriptで親要素の子要素を取得する方法【サンプルコード付き】
JavaScriptでは、親要素が持つchildrenプロパティを参照することで、その直下にある子要素をまとめて取得できます。本記事では、実際に動作するサンプルコードを使いながら、具体的な手順をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使って親要素（parent1）の子要素を取得し、ボタンのクリックで一括表示させる例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta nam
-
JavaScriptでフィボナッチ数列のN番目の要素を取得する方法
JavaScriptで、1つの数値を引数として受け取る関数を作成する必要があります。この引数を n と呼びましょう。この関数は、フィボナッチ数列の n 番目の要素を返す必要があります。期待される出力例fibonacci(10) → 55 を返す fibonacci(3) → 2 を返す fibonacci(6) → 8 を返す fibonacci(2) → 1 を返すフィボナッチ数列とは、最初の2項が 1 であり、それ以降の各項が直前の2項の和となる数列です。つまり、1, 1, 2, 3, 5, 8, 13, 21, 34, 55 ... のように続いていきます。実装コード以下は、配列を使って