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:
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.- We can assign anything to an attribute, but it becomes a string. So here we have
"123"as the value. - The
attributescollection is iterable and has all the attributes of the element (standard and non-standard) as objects withnameandvalueproperties.
elem.hasAttribute(name)
Use of:
var result = element.hasAttribute(name);
Example -1
<div id="txt" example="exp"></div>
<script>
var doc = document.getElementById("txt");
var ex = doc.hasAttribute("example")
document.write(ex) // true
</script>Example -2
<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
<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.
<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
<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>
TrueCodes 
Leave a comment