Get element’s tagname using DOM’s tagName property

A couple of weeks ago I posted how can you get an element’s tagname using jQuery’s .prop() method. A simpler alternative could be the below code :

See the Pen Get element’s tagname using DOM’s tagName property by John Tsevdos (@tsevdos) on CodePen

The .get() method (don’t confuse this method with the jQuery’s AJAX .get(), they are completely different) retrieves the DOM element and then we simply get it’s tagName property (and convert it to lowercase). We can even retrieve the DOM element from a jQuery array using the below syntax (without the .get() method) and have the exact same result.

See the Pen Get element’s tagname using DOM’s tagName property by John Tsevdos (@tsevdos) on CodePen

I believe that the above method is easier and faster than the previous one.

jQuery element’s tag name

Getting the selected element’s tag name is very easy in jQuery. Just use the below code.

See the Pen jQuery element’s tag name by John Tsevdos (@tsevdos) on CodePen

Keep in mind that by default the returned tag’s name is capitalized so if you want it lowercase you’ll need this :

See the Pen jQuery element’s tag name by John Tsevdos (@tsevdos) on CodePen

Base tag : Learn how to use it

Every now and then a friend/colleague of mine asks me to have a look at his latest masterpiece (aka site). In many cases the second request is to have a look at why a specific client side feature is not working. Most of the time, I’m given a URL of the live version of the site that uses many internal and external resources (css files, javascript files etc). As you can imagine, it’s super time-consuming to recreate the online page locally to start working on it (downloading and linking all these files).

But don’t worry, the base tag can save us from this hard task, and help up recreate the online page locally within two simple steps.

  1. Copy and paste the markup from the online page in a local file (.html)
  2. Use the base tag to link all the dependencies/resources (you must place it into the head section of the page) to that html file

See the Pen Base tag : Learn how to use it by John Tsevdos (@tsevdos) on CodePen

You’ll end up with a fully functional web-page that uses exactly all the online resources. Now you can either start adding your code to it, or simply download specific files that need re-factoring. Easy and clean, don’t you think?