Question

我是一位经验丰富的开发人员，但是javascript新手。我无法弄清楚何时应该使用整个“document.getElementById（e.id）.value”，当我可以使用“e”时。我正在查看一个使用两者的常用函数脚本中的一个微小的现有函数。

功能RemoveFormat（e）{
document.getElementById（e.id）.value = cleanNumber（的document.getElementById（e.id）。价值）; e.select（）; }

（其中cleanNumber是另一个常用功能）

据推测，有些情况需要额外输入，但它们是什么？

谢谢！

Answer 1

如果e是节点，则无需编写document.getElementById(e.id)，您将获得相同的结果。

Answer 2

document.getElementById（）只是按给定的ID（字符串）查找DOM对象，如果找到则返回它。

但 e 在这种情况下只是一个可能是DOM对象的任意变量，或者它可能类似于字符串。这取决于其他源代码的上下文。

如果您的代码如下所示，

getElementById（）是必要的：

<input id="mytext" type="text" onchange="RemoveFormat('mytext')" />

如果您的代码如下所示，

getElementById（）是不必要的：

<input id="mytext" type="text" onchange="RemoveFormat(this)" />

“this”部分将传递对DOM对象（在本例中为文本框）的引用，这正是您所追求的。所以document.getElementById是不必要的。同样的例子可以应用于点击按钮，链接的内容等，等等。

一般来说，我喜欢尽可能使用“this”方法，因为它会清理你的javascript。但有时它不合适。那么我在javascript中使用命名约定来帮助我记住我使用的方法。就像我将使用e的变量名称作为DOM对象，或者使用id作为字符串。这可以帮助您在代码中保持直接。

Answer 3

您的示例演示了何时引用了要控制的元素。如果您已经有对该元素的引用，则没有理由使用document.getElementById来获取对它的引用（您已经有一个）：

<span id="mySpan" onclick="test(this);">TEST</span>
<script type="text/javascript">
function test(el) {
    // el is a reference to an element, you can use it directly
    el.style.display = 'none';

    // to demonstrate that the element you retrieve from gEBI 
    // with el.id is the same as your original reference
    var elAgain = document.getElementById(el.id);
    alert(elAgain === el); // "true"
}
</script>

您可能想要使用document.getElementById的地方是您想要控制另一个您尚未参考的元素：

<span id="mySpan" onclick="test(this, 'myDiv');">TEST</span>
<div id="myDiv" style="display:none;">DIV REVEALED</div>
<script type="text/javascript">
function test(el, otherElId) {
    // el is a reference to an element, you can use it directly
    el.style.display = 'none';
    // otherElId is a string containing the id of
    // the element you want to control
    var theDiv = document.getElementById(otherElId);
    theDiv.style.display = '';
}
</script>

请注意，很少（如果有的话）有理由做以下事情：

<span id="mySpan" onclick="test('mySpan');">TEST</span>
<script type="text/javascript">
function test(theElId) {
    var el = document.getElementById(theElId);
    el.style.display = 'none';
}
</script>

如果从元素事件中触发该函数，则可以传递this（根据我的第一个示例），而不是传递事件发生的元素的id。

Answer 4

没有理由这样做。

e.value = cleanNumber(e.value);

Answer 5

从它的外观来看，你将元素传递给你的函数，但是要从dom中获取元素：

var e = document.getElementById('elementId')

Answer 6

准确地说，功能

function f (e) {
    return document.getElementById(e.id);
}

是定义的任何地方的身份函数，假设 e在文档中。

Answer 7

window.nodeId是一个非标准的IE扩展 - 只存在于最新版本的firefox中，并且只要你使用它就会记录一个警告。但其他问题是，如果有人定义了一个名称与节点标识符冲突的变量或函数，那么该变量或函数将覆盖您的节点引用。

这些细节一起表示在使用window.nodeId时无法保证完全正确的行为，而document.getElementById始终可以正常工作。

我什么时候应该使用getElementById？

7 个答案: