jquery - 如何通过 id 改进“获取”DOM 元素？

Question

有人告诉我，通过 getElementbyid 或 jQuery("#tagname") 获取元素被认为是“hack”。

争论是没有编译的，因此可能需要很长时间才能找到一个愚蠢的错字。

或者一个更好的论点：当某个元素 id 发生变化时，重构所有内容需要很长时间。

反对这种“黑客”论点的论据是什么？有没有很好的解决方案？

Answer 1

嗯。首先我要说getElementById的是一个标准的 DOM 函数。另外，我认为这比然后循环找到你想要的getElementById要快得多。getElementsByClassName也许他们指的是对 id 进行硬编码，比如如果你的脚本有很多地方说$("#element-id")，那么你可以用一个名为 eid 的变量替换“element-id”，并动态设置它。

当然，我必须说这不是黑客攻击，我不确定是谁认为的。考虑一个简单的例子：

<form id='my-form-name'>
  <input id='input-text' ... />
  ...
</form>

我会说document.forms[0]比说更糟糕$('#my-form-name')。并且能够说$('#my-form-name #input-text')比document.forms[0].children[0]或任何它会更好。

最后，您可以随时执行以下操作：

var $someElement = $('#el-id'); 

这样，您只需将 id 硬编码在一个地方，并且“重构”您的代码涉及更改一个字符串......

Answer 2

除非您个人对此有问题，否则我不会担心。

每个人都使用 ID 来识别元素。在查找 ID 时，编写代码和执行都很快。如果您担心拼写错误/重构，您可以始终将元素存储在一个对象中并在整个脚本中使用它：

var tagname = $("#tagname");

但实际上，我不会担心它。如果您要重命名它们，您总是可以使用自动搜索和替换。

Answer 3

我被告知通过 getElementbyid [sic] 或 jQuery("#tagname") 获取元素被认为是“hack”。

谁告诉你那是错的。getElementById不是“黑客”，它是内置的 JavaScript 函数。这是您通过 ID 获取元素的方式。在内部，jQuery 将在执行jQuery("#tagname"). 原生 DOM 函数比 jQuery 内置的 CSS 引擎 (sizzle) 快得多，通过 ID 获取元素是获取元素的最快方式。

争论是没有编译的，因此可能需要很长时间才能找到一个愚蠢的错字。

我完全不明白这个论点。编译与否，如果你在一个地方改变了一些东西，你将不得不在其他地方改变它。考虑这个 PHP 代码：

<?php
$name = "Joe";

echo $name;

如果我决定更改$name为$customerName怎么办？现在，我将不得不在我的代码中找出一个“愚蠢的错字”。

或者一个更好的论点：当某个元素 id 发生变化时，重构所有内容需要很长时间。

事实上，这是一个更好的论点。您可以进行一次 DOM 查找，然后在其他地方使用该变量。例如：

var $content = $('#content');

$content.attr('rel', 'test'); // Use $content to edit the element

因此，如果 ID 更改，您可以更改$('#content')为其他内容，它会起作用。