getElementsByClassName > 获取子元素

Question

getElementsByClassName > 获取子元素

6

我可以为您翻译这段内容。这是一段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、time或date？

即我需要获取子项，这该如何实现？

我已经尝试过：

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

and

document.getElementsByClassName('date').value;

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

- dmac

这些字段中很多可以通过它们自己的ID立即访问。你不会在文档的几个地方拥有相同的ID，对吧？ - David Hedlund

你尝试过使用 document.getElementById('channels').children 吗？ - Oofpez

无论是getElementsByClassName还是getElementsByTagName都会返回一个_Node_列表，即使其中只有1个元素，所以document.getElementsByClassName('MyClass')[0].value可以使用，不过可以省略[0]，这样也没问题。 - Elias Van Ootegem

4个回答

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

请参考DEMO。

- João Silva

1

如果您需要获取根节点的所有直接子孙，请使用以下方法：

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

如果您需要获取根节点的所有子节点，请使用以下代码。

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

或者要获取根节点的所有span，因为那里是文本所在的位置，请尝试这样做：

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

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

- theintersect

0

试试这个

document.getElementById('mychannels').innerHTML

如果您在不同的地方没有相同的ID

- iJade

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barney · Accepted Answer

如果使用基于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;
}());