Javascript this tag name

You can easily select an element in jQuery by its id or class using # (hash) or . (dot) operators. But how will you get the tag name of the selected element. Read on .

Let’s define a sample HTML code which shall be used in the given examples :

Method 1 : Using tagName property of element directly

Select the element using any of the selector (either id or class) and use tagName property of the element to get the tag of that element. Referring the above HTML code, this is how we can get the tag names of both the elements given in it :

$("#textInput").tagName; $(".codippa").tagName;

Output will be :

If there are more than one elements matching the given selector such as when using the class selector most probably more than one element will be fetched. In those cases get the tag of the desired element using the index of element. This can be done using either of the following ways :

Method 2 : Using nodeName property of element

Select the element using any of the selector (either id or class) and use nodeName property of the element to get the tag of that element. Following code gets the tag names of the elements defined in the above HTML :

$("#textInput").nodeName; $(".codippa").nodeName;

Output will be :

If there are more than one elements matching the given selector such as when using the class selector most probably more than one element will be fetched. In those cases get the tag of the desired element using the index of element. This can be done using either of the following ways :

Method 3 : Using tagName property of element through prop method

Select the element whose tag is required using jQuery’s id or class selectors and the call prop method passing in tagName property as :

$("#textInput").prop("tagName"); $(".codippa").prop("tagName");

As before if there are more than one element matching the given selector then select it using index as :

Output will be :

Let’s tweak in :

1. Method 3 should only be applied when the jQuery version being used is 1.6 or greater.
2. All the above methods return tag names in upper case letters. Call toLowerCase() method on the returned value to get the tag names in lower case.

Add some more methods to the above list by commenting below. coDippa .

Share if it’s worth .

Источник

HTML DOM Element tagName

The tagName property returns the tag name of an element.

The tagName property returns the tag name in UPPERCASE.

The tagName property is read-only.

Difference Between tagName and nodeName

The nodeName property also returns the tag name of an element.

The nodeName can also return the tag name of attribute nodes, text nodes, and comment nodes.

See Also:

Syntax

Return Value

Browser Support

element.tagName is a DOM Level 1 (1998) feature.

It is fully supported in all browsers:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Node properties: type, tag and contents

In this chapter we’ll see more into what they are and learn their most used properties.

DOM node classes

Each DOM node belongs to the corresponding built-in class.

The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it.

Here’s the picture, explanations to follow:

• EventTarget – is the root “abstract” class for everything. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later.
• Node – is also an “abstract” class, serving as a base for DOM nodes. It provides the core tree functionality: parentNode , nextSibling , childNodes and so on (they are getters). Objects of Node class are never created. But there are other classes that inherit from it (and so inherit the Node functionality).
• Document, for historical reasons often inherited by HTMLDocument (though the latest spec doesn’t dictate it) – is a document as a whole. The document global object belongs exactly to this class. It serves as an entry point to the DOM.
• CharacterData – an “abstract” class, inherited by:
  • Text – the class corresponding to a text inside elements, e.g. Hello in

    Hello

    .

  • Comment – the class for comments. They are not shown, but each comment becomes a member of DOM.
  • HTMLInputElement – the class for elements,
  • HTMLBodyElement – the class for elements,
  • HTMLAnchorElement – the class for elements,
  • …and so on.

  There are many other tags with their own classes that may have specific properties and methods, while some elements, such as , , do not have any specific properties, so they are instances of HTMLElement class.

  So, the full set of properties and methods of a given node comes as the result of the chain of inheritance.

  For example, let’s consider the DOM object for an element. It belongs to HTMLInputElement class.

  It gets properties and methods as a superposition of (listed in inheritance order):

  • HTMLInputElement – this class provides input-specific properties,
  • HTMLElement – it provides common HTML element methods (and getters/setters),
  • Element – provides generic element methods,
  • Node – provides common DOM node properties,
  • EventTarget – gives the support for events (to be covered),
  • …and finally it inherits from Object , so “plain object” methods like hasOwnProperty are also available.

  To see the DOM node class name, we can recall that an object usually has the constructor property. It references the class constructor, and constructor.name is its name:

  Источник