<div class="subDivClass"> one Hello One!! </div> <div class="subDivClass"> two "> <div class="subDivClass"> one Hello One!! </div> <div class="subDivClass"> two "> <div class="subDivClass"> one Hello One!! </div> <div class="subDivClass"> two " />

どのようにjavascriptを使用してIDを持つ他のdiv内のdivのh2タグの値を取得する

私はIDを持つdivを持っていますが、idを持たない他のdivもあります。

何かのようなもの:

<div class="mainDivClass" id="mainDiv">
    <div class="subDivClass">
        

one

Hello One!! </div> <div class="subDivClass">

two

Hello Two!! </div> <div class="subDivClass">

three

Hello Three!! </div> </div>

私のjavascriptでは、私は上記のdivのようにループしています:

var divLists = document.getElementById('mainDiv').firstChild.childNodes; 

for (var i = 0; i < tabLists.length; i++) { 
  var anchor = divLists[i].firstChild; 
  var iconFile;

  if(i==0)
  {
    iconFile = 'details.png';                     
  }

  else
  {
    iconFile = 'search1.png';
   }
  anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
  anchor.style.backgroundRepeat = 'no-repeat';        
  anchor.style.backgroundPosition = '1px 2px';        
  anchor.className = 'toplevel-tab';
} 

示されているように、iの値にiconFile変数を設定しています。したがって、i = 0の場合はdetails.png、それ以外の場合はsearch1.pngとなります。

今、要素のh2値に基づいてiconFile変数の値を決定したいと思います。 つまり、h2がバナナの場合、banana.pngはiconFileに入りますが、h2がオレンジの場合はorange.pngが選択されます。

どのようにjavascriptの内部h2値を取得するには?

読んでくれてありがとう!!

ニック

0
document.getElementById( 'mainDiv')。firstChild; はおそらくテキストノードでしょうか? document.getElementById( 'mainDiv')。childNodes; がうまく機能します。
追加された 著者 user1385191,

4 答え

innerHTMLは使用しないでください。これは信頼性の低い独自のMicrosoftメソッドです。アプリケーションレベルでコーディングを開始し、その理由を把握できない場合は、すぐに問題が発生します。代わりにDOM仕様を使用してください。

明らかにループに投げ込むことができる例...

document.getElementById('subDivClass').getElementsByTagName('h2').firstChild.nodeValue

.parentNode - The parent element of the currently referenced element.

.parentNode.parentNode.parentNode - You can use this as much as you want to go up or around the DOM.

.childNodes[0] - Index of child elements, does NOT contain reference to text nodes AFTER an element (use treewalker for that).

.nodeValue - The text value of a node, do NOT use innerHTML.

.textContent - Gets or sets the text of an element (but no child elements); a bit easier than nodeValue though it still has reasonable limitations.

.previousSibling - The element BEFORE the reference element, not a child/parent.

.nextSibling - The element AFTER the reference element, not a child/parent.

in演算子を使用してオブジェクトのすべてのオブジェクト(メソッド、プロパティ、その他のオブジェクトなど)を表示して、利用可能なその他のものを発見することができます。

 for (i in document.getElementById('mainDiv')) {alert('i = '+i);}

XMLパーサー(application/xhtml + xml)を使用する場合と比較して、HTMLパーサー .nodeName を使用してスタックしている場合はすべて大文字(例:古いInternet Explorerの方法) > .nodeName は、要素の名前を小文字で正しく返します(実際には90のスタイルなどになっていない限り)。

また、 previousSibling nextSibling を使用すると、改行だけで textNode が作成され、その改行はCSSで混乱することにも注意してください font-size を5pxに設定すると、これは一般的に排除されます)。

