Javascript 为什么在这种情况下document.getElementById的结果为空？_Javascript_Windows 8_Windows Runtime_Winjs

Javascript 为什么在这种情况下document.getElementById的结果为空？

javascript windows-8 windows-runtime

Javascript 为什么在这种情况下document.getElementById的结果为空？,javascript,windows-8,windows-runtime,winjs,Javascript,Windows 8,Windows Runtime,Winjs,我基本上不熟悉JavaScript和WinJs。下面的教程学习它下面是我的default.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HelloWorld</title>  <link href="//Microsoft.WinJS.

我基本上不熟悉JavaScript和WinJs。下面的教程学习它

下面是我的default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h1 class="headerClass">Hello, World!</h1>
    <div class="mainContent">
        <p>What's your name</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput" />
        <label for="ratingControlDiv">
            Rate this greeting:
        </label>
        <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating" />
        <div id="ratingOutput" />
    </div>
</body>
</html>

我在ratingChanged中将ratingOutput设置为null。你知道为什么吗？

正如其他评论所指出的，一定要使用toclose，因为self-closed div不重视HTML5。在Jeffrey给出的链接中，有一段来自验证程序的引用，我相信：“在非void HTML元素上使用的自动关闭语法（/>）。忽略斜杠并将其视为开始标记。”

问题不在于ratingOutput div，而在于它之前用于评级控制的那一个。我将您的代码放到一个新项目中，并复制了您的结果，在VisualStudio的DOM资源管理器中可以看到ratingOutput div根本不存在于DOM中

为什么会这样？它是上面的引用加上WinJS.UI.processAll在ratingControlDiv中创建WinJS控件的方式的组合。WinJS实例化过程（在processAll中）有效地将ratingOutput视为ratingControlDiv的子级，并将其替换为实际的控件内容

换句话说，您看到的行为与您编写的标记完全相同：

<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
    <div id="ratingOutput"></div>
</div>

除非WinJS控件明确表示它以某种方式处理子元素（如语义缩放控件），否则无法保证子元素将被保留

因此，ratingOutput通过rating控件实例化从DOM中删除

使用适当的关闭标记可以解决以下问题：

<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>
<div id="ratingOutput"></div>

好问题--我将把这个注释添加到我正在编写的第二版中

克雷格

（作者，微软出版社的免费电子书）

也许您需要等待domReady事件？当您使用关闭某些dom元素类型的自动关闭方法时，某些浏览器的行为异常。尝试将html更改为

这是一个windows 8应用商店应用程序，这样它就不会在浏览器中运行。不过，我还是会尝试显式关闭

元素。从技术上讲，根据html的变化自动关闭并没有任何区别。感谢Kraig的帮助。在杰弗里的评论中，我只对div做了修改，但并不是全部。现在，当我修复其他Div时，一切正常。不需要它的void元素是：区域、基、br、col、嵌入、hr、img、输入、键根、链接、菜单项、元、参数、源、跟踪、wbr。这些项目上的自动关闭“/”被忽略。它用于外部元素，但要注意自动关闭，这些只是MathML和SVG名称空间标记。其他一切都需要一个结束标记。我在一篇博客上有一个简短的介绍，我会很快更新。

<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>
<div id="ratingOutput"></div>