getElementsByClassName> get children

Question

我有这个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;

和其他人一样,但似乎无法掌握它.

Answer 1

使用以jQuery为中心的以DOM为中心的Javascript库,这些任务变得更加容易,其代码如下:

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

使用本机方法实现的一个重要事情是,getElementById总是会返回单个元素,像getElementsByClass元素的返回集合这样的方法,这是代码无法工作的原因之一(另一个原因是它value不是标准的DOM元素属性) :它用于检索表单元素的当前值).

以下文档方法querySelectorAll适用于所有现代浏览器和IE版本8以上版本(getElementsByClassName在IE版本9中不起作用):

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

为了得到innerHTML任何元素的组合(在你的代码中它只是一个,但它可能更多),你需要将这个元素集合存储在一个变量中,然后循环它们以innerHTML逐个提取它们:

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;
}());

Answer 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;

另请注意，您的ids 在整个文档中应该是唯一的。

演示。