5

我有这个 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,或时间或日期,即我需要让孩子们,这是如何完成的?

我努力了:

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

document.getElementsByClassName('date').value;

和其他人,但似乎仍然无法处理它。

4

4 回答 4

8

使用像 jQuery 这样的以 DOM 为中心的 Javascript 库可以使这些任务变得更加容易,代码如下:

$('#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;
}());
于 2012-09-20T09:34:03.483 回答
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的 s 在整个文档中应该是唯一的。

演示

于 2012-09-20T09:12:17.203 回答
1

如果您需要获取根节点的所有直系后代,请使用此,

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

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

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

或者获取根节点的所有跨度,因为那是文本所在的位置,试试这个,

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

我不确定这是否是您想要完成的。尽管。

于 2012-09-20T09:19:21.333 回答
0

尝试这个

document.getElementById('mychannels').innerHTML

如果你在不同的地方没有相同的 id

于 2012-09-20T09:12:37.657 回答