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要咋写?
把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')”吗?
因为浏览器将对所有带有id
s 的元素的引用转储到全局命名空间中,使用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 遍历。在深度嵌套的函数中,可能会有更多的作用域链遍历,但这不太可能是一个主要问题。
但同样,我强烈建议不要依赖自动元素全局变量。相反,将您的代码包装在一个作用域函数中(如您所示),并根据需要使用getElementById
、querySelector
、querySelectorAll
等来故意获取元素。如果您依赖自动全局变量,最终您可能会被冲突所困扰。但这是意见。
请注意,使用 getElementById
查找元素非常快,因此出于性能原因通常不需要缓存引用(您可能希望这样做以用于其他原因,比如编码方便)。使用选择器(querySelector
,querySelectorAll
)查找事情有点慢,但我会说当/如果有问题时担心它。 :-)
【讨论】:
我对如何编写 ID 和函数有一个特殊的模式。就我而言,不会有冲突。此外,我永远不会与其他程序员分享我的代码。如果所有现代浏览器都支持该技术并且他们计划继续这样做,我认为没有理由不尝试它。但是,非常感谢您的回答! 几周前我偶然发现了这项技术,并一直在使用它。它适用于所有浏览器,包括移动浏览器。以上是关于document.getElementById()取不到值?的主要内容,如果未能解决你的问题,请参考以下文章
Chrome 中的 document.getElementById().innerText
打字稿中的 document.getElementById(s).document.getElementsByClassName 错误
为啥不需要 document.getElementById? [复制]
document.getElementById/Name/TagName