The attribute method of element object in the DOM of JS base _javascript skills

In the HTML DOM (Document Object model), each part is a node.

A node is the most basic constituent element of a DOM structure, and each HTML tag is a node of the DOM structure.

A document is a document node.

All HTML elements are element nodes

All HTML attributes are attribute nodes

Text inserted into HTML element is a text node

Comments are annotation nodes.

The most basic node type is nodal type, all other types are inherited from node,dom operations are often the most expensive part of JS, so nodelist caused the most problems. Note: nodelist is ' dynamic ', that is, every time you access the NodeList object, you run the query, which adds overhead, but ensures that our newly added nodes are accessible in nodelist.

All element nodes have shared properties and methods, let's take a look at them in more detail:

First look at the more common common properties

1 Element.id Sets or returns the ID of the element.

2 element.innerhtml Sets or returns the contents of the element, which can contain the child tags in the node and the contents

3 Element.innertext Sets or returns the contents of the element, does not contain the child tags in the node and the content

4 Element.classname Sets or returns the class name of the element

5 Element.nodename Returns the capital letter sign of the node

6 Element.nodetype Returns the node type, 1 indicates that the element node 2 represents the attribute node ...

7 Element.nodevalue Returns the value of the node, which is null for the element node

8 Element.childnodes Returns the Nodeslist object of the child node of the element, NodeList is similar to an array, has the length property, and can use square brackets [index] to access the value of the specified index (or use the item (index) method). But NodeList is not an array.

9 Element.firstchild/element.lastchild Returns the first/last child node of the element (containing the annotation node and the text node)

Ten Element.parentnode returns the parent of the node

One element.previoussibling returns the previous node at the same sibling as the current node (contains annotation nodes and text nodes)

Element.nextsibling returns the next node to the same sibling as the current node (contains annotation nodes and text nodes)

Element.chileelementcount: Returns the number of child elements (excluding text nodes and annotation nodes)

Element.firstelementchild/lastelementchild returns the first/last child element (excluding text nodes and annotation nodes)

Element.previouselementsibling/nextelementsibling returns the previous/last sibling element (excluding text nodes and annotation nodes)

Element.clientheight/clientwidth returns the visual height/width of the content (excluding borders, margins, or scroll bars)

Element.offsetheight/offsetwidth/offsetleft/offset/top returns the height/width of the element/relative to the parent element's left offset/right offset (including borders and padding, excluding margins)

Element.style Sets or returns the style properties of the element. Example: Element.style.backgroundColor Note that unlike CSS, style attributes are stripped of the bars and the first letter of the second word is capitalized

Element.tagname returns the label name of the element (uppercase)

<! DOCTYPE html>  

Browser Display results:

There are some proprietary attributes

Exclusive attributes are those attributes that are specific to a label. For example <a> tags, there are href and target attributes. has SRC attribute; <form> has entype and action attributes ...

A_element.href returns the hyperlink that the current node points to

Take a look at the more common common methods:

<! DOCTYPE html>
 
 

2 Element.getattribute (para) returns the specified property value of the element node.

JS Demo Code:

var A=document.getelementbyid (' First_form ');
Console.log (A.getattribute (' name '))      //console output name value

3 Element.getattributenode (para) returns the specified property node.

JS Demo Code:

var A=document.getelementbyid (' First_form ');
Console.log (A.getattributenode (' name '))      //console output name attribute node

4 Element.getelementsbytagname (para) returns a collection of all child elements that have the specified label name.

JS Demo Code:

var A=document.getelementbyid (' First_form ');
Console.log (a.getelementsbytagname (' input '))      //console output

5 Element.hasattribute (para) returns true if the element has the specified property, otherwise it returns false.

JS Demo Code:

var A=document.getelementbyid (' First_form ');
Console.log (A.hasattribute (' name '))      //console output

6 Element.insertbefore (insertnode,appointednode) inserts a new node before the specified child node.

JS Demo Code:

var A=document.getelementbyid (' First_form ');
    var inputlist=document.getelementsbytagname (' input ');
    var newnode=document.createelement (' input ');
    var newnode2=document.createtextnode (' Pegasus Meteor Fist ');
    var br=document.createelement (' BR ');
    Newnode.type= ' Radio ';
    Newnode.name= ' GONGFA ';
    Newnode.value= ' Tmlxq ';
    A.insertbefore (newnode,inputlist[2]);
    A.insertbefore (Newnode2,inputlist[3]);
    A.insertbefore (Br,inputlist[3]);

7 Element.removeattribute () removes the specified attribute from the element.

JS Sample code:

var A=document.getelementbyid (' First_form ');
A.removeattribute (' name ');
Console.log (A.hasattribute (' name '))

8 element.removechild () removes child nodes from the element. The removed node, although not in the document tree, is still in memory and can be referenced at any time.

JS Sample code:

var A=document.getelementbyid (' First_form ');
    A.removechild (A.childnodes[3]);

9 element.replacechild (newnode,replacenode) replaces the specified node with the new node.

Element.setattribute (Attrname,attrvalue) Sets or changes the specified property to the specified value.

JS Sample code:

var A=document.getelementbyid (' First_form ');
    A.setattribute (' name ', ' Shaolinsi ');
    Console.log (A.name)

One Element.setattributenode () modify the specified attribute node

JS Sample code:

var A=document.getelementbyid (' First_form ');
    var attr = document.createattribute (' id ');
    Attr.value= ' The_first ';
    A.setattributenode (attr);
Console.log (a.id)  

Nodelist.item () returns the node in the nodelist that is located at the specified subscript.

JS Sample code:

var a=document.getelementsbytagname (' input ')
Console.log (A.item (2))

The above is a small series of JS based on the elements of the DOM element object in the property method of all content, I hope that we support cloud-Habitat Community ~