getElementsByClassName方法>让孩子

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或时间或日期 即ie我需要得到的孩子，这是如何做到的？

我曾尝试：

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

和

document.getElementsByClassName('date').value; 

等人，但仍不能似乎得到它的句柄。

Answer 1

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 s在整个文档中应该是唯一的。

DEMO。

Answer 2

试试这个

document.getElementById('mychannels').innerHTML 

如果u dont有在不同的地方

Answer 3

相同的ID如果你需要把所有的根节点的直接后裔，利用这一点，

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

如果需要根节点的所有子节点，使用此

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

或获得根节点的所有跨度，因为多数民众赞成在文字，试试这个，

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

我不知道这是否是你想要完成的任务。虽然。

Answer 4

这些都是由同一个DOM为中心的JavaScript库，例如jQuery的，为此，该代码会容易得多任务：

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