HTML | DOM tabIndex Property

Last Updated : 27 Aug, 2021

The tabIndex property is used to return the value of the tabindex attribute of an element. The tabindex attribute specifies the tab order of an element (It is used when the tab button is used for navigating.)

Syntax:

Returns the tabIndex property:

HTMLElementObject.tabIndex

Set the tabIndex property:

HTMLElementObject.tabIndex = number

Property Values:

number: Define the tabbing order of the element.

Return Values: It returns a numeric value which represents the tab order of an element.
Note: The element will be removed from the tab order if the number is negative.
Example:

html

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>HTML DOM tabIndex Property</title> 
     
    <style> 
        body { 
            text-align:center; 
        } 
        h1 { 
            color:green; 
        } 
        a { 
            text-decoration:none; 
        } 
    </style> 
</head> 
 
<body> 
    <h1>GeeksforGeeks</h1> 
     
    <h2>tabindex attribute</h2> 
     
    <a href="https://ide.geeksforgeeks.org/tryit.php"
            tabindex="2">
        Geeks HTML ide
    </a> 
    <br> 
     
    <a href="https://www.geeksforgeeks.org/"
                tabindex="1"> 
        GeeksforGeeks 
    </a> 
    <br> 
     
    <a href="https://ide.geeksforgeeks.org/"
            tabindex="3"> 
        Geeks ide 
    </a><br>
     
    <button onclick="gfgFun()">Try it</button>
    <p id="gfg"></p>
 
 
 
    <script>
        function gfgFun() {
            var gfgvar = document.getElementsByTagName(
                        "A")[0].tabIndex;
                         
            document.getElementById("gfg").innerHTML
                        = gfgvar;
        }
    </script>
</body>
 
</html>