Javasript 问题

Decade_Hew
  • 235

大家好!
请问出了什么问题呢?

HTML

<h1 id="first>First</h1>

Javascript

var name = getElementById('first');
name.textContent = "DecadeHew";

当我执行测试的时候没改变没反应!
但是如果我把变数 name更换其他字母就可以正常执行!

为什么声明变数name是不能执行?
我有查过js keyword 和 reserved的字都没有name存在,那为什么有这样问题?

谢谢解答!^^

回复
阅读 3k
4 个回答
✓ 已被采纳
Manji
  • 184

不是没反应,是因为没找到DOM对象,为什么没找到?因为文档还没完全加载!如果你试一下下面的代码,就会有反应了:

window.onload = function(){
    var name = document.getElementById('first');
    name.textContent = "Decade";
}

或者,像2L那样,把脚本引入放到最后。


如果元素是p,console.log(name)输出[object HTMLParagraphElement],typeof name结果是string,注意是string而不是String,它只是个值,表示元素对象的类型的名字,而不是指元素对象。即使你定义var name=123; typeof name也是string,说明这个值是个字符串,不能被覆盖,原因不详。

另外,每种浏览器的保留字都多多少少有点出入,像“name”,“value”等等这些在属性能见到的名字还是不要用了吧。

KevinYue
  • 5.3k

楼主的问题真的解决了吗?

之所以会出现这种奇怪的现象,是因为你的name是全局的,但是巧的是,window也有一个name属性,而且后者是不能覆盖的,所以你调用name = ...的时候实际上是给window.name赋的值。而且赋值的时候会调用所赋变量的toString()方法,因此你会发现window.name的值成了[object HTMLDivElement],其他值也是一样,统统变成字符串。之后你再给这个name设置的任何属性都是对window.name进行的操作。

一般情况下,只有name是全局变量的情况下,才会出现这种问题,你在函数中定义name变量是完全没有问题的。解决方法也很简单,换个变量名,或者将它变为非全局的变量即可,我在这里使用了一个匿名的闭包,楼主可以测试下:

(function () {
  var name = document.getElementById('first');
  name.textContent="Hello World";
})();

注:window中还有很多类似name这样的属性,定义全局变量的时候需要注意下。

Links

Window.name

Decade_Hew
  • 235

HTML

<!doctype html>
<html>
<head>
<title>Test 01 - Web Form</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
    <h1 id="first">First</h1>
    <script src="js/test.js"></script>
</body>
</html>

JS

    var name = document.getElementById('first');
    name.textContent = "Decade";    
宣传栏