document.getElementById()取不到值?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了document.getElementById()取不到值?相关的知识,希望对你有一定的参考价值。

<div id="bb"></div>
<div id="aa">这是bb要显示的内容</div>

<script type="text/javascript">
function getValue()
var bb=document.getElementById("aa");
alert(bb.innerhtml);

</script>

在html里,我想要<div id="bb"> 显示<div id="aa">里的内容,这个JS要咋写?

你写错了,js里面document.getelementbyid(id)是通过标签的id值获取标签对象的这个方法是获取的一个对象;而document.getelementsbyname(name)是通过标签的name值获取标签对象的,他的返回值是一个数组。 参考技术A 你上面的js不工作?
把func去掉试试 也就是

<script type="text/javascript">
var bb=document.getElementById("aa");
alert(bb.innerHTML);
</script

为啥不需要 document.getElementById? [复制]

【中文标题】为啥不需要 document.getElementById? [复制]【英文标题】:Why is document.getElementById not needed? [duplicate]为什么不需要 document.getElementById? [复制] 【发布时间】:2014-11-13 22:10:39 【问题描述】:

1) 问题 1

以下示例在不使用“document.getElementById('myId')”的情况下工作。为什么会这样,可以跳过“document.getElementById('myId')”吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript question</title>

<script>
window.onload = function()
    myId.style.color = 'red';

</script>

</head>
<body>

<div id=myId>
<p>Make this color red.</p>
</div>

</body>
</html>

2) 问题 2

我通常存储浏览器对象以减少 DOM 遍历(参见下面的示例)。如果我不将 ID 存储在变量中或者它已经是一个变量,会不会是更多的 DOM 遍历?

window.onload = function()

var myId = document.getElementById('myId'); /* stored ID that will be used multiple times */

myId.style.color = 'red';

谢谢!

【问题讨论】:

jsfiddle: jsfiddle.net/feeela/2zr5Lgfo 当网页中需要大量此类元素时,存储所有内容可能不是一个好主意。 【参考方案1】:

以下示例在不使用“document.getElementById('myId')”的情况下工作。为什么会这样,可以跳过“document.getElementById('myId')”吗?

因为浏览器将对所有带有ids 的元素的引用转储到全局命名空间中,使用id 作为变量名。 (技术上,作为全局对象上的 property 名称;全局对象的属性是全局变量。)我强烈建议不要依赖它并使用document.getElementById(或类似)代替。全局命名空间真的很拥挤,还有很多其他的东西可能会发生冲突。

例如,如果你有

<div id="foo">...</div>

function foo() 

那么在你的代码中使用foo会给你函数,而不是元素。

如果你有类似的情况

<input type="text" id="name">

...并在您的代码中使用name,您将获得窗口的名称(字符串),而不是id="name" 字段的HTMLInputElement

§5.2.4 of the HTML5 spec 涵盖了将对元素的引用转储到全局命名空间中的业务,在这种情况下,它主要记录了浏览器长期以来所做的事情。

如果我不将 ID 存储在变量中或者它已经是一个变量,会不会是更多的 DOM 遍历?

上面已经是一个全局变量,所以没有额外的 DOM 遍历。在深度嵌套的函数中,可能会有更多的作用域链遍历,但这不太可能是一个主要问题。


但同样,我强烈建议不要依赖自动元素全局变量。相反,将您的代码包装在一个作用域函数中(如您所示),并根据需要使用getElementByIdquerySelectorquerySelectorAll 等来故意获取元素。如果您依赖自动全局变量,最终您可能会被冲突所困扰。但这是意见。

请注意,使用 getElementById 查找元素非常快,因此出于性能原因通常不需要缓存引用(您可能希望这样做以用于其他原因,比如编码方便)。使用选择器(querySelectorquerySelectorAll)查找事情有点慢,但我会说当/如果有问题时担心它。 :-)

【讨论】:

我对如何编写 ID 和函数有一个特殊的模式。就我而言,不会有冲突。此外,我永远不会与其他程序员分享我的代码。如果所有现代浏览器都支持该技术并且他们计划继续这样做,我认为没有理由不尝试它。但是,非常感谢您的回答! 几周前我偶然发现了这项技术,并一直在使用它。它适用于所有浏览器,包括移动浏览器。

以上是关于document.getElementById()取不到值?的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 中的 document.getElementById().innerText

打字稿中的 document.getElementById(s).document.getElementsByClassName 错误

为啥不需要 document.getElementById? [复制]

document.getElementById/Name/TagName

document.getElementById 与 jQuery $()

哪个更好 - Ext.get() 或 document.getElementById()