HTML - DOM Attribute specified Property

Quiz

HTML DOM attribute specified property is used to check that the mentioned attribute is specified or not. If the mentioned attribute is specified it will return true else will throw an error.

Syntax

attribute.specified

Return value

The `specified` property returns true if the attribute is mentioned in that tag, otherwise program stops running.

Examples of HTML DOM Attribute 'specified' Property

Below examples illustrating how to use the `specified` property in JavaScript and HTML.

Check if the onclick attribute is specified

The following code demonstrates the usage of the `specified` attribute to check if an attribute of an HTML element is explicitly specified.

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Attribute specified Property</title>
</head>

<body>
    <h3>HTML DOM Attribute specified Property</h3>
    <div id="Div" 
         style="background-color:blue;height:50px"
         onclick="">
    </div>
    <p>Is the onclick attribute specified?</p>
    <p id="par"></p>
    <script>
        document.getElementById("par").innerHTML =
        document.getElementById("Div").getAttributeNode("onclick").specified;
    </script>
</body>

</html>

Crash the program when attribute not mentioned

The following code shows what will happen when we try to check presence of an attribute that is not present. It crashes after showing two results.

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Attribute specified Property</title>
</head>

<body>
    <h3>HTML DOM Attribute specified Property</h3>
    <div id="TestDiv"
             style="background-color:red;height:50px"
             onclick="">
    </div>
    <p>
        Are the following attributes specified for 
        the element?
    </p>
    <p id="onclickResult"></p>
    <p id="idResult"></p>
    <p id="classResult"></p>
    <p id="styleResult"></p>
    <script>
        var element = document.getElementById("TestDiv");

        // Check if the 'onclick' attribute is specified
        document.getElementById("onclickResult").innerHTML
        = "onclick: " + 
        element.getAttributeNode("onclick").specified;

        // Check if the 'id' attribute is specified
        document.getElementById("idResult").innerHTML
        = "id: " + 
        element.getAttributeNode("id").specified;

        // Check if the 'class' attribute is specified
        // We didnt mentioned class attribute for div 
        // tag, hence program crashes here, you can't.
        // see result of class and style attributes.
        document.getElementById("classResult").innerHTML
        = "class: " + 
        element.getAttributeNode("class").specified;

        // Check if the 'style' attribute is specified
        document.getElementById("styleResult").innerHTML
        = "style: " + 
        element.getAttributeNode("style").specified;
    </script>
</body>

</html>

Handle the program crashing

Here we will see how to handle program crash. We will check if the attribute exists before trying to access the specified property using ternary operator.

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Attribute specified Property</title>
</head>

<body>
    <h3>HTML DOM Attribute specified Property</h3>
    <div id="TestDiv"
             style="background-color:red;height:50px"
             onclick="">
    </div>
    <p>
        Are the following attributes specified for 
        the element?
    </p>
    <p id="onclickResult"></p>
    <p id="idResult"></p>
    <p id="classResult"></p>
    <p id="styleResult"></p>
    <script>
        var element = document.getElementById("TestDiv");

        // Check if the 'onclick' attribute is specified
        var onclickAttr = element.getAttributeNode("onclick");
        document.getElementById("onclickResult").innerHTML
        = "onclick: " + (onclickAttr ? onclickAttr.specified : false);

        // Check if the 'id' attribute is specified
        var idAttr = element.getAttributeNode("id");
        document.getElementById("idResult").innerHTML
        = "id: " + (idAttr ? idAttr.specified : false);

        // Check if the 'class' attribute is specified
        var classAttr = element.getAttributeNode("class");
        document.getElementById("classResult").innerHTML
        = "class: " + (classAttr ? classAttr.specified : false);

        // Check if the 'style' attribute is specified
        var styleAttr = element.getAttributeNode("style");
        document.getElementById("styleResult").innerHTML
        = "style: " + (styleAttr ? styleAttr.specified : false);
    </script>
</body>

</html>

Supported Browsers

Property
specified	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page