DHTML

The HTML elements

 <div id="mydiv" 
style="width:80px;height:80px; border:1px solid red;
text-align: center;"
onclick="alert(document.getElementById('mydiv').innerHTML);">
<p>lalala</p>
</div>

lalala

The Element interface is base for all elements of document. There are more specific interfaces like HTMLElement, SVGElement and etc.

properties

property description
id The identifier of an element.
attributes Collection of attributes assigned to element. 
var attrs = document.getElementById('mydiv').attributes;
for(var i =  0; i < attrs.length; i++) {
         console.log (`${i}: ${attrs[i].name} = ${attrs[i].value}`);
    }
className Value of class attribute, in other words the class or space-separated classes of the current element.
classList Collection of classes of the current element. This is a convenient alternative to className.
innerHTML An HTML fragment representing the inner content of an element.
outerHTML An HTML fragment representing the element itself with inner content.
tagName An uppercase name of the element's tag. For example, for element <div> value will be DIV.

methods

method description
getAttribute(name) Returns the value of attribute with a specified name. If attribute not exists returns null or empty string. Parameter name must be lowercase.
getAttributeNS(ns, name) Returns the value of attribute with a specified namespace and name. If attribute not exists returns null or empty string. Parameter name must be lowercase.
setAttribute(name, value) Sets the value of attribute with a specified name.
setAttributeNS(ns, name, value) Sets the value of attribute with the specified namespace and name.
removeAttribute(name) Removes attribute with a specified name. Parameter name must be lowercase.
removeAttributeNS(ns, name) Removes attribute with a specified name. Parameter name must be lowercase.
getAttributeNames() Returns a js array of attributes of element.
hasAttribute(name) Returns a true value if element has attribute with the specified name.
hasAttributeNS(ns, name) Returns a true value if element has attribute with the specified namespace and name.
toggleAttribute(name [, force]) Toggles a Boolean attribute.
hasAttributes() Returns a true value if element has any attribute.
querySelector(cssSel) Returns the first descendant element that matches the specified group of selectors.
querySelectorAll(cssSel) Returns non-live collection (NodeList) of all descendant elements that match the specified group of selectors.