Skip to main content

Finding HTML Elements

  • Chapter
  • First Online:
Beyond jQuery

Abstract

How many times have you come across a project that uses jQuery simply to perform seemingly trivial element selection? How many times have you written $('#myElement') or $('.myElement')? If you have depended on jQuery for most (or all) of your projects, you may not be aware of the fact that you don’t need jQuery to select elements! This task is fairly straightforward with the help of the plain ‘ole boring web API. Much like jQuery, there are abundant examples (such as this book) that demonstrate how to properly harness the power of the browser to swiftly select any and all elements in your document. None of this is a well-kept secret, but the pervasiveness of jQuery has lead many to believe that the only sane way to find elements is with the help of the almighty dollar sign. Nothing could be further from the truth, and all of this will become clear as you read on.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 39.99
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD 49.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

Notes

  1. 1.

    www.w3.org/TR/REC-html40/cover.html

  2. 2.

    www.w3.org/TR/REC-html40/struct/global.html#adef-id

  3. 3.

    www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-58190037

  4. 4.

    www.w3.org/TR/REC-CSS1/#id-as-selector

  5. 5.

    www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId

  6. 6.

    www.w3.org/TR/selectors-api/#queryselector

  7. 7.

    http://jsperf.com/getelementbyid-vs-queryselector/11

  8. 8.

    www.w3.org/TR/html401/struct/global.html#adef-class

  9. 9.

    www.w3.org/TR/CSS21/syndata.html#characters

  10. 10.

    www.ecma-international.org/ecma-262/5.1/#sec-7.6.1.2

  11. 11.

    www.w3.org/TR/2015/WD-dom-20150428/#dom-document-getelementsbyclassname

  12. 12.

    www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

  13. 13.

    www.w3.org/TR/2007/WD-selectors-api-20071221/#documentselector

  14. 14.

    www.w3.org/TR/REC-CSS1/#class-as-selector

  15. 15.

    www.w3.org/TR/CSS21/selector.html#class-html

  16. 16.

    https://github.com/FineUploader/fine-uploader/blob/5.2.1/client/js/util.js#L107

  17. 17.

    www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt

  18. 18.

    www.w3.org/TR/html5/embedded-content-0.html#the-video-element

  19. 19.

    www.w3.org/TR/html5/embedded-content-0.html#the-audio-element

  20. 20.

    www.w3.org/wiki/WebComponents/

  21. 21.

    www.w3.org/TR/custom-elements/

  22. 22.

    https://github.com/rnicholus/ajax-form

  23. 23.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247

  24. 24.

    www.w3.org/TR/REC-CSS1/#basic-concepts

  25. 25.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document

  26. 26.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614

  27. 27.

    https://jsperf.com/queryselectorall-vs-getelementsbytagname

  28. 28.

    www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/

  29. 29.

    www.w3.org/TR/CSS1/#anchor-pseudo-classes

  30. 30.

    www.w3.org/TR/selectors-api/#privacy

  31. 31.

    www.w3.org/TR/html5/semantics.html#the-html-element

  32. 32.

    www.w3.org/TR/html5/dom.html#the-document-object

  33. 33.

    www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1312295772

  34. 34.

    www.w3.org/TR/DOM-Level-3-Core/core.html#ID-FF21A306

  35. 35.

    http://www.w3.org/TR/CSS21/selector.html#child-selectors

  36. 36.

    www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317

  37. 37.

    www.w3.org/TR/2015/WD-dom-20150428/#node

  38. 38.

    www.w3.org/TR/2015/WD-dom-20150428/#parentnode

  39. 39.

    www.w3.org/TR/2015/WD-dom-20150428/

  40. 40.

    http://www.w3.org/TR/CSS21/selector.html#child-selectors

  41. 41.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247

  42. 42.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html

  43. 43.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247

  44. 44.

    www.w3.org/TR/css3-selectors/#general-sibling-combinators

  45. 45.

    www.w3.org/TR/CSS21/selector.html#adjacent-selectors

  46. 46.

    www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247

  47. 47.

    www.w3.org/TR/ElementTraversal/#attribute-previousElementSibling

  48. 48.

    www.w3.org/TR/ElementTraversal/

  49. 49.

    www.w3.org/TR/ElementTraversal/#attribute-nextElementSibling

  50. 50.

    www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317

  51. 51.

    https://dom.spec.whatwg.org/#dom-element-closestselectors

  52. 52.

    https://dom.spec.whatwg.org

  53. 53.

    https://dom.spec.whatwg.org/#dom-element-matchesselectors

  54. 54.

    www.w3.org/TR/css3-selectors/

  55. 55.

    www.w3.org/TR/css3-selectors/#negation

  56. 56.

    http://jsperf.com/jquery-not-vs-looping-through-results1

  57. 57.

    www.w3.org/TR/REC-CSS1/#grouping

  58. 58.

    http://jsperf.com/jquery-submit-vs-queryselectorall

  59. 59.

    http://jsperf.com/jquery-file-vs-queryselectorall

  60. 60.

    http://jsperf.com/jquery-first-vs-queryselector

  61. 61.

    http://jsperf.com/jquery-select-children-vs-native-replacement

Author information

Authors and Affiliations

Authors

Rights and permissions

Reprints and permissions

Copyright information

© 2016 Ray Nicholus

About this chapter

Cite this chapter

Nicholus, R. (2016). Finding HTML Elements. In: Beyond jQuery. Apress, Berkeley, CA. https://doi.org/10.1007/978-1-4842-2235-5_4

Download citation

Publish with us

Policies and ethics