Javascript 缺少DOM元素_Javascript_Google Chrome_Dom

Javascript 缺少DOM元素

javascript google-chrome dom

Javascript 缺少DOM元素,javascript,google-chrome,dom,Javascript,Google Chrome,Dom,我使用的是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 =

我使用的是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>


*

*

var name=document.getElementById（“名称”）；
var pass=document.getElementById（“pass”）；
console.log（名称）；//无属性
console.log（pass）；//一切都好吗

为什么

name

元素没有属性？这不仅仅是控制台的问题——代码中无法访问属性。不过，在Firefox浏览器中，一切都可以正常工作。即使是在同一浏览器中使用相同代码的小提琴（Gurpreet Singh）中，一切都能正常工作。我按照Uoo的建议尝试了

，尝试重置浏览器，但在localhost上仍然没有成功

以下是一个屏幕截图：

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

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

<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>


$（函数（）{//文档准备就绪的快捷方式
//在此处获取元素，否则无法确保加载了dom。
});

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

缺少

和

，也许这有帮助，没有它们，HTML是无效的

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

不要被绿色箭头的回答弄糊涂了，

不关闭输入标记，但不关闭br，反之亦然。XHTML中的所有单个标记都需要关闭才能生效，但在HTML4和HTML5中，您根本不需要关闭任何单个标记。

我建议使用以下更改的版本，该版本在

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>


document.addEventListener（'readystatechange'，函数（事件）{
如果（event.target.readyState！=“完成”）{
返回；
}
var name=document.getElementById（“名称”）；
var pass=document.getElementById（“pass”）；
console.log（名称）；
控制台日志（pass）；
}，假）；
*

*

解释

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

隐式修复问题

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

遗留问题

密码字段使用type=“password”
使用“值”属性设置默认输入类型值
最好使用div元素垂直布局输入元素，而不是br元素

名称

已经存在（是

窗口

的一个属性），不仅如此，它还有点类型化（

字符串

）。

var name=…

与说

window.name=…

基本相同。使用另一个实际上尚未使用的变量名，您应该可以使用。

在这里工作正常我使用的是同一个版本，但在Mac上，它在这里也工作正常，不要相信控制台。奇怪的是，小提琴也适用于我。它与我的本地主机上的代码完全相同。关闭单个标记仅适用于XHTML

=XHTML，

=HTML4/5OP没有说他使用jQuery。非jQuery回答：啊，我们开始：

DOM级别0。不是任何标准的一部分。

-因此它在其他地方也适用。正如我所检查的，名称被强制转换为字符串类型为

window。名称应为。现在一切都好了，谢谢。