2
追加された
あなたの返信をありがとう。しかし、私はどのように私はdocument.getElementById( 'subDivClass')を使用してくださいforループを記述することができますかわかりません.getElementsByTagName(&zwnj; 'h2')firstChild.nod&zwnj; eValue getElementsByTagNameそれ自体がリストになっています...もし私がこのリストの各要素について何かをしなければならないのですか?
追加された 著者 Nik,
(document.getElementById( 'myTab')。getElementsByTagName(&zwnj; 'div')[0] .childNodes&zwnj; [0] .nodeName); H2を与える。どのように値を取得するのですか?私のロジックは、私が持っている価値に依存しているので、アップル、オレンジ、バナナなどは、警告(document.getElementById( 'myTab')。getElementsByTagName(&zwnj; 'div')[0] .childNodes&zwnj; [0] .nodeValue)がnullを返す
追加された 著者 Nik,
警告(document.getElementById( 'myTab')。getElementsByTagName(&zwnj; 'H2')[i] .childNodes [&zwnj; 0] .nodeValue); - これは..このアプローチは良いですか?
追加された 著者 Nik,
返信いただきありがとうございます!私は表示されるアイコンイメージを拾うことができないところでもう一つの疑問を持っています...私は今日、画像、javascriptタグの下に質問を配置しました..あなたもそれを見てください!
追加された 著者 Nik,
試してみてください... alert(document.getElementById( 'mainDiv')。getElementsByTagNam&zwnj; e( 'div')[0] .childNod&zwnj; es [0] .nodeName); ...それが動作すれば( 'div')[0]を( 'div')[i]と置き換えてループに張り付けます。
追加された 著者 John,
これは、innerHTMLではなく標準のDOMメソッドを使用しています。 getElementsByTagName、childNodes、nodeValueは公式のDOM仕様の一部であり、IE 5.5、Opera 7などまで信頼できるものです。IE 5.0にはgetElementsByTagNameに大きなバグがあります。しかし、これらのメソッドはDOMレベル2ですが(DOMレベル1でない場合)、彼らは非常に長い時間を過ごしてきましたが、私はIE6以上では気にしません。
追加された 著者 John,
はい、確認済みですが、それらはDOMレベル1の一部ですが、それ以上の信頼性はありません! w3.org/TR/REC-DOM-レベル1 /レベル1のcore.html
追加された 著者 John,
それを見つけて見て...
追加された 著者 John,

h2の値は以下のように使用されます:

 for (var i = 0; i < tabLists.length; i++) { 
      var anchor = tabLists[i].firstChild; 
      var iconFile;


      if(tabLists[i].firstChild.innerHTML == "Tab 0")
      {
        iconFile = 'one.png';                     
      }

      else if(tabLists[i].firstChild.innerHTML == "apple")
      {
        iconFile = 'apple.png';
       }

      else if(tabLists[i].firstChild.innerHTML == "orange")
             {
                iconFile = 'banana.png';
       }

      else if(tabLists[i].firstChild.innerHTML == "banana")
             {
                iconFile = 'orange.png';
       }

      anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
      anchor.style.backgroundRepeat = 'no-repeat';        
      anchor.style.backgroundPosition = '1px 2px';        
      anchor.className = 'toplevel-tab';

    } 
0
追加された

mainDivClass内のすべてのH2要素が必要な場合は、getElementsByTagNameメソッドを使用できます。

var outerDiv = document.getElementById("mainDiv");
var h2s = outerDiv.getElementsByTagName("h2");

これはすべてのH2要素を要素の配列として返します。

0
追加された
答えに感謝します。私は質問を更新しました。私の要求があなたの答えを通してどのように満たされるかを教えてください。
追加された 著者 Nik,
var answer = function() {
    var parent = document.getElementById("mainDiv"),
        h2 = parent.getElementsByTagName("h2"),
        a = h2.length,
        b;
    for (b = 0; b < a; b += 1) {
        switch (h2[b].innerHTML) {
        case "one":
            //do something
            break;
        case "two":
            //do something
            break;
        default:
            //do something else
            break; 
        }
    }
};
0
追加された
答えに感謝します。私は質問を更新しました。私の要求があなたの答えを通してどのように満たされるかを教えてください。
追加された 著者 Nik,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript