Javascript getElementsByClassName > 获取孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12509440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementsByClassName > get children
提问by dmac
I have this HTML code:
我有这个 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>
I have this JS:
我有这个JS：
document.getElementById('channels').innerText)
Which outputs:
哪些输出：
Sat 22nd Sep @ 12:45
Swansea City v Everton
Sky Sports 2/Sky Sports 2 HD
How do i get a handle and output the individual items like: mychannels, or teems or time or date i.e. i need to get the children, how is this done?
我如何获得句柄并输出单个项目，例如：mychannels、teems 或时间或日期，即我需要得到孩子，这是如何完成的？
I have tried:
我试过了：
document.getElementById('channels').getElementsByTagName('date').value;
and
和
document.getElementsByClassName('date').value;
and others, but still cant seem to get a handle on it.
和其他人，但似乎仍然无法处理它。
回答by Barney
These are tasks which are made much easier with a DOM-centric Javascript library like jQuery, for which the code would be:
这些任务使用以 DOM 为中心的 Javascript 库（如 jQuery）变得更加容易，代码如下：
$('#channels .date').text();
An important thing to realise with native methods is that whereas getElementByIdwill always return a single element, methods like getElementsByClassreturn collections of elements, which is one of the reasons your code isn't working (the other reason being that valueis not a standard DOM element property: it's used for retrieving the current value of form elements).
使用本机方法要实现的一件重要事情是，虽然getElementById将始终返回单个元素，但getElementsByClass返回元素集合之类的方法，这是您的代码无法正常工作的原因之一（另一个原因是它value不是标准的 DOM 元素属性） ：它用于检索表单元素的当前值）。
The following document method, querySelectorAllworks in all modern browser and IE from version 8 upwards (getElementsByClassNamedoesn't work in IE until version 9):
以下文档方法querySelectorAll适用于所有现代浏览器和版本 8 以上的getElementsByClassNameIE（直到版本 9 才适用于 IE）：
document.querySelectorAll('#channels .date');
To get the combined innerHTMLof any elements this turns up (in your code it's just one, but it could be more), you will need to store that collection of elements in a variable and then loop through them to extract their innerHTMLone by one:
要组合出现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;
}());
回答by Jo?o Silva
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;
Also note that your ids should be unique across the entire document.
另请注意，您的ids 在整个文档中应该是唯一的。
DEMO.
演示。
回答by theintersect
If you need to get all the the direct descendants of the root node, use this,
如果你需要获取根节点的所有直接后代，使用这个，
var rootChildren = document.getElementById('channels_0').childNodes;
If you need all the child Nodes of the root node, use this
如果你需要根节点的所有子节点，使用这个
var allChildren = document.getElementById('channels_0').getElementsByTagName('*');
Or to get all the spans of the root node, since thats where the text is, try this,
或者要获取根节点的所有跨度，因为那是文本所在的位置，试试这个，
document.getElementById('channels').getElementsByTagName('span');
I am not sure if this is what you want to accomplish. Though.
我不确定这是否是您想要完成的。尽管。
回答by iJade
Try this
尝试这个
document.getElementById('mychannels').innerHTML
if u dont have same id at different places
如果你在不同的地方没有相同的id
