javascript - javascriptのみ（jQueryなし）を使用してdivタグのテキストを取得するにはどうすればよいですか？

Question

私はこれを試しましたが、「未定義」を示しています。

function test() {
var t = document.getElementById('superman').value;
alert(t); }

単純なJavascriptを使用して値を取得する方法はありますか？jQueryを使用しないでください！

Answer 1

textContentの代わりに試してみることをお勧めしますinnerHTML。

GiveinnerHTMLは、DOMコンテンツをとして返しますがString、の「テキスト」だけではありませんdiv。divテキストのみが含まれていることがわかっている場合は問題ありませんが、すべてのユースケースに適しているとは限りません。そのような場合は、おそらくtextContent代わりにを使用する必要がありますinnerHTML

たとえば、次のマークアップを検討します。

<div id="test">
  Some <span class="foo">sample</span> text.
</div>

次の結果が得られます。

var node = document.getElementById('test'),

htmlContent = node.innerHTML,
// htmlContent = "Some <span class="foo">sample</span> text."

textContent = node.textContent;
// textContent = "Some sample text."

詳細については、MDNを参照してください。

• textContent
• innerHTML

Answer 2

textContentIE8以前ではサポートされていないため、回避策は次のとおりです。

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerTextIEで動作します。

Answer 3

を使用するinnerHTMLか（HTMLからテキストを解析する）、またはを使用できますinnerText。

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTMLIE6をinnerText含むすべてのブラウザ（FireFox <44を除く）でサポートされています。

Answer 4

document.getElementById()実際には、にアクセスするために関数を呼び出す必要はありませんdiv。

objectこれは次の方法で直接使用できますid：

text = test.textContent || test.innerText;
alert(text);