如何使用 Dart 设置元素的文本？答案

【问题标题】：How to set the text of an element with Dart?如何使用 Dart 设置元素的文本？
【发布时间】：2012-10-26 00:44:21
【问题描述】：

我在 3 天前实现了我的第一个 helloworld，现在我想更进一步。

我尝试调用一个函数，并将结果放入我的 html 中。

我的 HelloWorld.dart

import 'dart:html';

main() {
  var s = '';
  for (var i = 0; i < 10; i++) {
    s = '$s$i ';
  }

  HTMLElement element = document.getElementById('text');
  element.innerHTML = 'test';
  //element.innerHTML = s;
  print(s);
}

我的 print(S) 工作，它在我的飞镖编辑器输出中打印我：0 1 2 3 4 5 6 7 8 9

但现在，我想将结果放入我的 html 中。

这是我的 HelloWorld.html ：

    <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <link rel="stylesheet" href="HelloWorld.css">
  </head>
  <body>
    <h1>Exercice 01</h1>

    <p>Hello world from Dart!</p>

    <div id="container">
      <p id="text"></p>
    </div>

    <script type="application/dart" src="web/HelloWorld.dart"></script>
    <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

很简单不是吗？所以实际上我看到我的页面有我的 h1 和我的 p。但是，我在我的 id "text" 中看不到任何内容，我尝试推送我的 var ，但不起作用，所以我尝试推送一个简单的字符串，如您所见（在我的帖子的第一个代码块处返回），并且不起作用。

我可能误解了 .html 和 .dart 之间通信的一些内容，请有人帮助我吗？

Ps : 我的输出没有任何错误。

【问题讨论】：

标签： javascript html dart

【解决方案1】：

感谢您的提问！

首先，使用querySelector()代替document.getElementById，像这样：

import 'dart:html';

main() {
  var s = '';
  for (var i = 0; i < 10; i++) {
    s = '$s$i ';
  }

  var element = querySelector('#text');
  element.text = 'test';
  print(s);
}

querySelector() 通过接受 CSS 选择器并返回匹配的第一个元素来工作。要按 ID 查找元素，请使用 #the-id 语法（或者，在元素的 ID 前面加上 #）。

使用element.text setter 代替innerHTML。

希望有帮助！

【讨论】：

注意更新的语法；现在，您将希望使用“querySelector”通过 ID 获取元素，并使用“querySelectorAll”获取元素集合，例如通过它们的公共类名。