Question

我看到人们有时本地或通过jQuery对象访问dom对象。我想知道它的最佳实践。

实施例

function(element){
   $(element).attr('anyattribute');
   //Or
   element.anyattribute;
}

哪个更喜欢？为什么？

Answer 1

为了确定“最佳”，您必须首先提供一些可以判断的标准。如果您只是想访问DOM元素并进行少量处理，那么使用任何类型的库都没有多大意义。如果您的需求更复杂，那么您应该发布它们的内容，以便可以制作适合您尝试的建议。

例如，我在页面中看到了一个4,000行库，只是为了验证单个表单控件。访问控件只需要一行代码，那么包含+ 90kb额外脚本的重点是什么？

图书馆提供的“跨浏览器兼容性”很多，但问题越来越少，而且绝大多数问题都存在了很长一段时间。它们是众所周知的，并且有众所周知的解决方法。

因此，如果您发布您的要求，那么可以提出建议来解决这些问题，而不是通常的“只使用库X，因为这是其他人使用的”。

Answer 2

通过JQuery。

唯一的情况是，如果我必须在DOM操作和JQuery之间进行选择，那么当我被限制为仅使用DOM时。否则，出于跨浏览器兼容性的原因，我建议查看一个抽象库，如JQuery。

Answer 3

如果你已经在使用jQuery，那么就按照jQuery的方式做事。也就是$(element).attr('name')。跨浏览器兼容性并不是真正的问题;所有浏览器都了解DOM并且大多符合其规范。这里真实的是一致性。你真的不需要养成在这里使用jQuery方式做事的习惯，在那边使用DOM方式，以及在yonder上使用一些半自己的hacky方法。

如果你还没有包含jQuery，我现在不会这样做只是为了得到一个元素的属性。 element.getAttribute('name')应始终有效。 element.name可能适用于重要属性，但请注意，“重要属性”并不包含所有内容！它几乎从不包括诸如“rel”属性之类的小东西，或者任何不是标准HTML的东西......并且属性的值可能与属性的不同，以便对脚本更有用。例如，style属性实际上是一个包含已解析的CSS stles的对象，而不是原始字符串... selected的{{1}}属性实际上是布尔值而不是{{ 1}}或<option>。有时属性和属性甚至有不同的名称！（"selected"属性对应于名为""的属性，其中包含class的任何属性（如果它对应于属性）将更改属性的名称，以便它与JS的标识符命名规则兼容。例如，className变为-。）还有更多类似的问题。如果你真的关心属性，只需使用http-equiv，而你还没有被jQuery的spiff所吸引。

如果您确实关心，例如，是否选中了复选框（即元素的属性，而不是其“checked”属性中的字符串），请使用{{ 1}}或httpEquiv（并且相同的参数适用于jQuery vs vanilla JS）。

Answer 4

如果您正在使用jQuery，请不要使用直接DOM访问，除非jQuery不支持某些内容，这是非常不可能的 - 在这种情况下，向jQuery人员提交补丁或者至少编写自定义jQuery插件将是更好的解决方案

请注意，您在问题中使用的示例并没有做同样的事情：等同于elem.something为$(elem).prop('something'[, newValue])，而等效于$(elem).attr('something'[, newValue])的DOM为elem.getAttribute('something') / elem.setAttribute('something', newValue)。

然而，jQuery的.attr()足够聪明（除了1.6。 0 ）来处理道具和attrs - 但如果你在处理时使用.prop()它会更高效checked或disabled等属性。

本机访问dom对象还是通过jQuery访问？

4 个答案: