How to get only one element by class name with JavaScript?

by

document.getElementsByClassName('className') would always return multiple elements because conceptually Classes are meant to be applied to multiple elements. If you want only the first element in the DOM with that class, you can select the first element out of the array-like HTMLCollection returned.

var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];

Else, if you really want to select only one element. Then you need to use ‘id’ as conceptually it is used as an identifier for unique elements in a Web Page.

// HTML
<div id="myElement"></div>

// JS
var requiredElement = document.getElementById('myElement');

More Related Contents:

  1. How to hide css and js version details from weppalyzer in PHP
  2. Absolute Beginner, Visual Studio Terminal
  3. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  4. How to reset a form using jQuery with .reset() method
  5. Programmatically open new pages on Tabs
  6. How to get objects value if its name contains dots?
  7. Format date with Moment.js
  8. How to find the array index with a value?
  9. Javascript when to use prototypes
  10. How do I pass JSF managed bean properties to a JavaScript function?
  11. Passing regex modifier options to RegExp object
  12. How do I auto-submit an upload form when a file is selected?
  13. jQuery – Can threads/asynchronous be done?
  14. Firestore conditional where clause using Modular SDK v9
  15. Bootstrap 4 multiselect dropdown
  16. Where to put model data and behaviour? [tl; dr; Use Services]
  17. Content-Security-Policy error in google chrome extension making
  18. Add text label to d3 node in Force layout
  19. Can a js script get a variable written in a EJS context/page within the same file
  20. What is the in-place alternative to Array.prototype.filter()
  21. ‘this’ keyword, not clear
  22. Parse the JavaScript returned from BeautifulSoup
  23. Accessing line number in V8 JavaScript (Chrome & Node.js)
  24. How to do page numbering in header/footer htmls with wkhtmltopdf?
  25. showing progressbar progress with ajax request
  26. How browser executes Javascript and renders asynchronously
  27. Reload an IFRAME without adding to the history
  28. Record voice from IPhone using HTML5
  29. How to add a onclick event to an element using javascript
  30. window.event.keyCode how to do it on Firefox? [duplicate]

Leave a Comment