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.

  1. Id: unique identifier.
  2. Title, which contains information about the element.
  3. Lang, the language in which attributes specify element content.
  4. Dir, that’s where we write, (hardly ever)
  5. 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.