我有这个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;
和
document.getElementsByClassName('date').value;
和其他人,但似乎仍然无法掌握它。
答案 0 :(得分:6)
使用像jQuery这样以DOM为中心的Javascript库可以轻松完成这些任务,代码将是:
$('#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;
}());
答案 1 :(得分: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 强>
答案 2 :(得分:1)
如果您需要获取根节点的所有直接后代,请使用此
var rootChildren = document.getElementById('channels_0').childNodes;
如果您需要根节点的所有子节点,请使用此
var allChildren = document.getElementById('channels_0').getElementsByTagName('*');
或者为了得到根节点的所有跨度,因为那是文本的位置,试试这个,
document.getElementById('channels').getElementsByTagName('span');
我不确定这是否是你想要完成的。虽然。
答案 3 :(得分:0)
试试这个
document.getElementById('mychannels').innerHTML
如果你在不同的地方没有相同的身份