htmlでdivの中身を取得したい

Question

htmlでwebサイトを作ろうと考えているのですが、javascriptでdiv内の文字の取得の仕方が解りません。
どなたか詳しい方取得の方法を教えていただけますか。

<div id="div1">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

Answer 1

こんにちは。
未熟者ですが、私ならこういうコードを書きます。
何かコメントありましたら、ご助言などお願いします。

■divの直下にあるテキストを抽出する場合

<script> var forEach = Array.prototype.forEach; var parentElem = document.getElementsByTagName( "div" )[0]; forEach.call(parentElem.childNodes, function(childElem){ if( childElem.innerHTML ){ console.log( childElem.innerHTML ); }else{ console.log("残念！タグの直下に文字はありませんでした！"); } }); </script>

これでいかがでしょう？

Answer 2

こんにちは。
どちらのdivについて言っているのかはわかりませんが、
プレーンなjavascriptでしたら、こんな感じでいかがでしょうか？

window.onload=function(){

 var element = document.getElementById("div1"); 
 var childs = element.childNodes; 

 var gettingStr = "";
 for(var i=0; i < childs.length; i++ ){
   if(childs[i].tagName == "DIV"){
     gettingStr += childs[i].innerText+"\n";
   }
 }
 alert(gettingStr);
}

・ getElementById()で親divのidを指定し、エレメントを取得
・ childNodesで子要素を全て取得
・ tagNameでDIVのタグ名かどうかを判定
・ innerTextで該当タグ内のテキストを取得
となっています。

Comments

[think49]

innerText は IE 独自拡張です。
IE8 も考慮するなら textContent, innerText を併用する必要があります。
IE9 なら childNodes の代わりに children を、innerText の代わりに textContent が使えるのでクロスブラウザが楽です。
MSサポートサイクル的にはあと9時間で IE8 のサポートが切れるので、IE8 に対応するのは特別な状況でなければ考慮しなくて良いと思います。
https://www.microsoft.com/japan/msbc/Express/ie_support/

[kaputaros]

think49さん

ご指摘ありがとうございます。
> innerText は IE 独自拡張です。
そうだったんですね。
chromeで実行して普通に動いていたので、気づきませんでした。
この場合、innerHTMLでもいけますね。

Answer 3

'use strict';
var texts = Array.prototype.map.call(document.querySelectorAll('#div1>div'), function (div) {
  return div.firstChild.data;
});
console.log(texts); // ["1", "2", "3"]