HTML DOM Elements
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.
Properties and Methods
The following properties and methods can be used on all HTML elements:
| Property / Method | Description |
|---|---|
| accessKey | Sets or returns the accesskey attribute of an element |
| addEventListener() | Attaches an event handler to an element |
| appendChild() | Adds (appends) a new child node to an element |
| attributes | Returns a NamedNodeMap of an element’s attributes |
| blur() | Removes focus from an element |
| childElementCount | Returns an elements’s number of child elements |
| childNodes | Returns a NodeList of an element’s child nodes |
| children | Returns an HTMLCollection of an element’s child elements |
| classList | Returns the class name(s) of an element |
| className | Sets or returns the value of the class attribute of an element |
| click() | Simulates a mouse-click on an element |
| clientHeight | Returns the height of an element, including padding |
| clientLeft | Returns the width of the left border of an element |
| clientTop | Returns the width of the top border of an element |
| clientWidth | Returns the width of an element, including padding |
| cloneNode() | Clones an element |
| closest() | Searches the DOM tree for the closest element that matches a CSS selector |
| compareDocumentPosition() | Compares the document position of two elements |
| contains() | Returns true if a node is a descendant of a node |
| contentEditable | Sets or returns whether the content of an element is editable or not |
| dir | Sets or returns the value of the dir attribute of an element |
| firstChild | Returns the first child node of an element |
| firstElementChild | Returns the first child element of an element |
| focus() | Gives focus to an element |
| getAttribute() | Returns the value of an element’s attribute |
| getAttributeNode() | Returns an attribute node |
| getBoundingClientRect() | Returns the size of an element and its position relative to the viewport |
| getElementsByClassName() | Returns a collection of child elements with a given class name |
| getElementsByTagName() | Returns a collection of child elements with a given tag name |
| hasAttribute() | Returns true if an element has a given attribute |
| hasAttributes() | Returns true if an element has any attributes |
| hasChildNodes() | Returns true if an element has any child nodes |
| id | Sets or returns the value of the id attribute of an element |
| innerHTML | Sets or returns the content of an element |
| innerText | Sets or returns the text content of a node and its descendants |
| insertAdjacentElement() | Inserts a new HTML element at a position relative to an element |
| insertAdjacentHTML() | Inserts an HTML formatted text at a position relative to an element |
| insertAdjacentText() | Inserts text into a position relative to an element |
| insertBefore() | Inserts a new child node before an existing child node |
| isContentEditable | Returns true if an element’s content is editable |
| isDefaultNamespace() | Returns true if a given namespaceURI is the default |
| isEqualNode() | Checks if two elements are equal |
| isSameNode() | Checks if two elements are the same node |
| isSupported() | Deprecated |
| lang | Sets or returns the value of the lang attribute of an element |
| lastChild | Returns the last child node of an element |
| lastElementChild | Returns the last child element of an element |
| matches() | Returns true if an element is matched by a given CSS selector |
| namespaceURI | Returns the namespace URI of an element |
| nextSibling | Returns the next node at the same node tree level |
| nextElementSibling | Returns the next element at the same node tree level |
| nodeName | Returns the name of a node |
| nodeType | Returns the node type of a node |
| nodeValue | Sets or returns the value of a node |
| normalize() | Joins adjacent text nodes and removes empty text nodes in an element |
| offsetHeight | Returns the height of an element, including padding, border and scrollbar |
| offsetWidth | Returns the width of an element, including padding, border and scrollbar |
| offsetLeft | Returns the horizontal offset position of an element |
| offsetParent | Returns the offset container of an element |
| offsetTop | Returns the vertical offset position of an element |
| outerHTML | Sets or returns the content of an element (including the start tag and the end tag) |
| outerText | Sets or returns the outer text content of a node and its descendants |
| ownerDocument | Returns the root element (document object) for an element |
| parentNode | Returns the parent node of an element |
| parentElement | Returns the parent element node of an element |
| previousSibling | Returns the previous node at the same node tree level |
| previousElementSibling | Returns the previous element at the same node tree level |
| querySelector() | Returns the first child element that matches a CSS selector(s) |
| querySelectorAll() | Returns all child elements that matches a CSS selector(s) |
| remove() | Removes an element from the DOM |
| removeAttribute() | Removes an attribute from an element |
| removeAttributeNode() | Removes an attribute node, and returns the removed node |
| removeChild() | Removes a child node from an element |
| removeEventListener() | Removes an event handler that has been attached with the addEventListener() method |
| replaceChild() | Replaces a child node in an element |
| scrollHeight | Returns the entire height of an element, including padding |
| scrollIntoView() | Scrolls the an element into the visible area of the browser window |
| scrollLeft | Sets or returns the number of pixels an element’s content is scrolled horizontally |
| scrollTop | Sets or returns the number of pixels an element’s content is scrolled vertically |
| scrollWidth | Returns the entire width of an element, including padding |
| setAttribute() | Sets or changes an attribute’s value |
| setAttributeNode() | Sets or changes an attribute node |
| style | Sets or returns the value of the style attribute of an element |
| tabIndex | Sets or returns the value of the tabindex attribute of an element |
| tagName | Returns the tag name of an element |
| textContent | Sets or returns the textual content of a node and its descendants |
| title | Sets or returns the value of the title attribute of an element |
| toString() | Converts an element to a string |
Element: tagName property
The tagName read-only property of the Element interface returns the tag name of the element on which it’s called.
Value
A string indicating the element’s tag name. This string’s capitalization depends on the document type:
- For DOM trees which represent HTML documents, the returned tag name is always in the canonical upper-case form. For example, tagName called on a element returns «DIV» .
- The tag names of elements in an XML DOM tree are returned in the same case in which they’re written in the original XML file. If an XML document includes a tag «» , then the tagName property’s value is «SomeTag» .
For Element objects, the value of tagName is the same as the value of the nodeName property the element object inherits from Node .
Examples
HTML
span id="born">When I was born…span>
JavaScript
const span = document.getElementById("born"); console.log(span.tagName);
In XHTML (or any other XML format), the original case will be maintained, so «span» would be output in case the original tag name was created lowercase. In HTML, «SPAN» would be output instead regardless of the case used while creating the original document.
Specifications
Browser compatibility
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on Apr 7, 2023 by MDN contributors.
Your blueprint for a better internet.
jQuery: Get selected element tag name
Is there an easy way to get a tag name? For example, if I am given $(‘a’) into a function, I want to get ‘a’ .
8 Answers 8
You can call .prop(«tagName») . Examples:
jQuery("").prop("tagName"); //==> "A" jQuery("").prop("tagName"); //==> "H1" jQuery("").prop("tagName"); //==> "COOLTAGNAME999" If writing out .prop(«tagName») is tedious, you can create a custom function like so:
jQuery.fn.tagName = function() < return this.prop("tagName"); >; jQuery("").tagName(); //==> "A" jQuery("").tagName(); //==> "H1" jQuery("").tagName(); //==> "COOLTAGNAME999" Note that tag names are, by convention, returned CAPITALIZED. If you want the returned tag name to be all lowercase, you can edit the custom function like so:
jQuery.fn.tagNameLowerCase = function() < return this.prop("tagName").toLowerCase(); >; jQuery("").tagNameLowerCase(); //==> "a" jQuery("").tagNameLowerCase(); //==> "h1" jQuery("").tagNameLowerCase(); //==> "cooltagname999" Note that the string that’s returned is in CAPITAL LETTERS. This’ll be a gotcha if you’re trying to compare it to «div» or «a» for example.
using toLowerCase() or toUpperCase() may be helpful when comparing prop(‘tagName’) result to a tag name. if($(«my_selector»).prop(«tagName»).toLowerCase() == ‘div’) or if($(«my_selector»).prop(«tagName»).toUpperCase() == ‘DIV’)
Thanks. Works great — although I’ll use the more jQueryish version because I’m in a jQuery world at the moment.
pure JS solutions (like this one) are generally superior to jQuery ones especially if they do not suffer from browser compatibility problems or are much more verbose.
. and specifically because of those browser incompatibility issues, the jQuery ones are often superior if someone is picking a solution and isn’t well-versed in what browser-incompatibilities to watch out for. 😉
I consider this superior because it doesn’t matter what the jQuery version is, this solution works on all versions. +1
particularly if you are in a each()-like situation, where you have to cast the element back to a jquery object to get a property that was already there, like $(this).prop(‘tagname’) . this.nodeName is often more efficient. +1
As of jQuery 1.6 you should now call prop:
jQuery('selector').prop("tagName").toLowerCase() Older versions
jQuery('selector').attr("tagName").toLowerCase() toLowerCase() is not mandatory.
You should NOT use jQuery(‘selector’).attr(«tagName»).toLowerCase() , because it only works in older versions of Jquery.
You could use $(‘selector’).prop(«tagName»).toLowerCase() if you’re certain that you’re using a version of jQuery thats >= version 1.6.
Note :
You may think that EVERYONE is using jQuery 1.10+ or something by now (January 2016), but unfortunately that isn’t really the case. For example, many people today are still using Drupal 7, and every official release of Drupal 7 to this day includes jQuery 1.4.4 by default.
So if do not know for certain if your project will be using jQuery 1.6+, consider using one of the options that work for ALL versions of jQuery :
jQuery('selector')[0].tagName.toLowerCase() jQuery('selector')[0].nodeName.toLowerCase() Get HTML tag name from React element?
The HTML tag name would be span . I know you can look into the type property of the React element, but it gets really difficult between SFC and normal components, and even harder when the component depth is rather large. For example:
@zerkms I have this tree parsing layer in which I need to HTML tag name to properly parse it according to the spec.
3 Answers 3
React Elements are a virtual construct, and they don’t directly represent DOM elements. There are two types of React Elements — «regular» HTML DOM elements, and instantiations of a React Class. The first one has a «type» because it is extremely simple, stateless, and immutable, and is created only to render its corresponding DOM element (but don’t confuse it with the DOM element itself!) An example of this would be
in JSX or React.createElement(«div», null, «Foo») in JS.
However instantiations of a React Class don’t have a «type» because they don’t represent a typical DOM element. When we instantiate a React Class we call it a «Component» to identify it as a single instance of the Class, having a render method, encapsulated state, etc. It’s impossible to retrieve the «type» of a Component because the actual DOM elements that it will render are completely dependent on its internal state and what the render method decides to return. An example of this would be a React Class defined somewhere and then instantiated with or React.createElement(Foo) .
The only way to know what DOM elements a Component is actually rendering is to, well, mount and render it and see what it does. There is no «type» inherent to the component itself. You could conceivably mount a Component, use ref to capture the DOM element as it’s rendered, and then use a callback function to pass this information back to parent(s).
var Child = React.createClass(< render: function() < return .bind(this)> >Oh My! > >); var Parent = React.createClass(< whatElementAmI: function(el) < console.log(el.nodeName); // "DIV" >, render: function() < return /> > >);