Question

如果以前曾问过这个问题，请原谅我。

我是JavaScript的新手，我正在阅读以下博文：http://www.dustindiaz.com/javascript-no-no/

他提出的第一点是将document.getElementByID（）调用移动到getter中。这对我来说很有意义，因为它使代码更加模块化和方便。然而，他接着说：

大多数人甚至更喜欢经典的Prototype $函数，它允许你传入任意数量的参数。这也很有效。

$('foo', 'bar', 'baz');

我无法找到关于此方法的文档，我是否正确地读到这相当于调用document.getElementById()，除了你可以在原型中有多个参数？

如果是这样，使用document.getElementbyId('foo')优于$('foo')?

有什么好处

编辑：我刚刚意识到他在P＆＃34; Prototype＆＃34;中大写了P。 Prototype是某种外部框架吗？我感到印象深刻，它就像一条捷径或其他东西。

Answer 1

Prototype是一个相当常见的库，用于选择元素并提供帮助程序，通常围绕操作所述元素。 $函数现在通常与jQuery相关联，虽然Prototype仍然存在并且有所维护（最后一个版本似乎是2014年4月）。

使用哪种方法在很大程度上取决于您需要做什么。如果你要做的 all 是按ID选择元素，那么只需使用document.getElementById（包装在方法中或根据需要缓存）。它内置于浏览器中，以简单，可靠的方式满足您的需求。如果你不需要依赖，特别是像Protoype或jQuery那样重的依赖，那么就不要包含它。

但是，如果（或何时）开始需要更复杂的选择器，可能必须拉入库。 jQuery和Prototype可以为元素（#foo > li.bar）处理更复杂，类似CSS的选择器。使用现代浏览器，DOM确实支持一些更复杂的选择器（例如getElementsByClassName按类选择，或querySelectorAll提供CSS选择器），这可以提供足够的灵活性，从而不需要库。

jQuery和Prototype之间的一个显着区别是Prototype提供的$函数是getElementById的包装器，你应该使用$$来表示复杂（CSS）选择器。另一方面，jQuery只提供$表单并支持那里的所有选择器。如果您只需要原型$，那么getElementById可能会满足您的需求，而不会产生依赖关系。

请注意，一旦您选择了元素，Prototype和jQuery也会提供一些帮助。例如，您可以$("#foo").find(".bar").hide()隐藏#foo类bar中的所有元素。您应该查看每个文档的文档，并查看您希望使用的功能数量。

Answer 2

像$('CSS selectors here')这样的符号来自jQuery（http://jquery.com/）或Prototype（http://prototypejs.org/）等框架。

表达式document.getElementById('ID')和document.getElementsByTagName('HTML TAG NAME')来自纯本机Java脚本。

您还可以查看类似document.querySelector()（https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector）的内容，它也是本机Java脚本，但是为我们提供了document.getElementById（'ID'）没有 - 选择的可能性具有CSS选择器的DOM元素您正在撰写的主题的核心是什么。

本主题的更复杂比较您可以在此处找到：document.getElementById vs jQuery $()

Answer 3

$('#id')表示法是一个jQuery选择器。

与document.getElementById('id')相同，它是一个Javascript原生选择器。

在jQuery API规范（link）中，您可以看到无论何时使用$('#id')选择器，jQuery都会使用document.getElementById()。

在文章中，PROTOTYPE $引用了Prototype JS框架（link）提供的$函数，不应与Object.prototype混淆

Answer 4

这里有一些不同之处：

$('foo')

这将获得id="foo"的元素使用它，Prototype将它包含在它的功能中每个参数都是一个不同的元素，将会选择不同的id。

您正在使用$ (dollar)实用程序功能。

使用此：

document.getElementbyId('foo');

您正在选择相同的元素，但未在任何框架中包装。
您可以直接访问它。

在内部，$('foo')将映射到document.getElementbyId('foo')。

这与问题无关，但最好指出。

这个例子：

$('foo')

可能会与jQuery framework混淆，将CSS element selector作为第一个元素传递，选择所有<foo>元素。

这与Prototype的$$ (dollar-dollar)实用程序具有相同的行为。

JavaScript：$（＆＃39; foo＆＃39;）vs document.getElementById（＆＃39; foo＆＃39;）

4 个答案: