Skip to content
Advertisements

Attributes and properties

Scanners create DOM objects when scanning an HTML document. The HTML attributes are the properties of these objects. For example, the definition of body id =” example ” in DOM is document.body.id.

All elements, tags, and attributes in the HTML document are converted to DOM objects in this way.

Standard attributes are then converted to DOM properties. Non-standard attributes can also be defined in HTML. For example, it is possible to make a definition such as “<body id = “example” box = “inbox”>”. However, these attributes are not converted to DOM properties by the browser.

document.body.example;

this gives us undefined value.

The attribute that is standard for a label may not be the standard for another label. For example, if input type =” text ” is the type for input, the type assigned to the body tag is not the standard.

How do we access non-standard attributes from javascript?


Ready methods are available for this.

  • elem.hasAttribute (name) – check the presence
  • elem.getAttribute (name) – Get the value in the element
  • elem.setAttribute (name, value) – define element value
  • elem.removeAttribute (name) – delete the attribute in the element

Please note:

  1. getAttribute('About') – the first letter is uppercase here, and in HTML it’s all lowercase. But that doesn’t matter: attribute names are case-insensitive.
  2. We can assign anything to an attribute, but it becomes a string. So here we have "123" as the value.
  3. The attributes collection is iterable and has all the attributes of the element (standard and non-standard) as objects with name and value properties.

elem.hasAttribute(name)

Use of:

var result = element.hasAttribute(name);

Example -1

elem.hasAttribute(name)

    <div id="txt" example="exp"></div>

    <script>
        var doc = document.getElementById("txt");
        var ex = doc.hasAttribute("example")
        document.write(ex) // true
        
      
    </script>

Example -2

elem.hasAttribute(name)
    <button onclick="control();">CONTROL</button>

    <script>
        function control() {
            var doc = document.getElementById("txt");
            var ex = doc.hasAttribute("example")
            if (ex = true) {
                document.write("I have the 'example' attribute.")
            } else {
                document.write("I have not the 'example' attribute.")
            }
        }
    </script>

elem.getAttribute (name)

The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or “” (the empty string); see Notes for details.

var attribute = element.getAttribute(attributeName);

Example

elem.getAttribute (name)
<div id="example" Attribute="succes"></div>
    <script>
        var example = document.getElementById("example");
        var gt = example.getAttribute("Attribute");
        alert(gt)
    </script>

elem.setAttribute (name, value)

Use of:

Element.setAttribute(name, value);

Example

createElement –> Creates element.

elem.setAttribute (name, value)
 <input type="button" onclick="addtxt();" value="add text" />
    <input type="button" onclick="addbut();" value="add button" />
    <input type="button" onclick="addbox();" value="add box" />
    <div id="container"></div>

    <script>

        var con = document.getElementById("container");
            
        function addtxt() {
            let txt = document.createElement("input");
            txt.setAttribute("type", "text");
            txt.setAttribute("id", "text");
            txt.setAttribute("placeholder","text place")
            con.appendChild(txt);
        }
        function addbut() {
            let but = document.createElement("input");
            but.setAttribute("type", "button");
            but.setAttribute("type", "button");
            but.setAttribute("id", "butClick");
            but.setAttribute("value", "button");
            con.appendChild(but);
        }
        function addbox() {
            let box = document.createElement("div");
            box.setAttribute("id", "box");
            con.appendChild(box);
        }

    </script>

elem.removeAttribute (name)

The Element method removeAttribute() removes the attribute with the specified name from the element.

element.removeAttribute(attrName);

Example

elem.removeAttribute (name)
<input type="button" onclick="addbox();" value="add box" />
    <input type="button" onclick="delbox();" value="delete box" />
    <div id="container"></div>

    <script>

        var con = document.getElementById("container");

        function addbox() {
            let box = document.createElement("div");
            box.setAttribute("id", "box");
            con.appendChild(box);
        }

        function delbox() {
            let box = document.getElementById("box");
            box.removeAttribute("id")
        }

    </script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: