Learn DOM, BOM & jQuery
最后更新于:2022-04-01 04:12:54
# Learn DOM, BOM, & jQuery
> **DOM** - The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). - wikipedia.org
> **BOM** - The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. Unlike the Document Object Model, there is no standard for implementation and no strict definition, so browser vendors are free to implement the BOM in any way they wish. - wikipedia.org
> **jQuery** - jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License. - wikipedia.org
The ideal path, but certainly the most difficult, would be to first learn JavaScript, then the DOM, then jQuery. However, do what makes sense to your brain. Most front-end developers learn about JavaScript and then DOM by way of first learning jQuery. Whatever path you take, just make sure JavaScript, then DOM, or jQuery don't become a black box.
##### General Learning:
- [The Document Object Model](http://eloquentjavascript.net/13_dom.html) [read]
- [codecademy.com jQuery](https://www.codecademy.com/tracks/jquery) [watch]
- [jQuery Enlightenment](http://jqueryenlightenment.com/) [read]
- [jQuery: Getting Started](http://www.pluralsight.com/courses/jquery-getting-started) [watch][$]
##### Mastering:
- [DOM Enlightenment](http://www.amazon.com/DOM-Enlightenment-Cody-Lindley/dp/1449342841/) [read][$] or [read online for free](http://domenlightenment.com/)
- [Advanced JS Fundamentals to jQuery & Pure DOM Scripting](https://frontendmasters.com/courses/javascript-jquery-dom/) [watch][$]
- [AdvancED DOM Scripting: Dynamic Web Design Techniques](http://www.amazon.com/gp/product/1590598563/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590598563&linkCode=as2&tag=fronenddevejo-20&linkId=VQZU5EQIQQXCF56Y) [read][$]
- [Fixing Common jQuery Bugs](http://www.pluralsight.com/courses/fixing-common-jquery-bugs) [watch][$]
- [jQuery Tips and Tricks](http://www.pluralsight.com/courses/jquery-tips-and-tricks) [watch][$]
- [jQuery-free JavaScript](http://www.pluralsight.com/courses/jquery-free-javascript) [watch][$]
- [Douglas Crockford: An Inconvenient API - The Theory of the DOM](https://www.youtube.com/watch?v=Y2Y0U-2qJMs&list=PL5586336C26BDB324&index=2) [watch]
##### References/docs:
- [MDN Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
- [MDN Event reference](https://developer.mozilla.org/en-US/docs/Web/Events)
- [jQuery Docs](http://api.jquery.com/)
- [MDN Browser Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Window)
- [msdn Document Object Model (DOM)](https://msdn.microsoft.com/en-us/library/hh772384(v=vs.85).aspx)
##### Standards/specifications:
- [W3C DOM4](http://www.w3.org/TR/2014/WD-dom-20140204/)
- [DOM Living Standard](https://dom.spec.whatwg.org/)
- [Document Object Model (DOM) Level 3 Events Specification](http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/)
- [Document Object Model (DOM) Technical Reports](http://www.w3.org/DOM/DOMTR)