TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

HTML.js – Befriend the DOM

169 点作者 smanuel将近 12 年前

24 条评论

jayferd将近 12 年前
<p><pre><code> If multiple elements of the same tag exist, a proper array of elements is returned otherwise an Element is returned. </code></pre> STAHP. Please don&#x27;t make the type of the return value dependent on runtime state. This is exactly why jQuery created its own array-like wrapper (which subclasses Array, fwiw).
评论 #6208366 未加载
评论 #6208969 未加载
评论 #6209324 未加载
sequoia将近 12 年前
If you are making another dom traversal library, you must (imho):<p><pre><code> * Explain why someone should use it over the standard: jQuery * Clearly explain the stance toward browser compatibility (not hand-waving &amp; &quot;oh who uses ie8 anyway?&quot;) * Come up with something better than &quot;It&#x27;s smaller than jQuery!&quot; </code></pre> Without these points hit I don&#x27;t even bother looking at DOM library. :&#x2F;
评论 #6206015 未加载
评论 #6206155 未加载
评论 #6206847 未加载
评论 #6206498 未加载
nadabu将近 12 年前
I appreciate all the attention. Just FYI, i was not ready to start publicizing this, someone randomly found it and started that ball rolling without me. There are a bunch of changes in the pipeline for the near future. (see the github source for what&#x27;s happening)
grey-area将近 12 年前
Download link is currently broken, it should be:<p><a href="https://rawgithub.com/nbubna/HTML/master/dist/HTML.min.js.gz" rel="nofollow">https:&#x2F;&#x2F;rawgithub.com&#x2F;nbubna&#x2F;HTML&#x2F;master&#x2F;dist&#x2F;HTML.min.js.gz</a><p>To those asking why you&#x27;d use this in place of jquery, the only reasons to use it are that it is smaller, vastly simpler, and yet does the things which many people use jquery for with a neat syntax. One of the main attractions for me is that it seems to get out of the way far more than jquery - elements aren&#x27;t wrapped, behaviour is as you&#x27;d expect from the DOM, so you don&#x27;t have to learn a new API just to manipulate objects in the way that you do with jquery.<p>Re speed issues, if you&#x27;re using this enough or on documents where speed of selection is an issue, you could simply optimise the particular selector and just use the DOM to get a speed bump. I&#x27;ve not often seen a case in real-life where this matters though, does anyone have any examples we could look at?<p>If you want to use jquery plugins, cater for IE &lt; 9, or use things like jquery animations or UI obviously you wouldn&#x27;t want to switch.
lhorie将近 12 年前
2 thoughts of the top of my head:<p>1 - is there no equivalent for .closest()? Traversal from relative paths is kind of a big deal for a jQuery-like tool<p>2 - what is the type of `HTML.body.div`? HTMLDivElement or Array? If it depends on your markup, then that&#x27;s a recipe for easy breakage
评论 #6206289 未加载
评论 #6206538 未加载
评论 #6206626 未加载
SimHacker将近 12 年前
Reminds me of the regrettable mistake that was E4X. I used it when developing TomTom Home on xulrunner, and its helpful &quot;blurring&quot; of XML and XMLList was no help at all, a misguided attempt to oversimplify something that just ain&#x27;t that simple. I couldn&#x27;t believe they designed it that way on purpose. It made JavaScript seem more like PHP.<p><a href="http://www.morearty.com/blog/2007/03/13/common-e4x-pitfalls/" rel="nofollow">http:&#x2F;&#x2F;www.morearty.com&#x2F;blog&#x2F;2007&#x2F;03&#x2F;13&#x2F;common-e4x-pitfalls&#x2F;</a><p>5. E4X intentionally blurs the distinction between XML and XMLList<p>When you begin to learn E4X, you learn that there are two main data types, XML and XMLList. That seems simple enough. But then after a while, you start to notice places where it seems like the “wrong” type is being used, or where impossible things are happening.<p>var mydocument = &lt;root&gt; &lt;rabbit name=&quot;Brownster Johansson McGee&quot; &#x2F;&gt; &lt;&#x2F;root&gt;;<p>&#x2F;&#x2F; &#x27;mydocument.rabbit&#x27; means to get a list of ALL &lt;rabbit&gt; &#x2F;&#x2F; nodes, so myPetRabbit must be an XMLList, right? But &#x2F;&#x2F; I&#x27;ll call my variable &#x27;myPetRabbit&#x27;, not &#x27;myPetRabbits&#x27;, &#x2F;&#x2F; because I happen to know that I have only one pet &#x2F;&#x2F; rabbit.<p>var myPetRabbit:XMLList = mydocument.rabbit;<p>&#x2F;&#x2F; What&#x27;s her name? Hey wait a minute, &quot;her&quot; name? &#x2F;&#x2F; Why does this next line work? Isn&#x27;t myPetRabbit an XMLList? &#x2F;&#x2F; What does it mean to get an attribute of a list??<p>trace(myPetRabbit.@name);<p>The reason this works is that E4X intentionally blurs the distinction between XML and XMLList. Any XMLList that contains exactly one element can be treated as if it were an XML. (Furthermore, in this example, even if ‘myPetRabbit’ held a list of more than one node, myPetRabbit.@name is still a legal expression; it simply returns a list of all “name” attribute nodes of all of those elements.)<p>In fact, if you search the E4X spec (PDF) for “blur”, you will find 15 usages of the phrase “… intentionally blurs the distinction between….”<p>For example, another place where this blurring is evident is in the behavior of XMLList.toString(). As the Flex docs say:<p>If the XML object has simple content, toString() returns the string contents of the XML object with the following stripped out: the start tag, attributes, namespace declarations, and end tag.<p>If the XML object has complex content, toString() returns an XML encoded string representing the entire XML object, including the start tag, attributes, namespace declarations, and end tag.<p>So if an XMLList contains &lt;node&gt;hello&lt;&#x2F;node&gt;, then toString() will return &quot;hello&quot;; but if the list contains &lt;node&gt;hello&lt;&#x2F;node&gt;&lt;node&gt;goodbye&lt;&#x2F;node&gt;, then toString() will return &quot;&lt;node&gt;hello&lt;&#x2F;node&gt;&lt;node&gt;goodbye&lt;&#x2F;node&gt;&quot; (not &quot;hellogoodbye&quot;). Presumably this decision was made in an effort to achieve “do what I mean” behavior, where the output would match what developers most often intended; but personally I find it a little confusing. If you really need the full XML version of an XMLList that contains simple content, use toXMLString() instead of toString().
adregan将近 12 年前
Forgive me for my naiveté, but as this library is so small and limited (in focus) and seems to not worry with older browsers, why not use plain old JavaScript?<p>EDIT: I should add—I am legitimately curious. I&#x27;ve only been learning plain JS for the last few months, and I&#x27;m wondering what pitfalls I might uncover.
评论 #6208679 未加载
pothibo将近 12 年前
Does the DOM Traversal performance issue has been solved from voyeur.js?<p>(library this is forked from has documented performance hit: <a href="https://github.com/dunxrion/voyeur.js/issues/20" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dunxrion&#x2F;voyeur.js&#x2F;issues&#x2F;20</a>)
评论 #6206651 未加载
评论 #6205828 未加载
halisaurus将近 12 年前
At first glance, this does seem a little lighter and more elegant for light projects than jQuery. I do see the chains could get long, but they might well match CSS selector chains I already wrote, so it&#x27;s type-heavy but not brain-heavy. It&#x27;s also such a light file that I might prefer it on a one-pager if the interactions are few and simple. That said, any jQuery plugin is lost with this option, so if have to decide against using any&#x2F;all before I begin and if the possibility exists I&#x27;d probably err on the jQuery side.
dccoolgai将近 12 年前
So I guess I&#x27;ll be the first to ask the obvious question. How is this different or better than jQuery?
评论 #6205315 未加载
评论 #6205279 未加载
jdonaldson将近 12 年前
Did the author ever look at d3? It seems to offer the same thing, with the added benefit of being able to bind data to the dom elements. <a href="http://d3js.org/" rel="nofollow">http:&#x2F;&#x2F;d3js.org&#x2F;</a>
评论 #6206993 未加载
CmonDev将近 12 年前
Should be called DOM(.js) instead.
评论 #6205347 未加载
joesb将近 12 年前
Looks like someone rediscovers Prototype.js. jQuery does not extends DOM because it does not work. Library before jQuery choose extending the DOM approach and chaos happens, that&#x27;s why jQuery got popular.<p>In the end the author said &quot;DOM extension is no longer to be feared&quot;. So what&#x27;s the argument when you read the linked article? &quot;Just choose non-conflicting name!&quot; Really? That&#x27;s your suggestion?
Tloewald将近 12 年前
I&#x27;m curious as to why HTML.ify is necessary. Shouldn&#x27;t HTML itself be a function? If passed a string it then that&#x27;s HTML.find and if passed a dom node or one of the weird collections of DOM nodes the native APIs provide then it HTML.ify&#x27;s them.<p>I like the idea if not so much the execution. It needs a partner for smoothing over event handling.
评论 #6208429 未加载
badclient将近 12 年前
Boo at naming libraries by adding .js to otherwise common names. It risks making library building kind of a domain name-like landgrab.
psychometry将近 12 年前
Reminds me of zen-coding: <a href="https://code.google.com/p/zen-coding/" rel="nofollow">https:&#x2F;&#x2F;code.google.com&#x2F;p&#x2F;zen-coding&#x2F;</a><p>zen-coding is designed for use in a text editor, though, and is a quick way of generating a ton of properly-indented, well-formed HTML.
prezjordan将近 12 年前
Pretty cool, but please rethink using that example :) It&#x27;s a little slow and doesn&#x27;t immediately show off your hard work.<p>A few (static) independent sections would do a much better job of promoting yourself.
评论 #6208440 未加载
magoon将近 12 年前
Neat idea, but you&#x27;re going to have to refactor many lines of code each time you wrap elements in a new parent element. In other words, this is a ball &amp; chain for your markup.
评论 #6205607 未加载
catmanjan将近 12 年前
HTML.find(&quot;#element&quot;) is longer than $(&quot;#element&quot;) so I doubt it&#x27;ll catch on
评论 #6205458 未加载
评论 #6205370 未加载
评论 #6205388 未加载
itsbits将近 12 年前
for a second i thought this came up with direct DOM approach...but i found this is just another Jquery type library with different syntax...In this case, good job but i am happy with Jquery or Zepto..
hk__2将近 12 年前
Please stop the demo if I start typing something in the box.
评论 #6206661 未加载
bachback将近 12 年前
great idea. there is so much in jquery, which we can lose. having thin layers on top of the standards is the way to go. what about events?
评论 #6208480 未加载
h3ll0w0rld将近 12 年前
yass.js ftw - <a href="http://yass.webo.in/" rel="nofollow">http:&#x2F;&#x2F;yass.webo.in&#x2F;</a>
camus将近 12 年前
On how much browsers has this stuff been tested ? because that&#x27;s the point of jQuery , you can trash it all you want jQuery has been battle tested on a large number of browsers and plateforms. Other DOM frameworks not so much, that&#x27;s why they fail.
评论 #6206437 未加载
评论 #6205641 未加载