5

私はこのHTMLコードを持っています:

<div id="channels_0">
   <div id="channels">
      <h4 class="date"><span id="date">Sat 22nd Sep</span> @ 
      <span id="time">12:45</span></h4>
      <h3 class="teems"><span id="date">Swansea City v Everton </span></h3>
      <h4 class="tv"><span id="mychannels"></span>Sky Sports 2/Sky Sports 2 HD</h4>
   </div>
</div>

私はこのJSを持っています:

document.getElementById('channels').innerText)

どの出力:

Sat 22nd Sep @ 12:45
Swansea City v Everton
Sky Sports 2/Sky Sports 2 HD

ハンドルを取得して、mychannels、teems、時間、日付などの個々のアイテムを出力するにはどうすればよいですか。つまり、子を取得する必要があります。これはどのように行うのですか?

私が試してみました：

document.getElementById('channels').getElementsByTagName('date').value;

と

document.getElementsByClassName('date').value;

などがありますが、まだそれを理解できていないようです。

4

4 に答える 4

8

これらは、jQuery のような DOM 中心の Javascript ライブラリを使用すると、はるかに簡単になるタスクです。コードは次のようになります。

$('#channels .date').text();

ネイティブ メソッドで実現する重要なことは、getElementByIdは常に単一の要素を返すのに対してgetElementsByClass、要素のコレクションを返すようなメソッドは、コードが機能しない理由の 1 つです (もう 1 つの理由valueは、標準の DOM 要素プロパティではないことです)。 : フォーム要素の現在の値を取得するために使用されます)。

次のドキュメント メソッドは、querySelectorAll最新のすべてのブラウザーとバージョン 8 以降の IE で機能します ( getElementsByClassNameIE ではバージョン 9 までは機能しません)。

document.querySelectorAll('#channels .date');

これが見つかった要素の組み合わせを取得するにはinnerHTML(コードでは 1 つだけですが、それ以上になる可能性もあります)、その要素のコレクションを変数に格納し、それらをループしてinnerHTML1 つずつ抽出する必要があります。

var dates     = document.querySelectorAll('#channels .date');
var datesText = (function(){
    var string = '';

    for(var i = 0; i < dates.length; i++){
        string += dates[i].innerText;
    }

    return string;
}());
于 2012-09-20T09:34:03.483 に答える
2 
var channels = document.getElementById('channels');

var date = channels.getElementsByClassName("date")[0];
var datePart = date.getElementById("date").innerHTML;
var timePart = date.getElementById("time").innerHTML;

var teems = channels.getElementsByClassName("teems")[0];
var teemsDate = teems.getElementById("date").innerHTML;

var tv = channels.getElementsByClassName("tv")[0];
var tvChannel = tv.innerText;

またid、 はドキュメント全体で一意である必要があることに注意してください。

デモ。

于 2012-09-20T09:12:17.203 に答える
1

ルート ノードの直系の子孫をすべて取得する必要がある場合は、これを使用します。

 var rootChildren = document.getElementById('channels_0').childNodes;

ルート ノードのすべての子ノードが必要な場合は、これを使用します。

 var allChildren = document.getElementById('channels_0').getElementsByTagName('*');

または、ルート ノードのすべてのスパンを取得するには、そこにテキストがあるため、これを試してください。

 document.getElementById('channels').getElementsByTagName('span');

これがあなたが達成したいことかどうかはわかりません。けれど。

于 2012-09-20T09:19:21.333 に答える
0

これを試して

document.getElementById('mychannels').innerHTML

異なる場所で同じIDを持っていない場合

于 2012-09-20T09:12:37.657 に答える