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

如何获得句柄并输出单个项，例如:mychannel、teems、time或date，例如，我需要获取子项，这是如何完成的？

我试过了：

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

和

document.getElementsByClassName('date').value;

和其他人，但似乎仍然不能处理它。

Answer 1

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

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');

我不确定这是否是您想要实现的目标。不过。