HTML5“时间”标签未正确设置值答案

【问题标题】：HTML5 'time' tag not setting value properlyHTML5“时间”标签未正确设置值
【发布时间】：2011-08-29 19:27:23
【问题描述】：

我有以下代码：

<html>
<script>


setInterval("settime()", 1000);

function settime () {
  var dateTime = new Date();
  var hours = dateTime.getHours();
  var minutes = dateTime.getMinutes();
  var time = "";

  if (hours === 0) { 
    hours = 12;
  }

  time = (hours > 12 ? hours - 12 : hours) + ":" +
         (minutes < 10 ? "0" : "") + minutes + (hours > 12 ? "PM" : "AM");

  // Doesn't work at all...
  document.getElementsByTagName('time').textContent = time;
  document.getElementsByTagName('time').innerHTML = time;


  console.log('Time set with js: ' + document.getElementsByTagName('time').textContent);

  // Works fine...
    //$('time').text(time);
}
</script>

<body>

    <time></time>

</body>
</html>

为什么普通的 JS 根本不工作，而 jQuery text() 工作得很好？

Fiddle

【问题讨论】：

标签： javascript time html

【解决方案1】：

因为document.getElementsByTagName 返回的是nodeList 而不是单个元素，所以您必须指定哪个。节点列表像数组一样工作：

document.getElementsByTagName('time')[0].innerHTML = time;

有效。

http://jsfiddle.net/4EqxW/3/

【讨论】：

我认为你会以 7 秒的优势获胜 :)
哇，他比我晚了 7 秒，而不是倒过来 ;-)（19:30:14Z 对 19:30:08Z）
@Marek Sebera 当我更新答案时，日期发生了变化。如果你检查你的小提琴网址，你会看到它有一个 4，而我的有一个 3，因为我先保存了它。无论如何，这只是一个细节，我们都是对的（：
保存在 jsfiddle 上的时间对于在此处发布答案的时间并不重要；）但正如您所说，只是一个细节
伙计，当我像这样向人们扔一个简单的垒球时，我喜欢它:)

【解决方案2】：

注意document.getElementsByTagName('time')[0]. 部分

http://jsfiddle.net/4EqxW/4/

getElementsbyTagName 正在返回节点数组 (NodeList)，因此您必须指定要访问哪个元素的属性

【讨论】：

【解决方案3】：

Marek Sebera 和“amosrivera”回答了您问题的第一部分（主要部分）

然后回答你问题的第二部分......

jQuery 的“text()”方法将对与您的原始选择器匹配的 ALL 元素（也就是...页面上的每个“时间”元素）执行所需的结果。

【讨论】：

【解决方案4】：

试试

document.getElementsByTagName('time')[0].textContent = time;
document.getElementsByTagName('time')[0].innerHTML = time;

请注意，getElementsByTagName 返回一个 NodeList，它是一个数组，而不是单个元素。 Results of code change.

【讨论】：