getElementsByClassName > get child

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

如何获取句柄并输出单个项目，例如：我的频道、流量或时间或日期即我需要得到孩子，这是怎么做到的？

我试过：

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

和

document.getElementsByClassName('date').value;

和其他人，但似乎仍然无法掌握它。

Answer 1

这些任务使用以DOM为中心的Javascript库（如jQuery）变得更加容易，其代码将是：

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

使用本机方法要意识到的重要一点是，虽然getElementById将始终返回单个元素，但像getElementsByClass这样的方法返回元素集合，这是代码不起作用的原因之一（另一个原因是value不是标准的 DOM 元素属性：它用于检索表单元素的当前值）。

以下文档方法，querySelectorAll从版本 8 开始的所有现代浏览器和 IE 中工作（getElementsByClassName直到版本 9 才在 IE 中工作）：

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;

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

演示。

Answer 3

如果需要获取根节点的所有直系后代，请使用这个，

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

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

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

或者要获取根节点的所有跨度，因为那是文本所在的位置，请尝试此操作，

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

我不确定这是否是你想要完成的。虽然。

Answer 4

试试这个

document.getElementById('mychannels').innerHTML

如果您在不同的地方没有相同的身份证件