本地或通过jQuery访问dom对象？
我发现人们有时以本机方式或通过 jQuery 对象访问 dom 对象。我想了解这方面的最佳实践。
示例
function(element){
$(element).attr('anyattribute');
//Or
element.anyattribute;
}
哪个是首选，为什么？
I see that people accessing dom objects sometimes natively or via jQuery objects. I want to know best practices about it.
Example
function(element){
$(element).attr('anyattribute');
//Or
element.anyattribute;
}
Which is prefered and why ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
为了确定“最佳”，您必须首先提供一些评判标准。如果您只是想访问 DOM 元素并进行少量处理，那么使用任何类型的库都没有多大意义。如果您的需求更复杂，那么您应该发布它们是什么，以便可以提出适合您想要做的事情的建议。
例如，我见过页面中包含一个 4,000 行的库，只是为了验证单个表单控件。无论如何，访问该控件只需要一行代码，那么包含 +90kb 的额外脚本有什么意义呢？
库提供的“跨浏览器兼容性”在很大程度上是由库提供的，但问题越来越少，而且绝大多数存在的问题已经存在相当长一段时间了。它们是众所周知的，并且有众所周知的解决方法。
因此，如果您发布您的需求，那么可以提出建议来解决这些问题，而不是通常的“只使用库 X，因为其他人都使用它”。
In order to determine "best" you must first supply some criteria by which it might be judged. If you simply want to access DOM elements and do a small amount of processing, then it doesn't make much sense to use any kind of library. If your needs are more complex, then you should post what they are so that recommendations can be made that are appropriate for what you are trying to do.
For example, I've seen a 4,000 line library included in a page simply to validate a single form control. Accessing the control only takes one line of code anyway, so what was the point of including +90kb of extra script?
Much is made of "cross browser compatability" provded by libraries, but there are increasingly fewer and fewer issues and the vast majority of those that exist have been around for quite some time. They are well known and have well known work-arounds.
So if you post your requirements, then suggstions can be made to address those concerns rather than the usual "just use library X because that's what everyone else uses".
通过jQuery。
如果我必须在DOM操纵和jQuery之间进行选择，那么唯一的情况是我仅限于使用DOM。否则，出于交叉浏览器的兼容性原因，我建议查看诸如jQuery之类的抽象库。
Via JQuery.
The only situation whereby if i have to choose between DOM manipulation and JQuery is when i am restricted to using only DOM. Otherwise, for cross browser compatibility reasons, i suggest looking at an abstraction library such as JQuery.
如果您使用的是jQuery，则切勿使用Direct Dom访问权限，除非jQuery不支持某些东西，而这种情况极不可能 - 在这种情况下，将补丁提交给JQuery Guys，或者至少编写自定义的jQuery插件将是更好的解决方案。
请注意，您在问题中的示例没有做同样的事情：等效于
elem.something是$（elem）.prop（'sosings'[，newValue]）和。$（elem）.attr（'sosings'[，newValue]）iselem.getAttribute（'sosings'）/elem elem等效> $（elem）.attr（'sosith'[sometse'[，newValue]）elem .setAttribute（'sosings'，newValue）但是，jQuery的
.attr（）足够聪明（在1.6。 0 中除外）来处理这两个道具和attrs-但如果您使用。 （）在处理诸如检查或禁用之类的属性时。If you are using jQuery, never use direct DOM access unless something is not supported by jQuery which is extremely unlikely - and in that case submitting a patch to the jQuery guys or at least writing a custom jQuery plugin would be the better solution.
Note that the examples you have in your questions are not doing the same thing: The equivalent of
elem.somethingis$(elem).prop('something'[, newValue])and the DOM equivalent of$(elem).attr('something'[, newValue])iselem.getAttribute('something')/elem.setAttribute('something', newValue).However, jQuery's
.attr()is smart enough (except in 1.6.0) to handle both props and attrs - but it's more performant if you use.prop()when dealing with properties such ascheckedordisabled.如果您已经在使用 jQuery，那么就按照 jQuery 的方式进行操作。即，
$(element).attr('name')。跨浏览器兼容性并不是真正的问题；所有浏览器都理解 DOM 并且大多符合其规范。这里真正的问题是一致性。你真的不需要养成在这里用 jQuery 方式、在那里用 DOM 方式、在那边用一些半途而废的自己的 hacky 方式做事的习惯。如果您还没有包含 jQuery，我现在不会只是为了获取元素的属性而这样做。
element.getAttribute('name')应该始终有效。element.name可能适用于重要属性，但请注意，“重要属性”并不包括所有内容！它几乎从不包含诸如“rel”属性之类的次要内容，或者任何非标准 HTML 的内容……并且属性的值可能与属性的值不同，以便对脚本更有用。例如，style属性实际上是一个包含解析的CSS stles的对象，而不是原始字符串......以及实际上是一个布尔值，而不是"selected"或""。有时属性和属性甚至有不同的名称！ （class属性对应于一个名为className的属性，以及任何带有-的属性，如果它对应于一个属性的话，将更改属性的名称，以便与 JS 的标识符命名规则兼容，例如，变为httpEquiv。）还有很多类似的问题。如果您确实关心属性，并且还没有被 jQuery 的 spiff 所吸引，那么只需使用 getAttribute 即可。例如，如果您确实关心某个复选框是否被选中（即元素的属性，而不是其“checked”属性中的字符串），请使用
element。 check或$(element).prop('checked')（同样的参数也适用于 jQuery 与 vanilla JS）。If you're already using jQuery, then do things jQuery's way. That is,
$(element).attr('name'). Cross-browser compatibility isn't really an issue with this; all browsers understand the DOM and mostly conform to its specs. The real thing here is consistency. You don't really need to get into the habit of doing stuff the jQuery way here, the DOM way over there, and some half-assed roll-your-own hacky way over yonder.If you haven't included jQuery yet, i wouldn't do it now just to get an element's attribute.
element.getAttribute('name')should always work.element.namewill likely work for the important attributes, but note, "the important attributes" doesn't include everything! It almost never includes minor stuff like the "rel" attributes and such, or anything that's not standard HTML...and the property's value may differ from the attribute's, in order to be more useful to scripts. For example, thestyleproperty is actually an object containing the parsed CSS stles, not a raw string...and theselectedproperty of an<option>is actually a boolean rather than"selected"or"". Sometimes the property and attribute even have different names! (Theclassattribute corresponds to a property calledclassName, and any attribute with a-in it, if it corresponds to a property at all, will have the property's name changed so that it's compatible with JS's identifier naming rules.http-equiv, for example, becomeshttpEquiv.) There's a bunch more gotchas like that. Just usegetAttributeif you actually care about the attribute, and you're not already sucked in by jQuery's spiff.If you actually care about, say, whether a checkbox is checked (that is, the properties of the element, as opposed to the string that's in its "checked" attribute), use
element.checkedor$(element).prop('checked')(and the same arguments apply there about jQuery vs vanilla JS).