缺少 DOM 元素答案

【问题标题】：Missing DOM element缺少 DOM 元素
【发布时间】：2013-11-01 13:35:15
【问题描述】：

我使用的是 Chrome 30.0.1599.101，但 name 元素存在问题：它没有属性。

<html>
<body>
<form>
    <input name="name" id="name" type="text">*<br>
    <input name="pass" id="pass" type="text">*<br>
</form>

<script>

var name = document.getElementById("name");
var pass = document.getElementById("pass");

console.log(name); // no properties
console.log(pass); // everything ok

</script>
</body>
</html>

为什么name 元素没有属性？这不仅是控制台问题 - 在代码中无法访问这些属性。但是，在 Firefox 浏览器中一切正常。即使在同一个浏览器中使用完全相同的代码（由 Gurpreet Singh 编写），一切正常。我按照 Uooo 的建议尝试了 <!DOCTYPE html5>，尝试重置浏览器，但在 localhost 上仍然没有运气。

这是截图：

如果我将名称 name 更改为其他名称，则属性是可见的。

【问题讨论】：

在这里工作正常jsfiddle.net/372ZW
我使用的是同一个版本，但是在 Mac 上，这里可以正常工作
另外，不要相信控制台。
奇怪，小提琴也适合我。它与我的本地主机上的代码完全相同。

标签： javascript google-chrome dom

【解决方案1】：

我不知道这是否会导致错误，但您至少应该关闭输入

<html>
  <body>
    <form>
        <input name="name" id="name" type="text"/>*<br>
        <input name="pass" id="pass" type="text"/>*<br>
    </form>
  </body>
 </html>

小提琴也适合我...

您的 chrome 控制台中是否有任何警告和/或错误？

您还应该在该函数中使用您的脚本：

<script>
$(function() { //shortcut for document ready

    //Get your elements here otherwise you can't be sure that dom is loaded.

});
</script>

如果你不使用 jquery，那么如果你想要一个 Xbrowser 解决方案，那么检测 dom 何时加载是一项艰巨的任务，很多话题都在谈论这个。

【讨论】：

关闭单个标签仅适用于 XHTML。 <br />= XHTML，<br> = HTML4/5
OP 没有说他使用 jQuery。非 jQuery 答案：stackoverflow.com/questions/799981/…

【解决方案2】：

缺少<head> 和<title>，也许这有帮助，没有它们是无效的HTML。

jsfiddle 确实会自动插入这些标签，这可以解释为什么它可以在那里工作，但不能在本地工作。

不要被绿色箭头的答案弄糊涂了，您不关闭输入标签，但不关闭 br，反之亦然。 XHTML 中的所有单标签都需要关闭才有效，但在 HTML4 和 HTML5 中，您根本不需要关闭任何单标签。

【讨论】：

【解决方案3】：

我会建议遵循符合我预期的更改版本

navigator.userAgent
"Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1678.0 Safari/537.36"

代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script>
document.addEventListener('readystatechange', function(event) {
    if (event.target.readyState !== "complete") {
        return;
    }
    var name = document.getElementById("name");
    var pass = document.getElementById("pass");
    console.log(name);
    console.log(pass);
}, false);
</script>
</head><body>
<form>
    <input name="name" id="name" type="text">*<br>
    <input name="pass" id="pass" type="text">*<br>
</form>
</body></html>

说明

脚本元素应位于 HTML 文档的头部元素中。
处理 DOM 的脚本代码需要在文档完全加载后运行。

隐式修复的问题

脚本代码不应在全局范围内运行，其中 var name 和 pass 可能与现有变量发生冲突。它现在在匿名事件侦听器函数的范围内运行。

遗留问题

对密码字段使用 type="password"。
使用 value 属性来默认输入类型值。
最好使用 div 元素而不是 br 元素来垂直布局输入元素。

【讨论】：

【解决方案4】：

name 已经是a global property（window 的一个属性），不仅如此，它还有点类型化（String）。 var name = ... 与 window.name = ... 基本相同。使用另一个实际上还没有被使用的变量名，你应该没问题。

【讨论】：

啊，我们开始吧：DOM Level 0. Not part of any standard. - 所以它可以在其他地方工作。正如我检查的那样，名称被转换为字符串类型，就像window.name 应该的那样。现在一切都清楚了，谢谢。