This is the 18th day of my participation in the August Challenge
Element is a very versatile base class that represents HTML’s ability to expose access to Element tag names, nodes, and attributes.
The HTML element
All HTML elements are represented by the HTMLElement type. Briefly, all HTML elements have basic attributes.
- Id: unique identifier.
- Title, which contains information about the element.
- Lang, the language in which attributes specify element content.
- Dir, that’s where we write, (hardly ever)
- ClassName, class property, that’s what we call a class. (This class is not a js class.)
<div id="jackson" title="name" class="myName" dir="ltr" lang="en"> I'm Jackson < / div >let jackson = document.getElementById('jackson');
console.log(jackson.id);
console.log(jackson.title);
console.log(jackson.className);
console.log(jackson.dir);
console.log(jackson.lang);
Copy the code
Retrieve attributes
Each element has zero or more attributes. Let’s say there are three DOM-related methods: getAttribute(),setAttribute(), and removeAttrbute(). These methods primarily manipulate properties.
- The getAttribute() method is mainly used to get the value of an attribute, but it can also get the value of a custom attribute.
<div id="jackson" title="name" abcd="abcd" class="myName" dir="ltr" lang="en"> I'm Jackson < / div >let jackson = document.getElementById('jackson');
console.log(jackson.getAttribute('id'),jackson.getAttribute('abcd'))//jackson abcd
Copy the code
- SetAttribute () sets the value of the attribute. This method takes two parameters, the name of the property to be set and the value of the property. If it does not have one, it is automatically created, and if it does, it is overwritten.
jackson.setAttribute('id'.'bear');
console.log(jackson.getAttribute('id'));//bear
Copy the code
Note: Attribute names set by setAttribute() are automatically lowercase
- RemoveAttrbute () is remove, which removes the entire attribute and value. Normally we can use the remove attribute to set the current item before setting the active TAB.
jackson.removeAttribute('abcd');
console.log(jackson.getAttribute('abcd'));//null
Copy the code
The attributes property
The Attributes attribute contains an instance of NameNodeMap, where each attribute of the element is represented as an ATTR node and stored in the NameNodeMap object. NameNodeMap has four methods.
GetNamedItem (name), returns the node whose nodeName attribute is equal to name
RemoveNamedItem (name) removes the node whose nodeName attribute is name
SetNamedItem (node) adds a node to the list indexed by its nodeName
Item (pos), returns the node at the index position pos
The first three of these are pretty much the same as the get, modify, remove properties that we did above, but we’re mostly going to use the top one.
Copy the code
Create the element
We can create elements using the document.createElement() method. It takes a case insensitive label name for the element we want to create.
let p = document.createElement('p');
p.id = 'myP';
document.body.appendChild(p);
Copy the code
Note: We set these attributes to render to the page using the appendChild() method.