JavaScript web pages-CSS and DOM, javascript-cssdom

JavaScript web pages-CSS and DOM, javascript-cssdom

Recommended: JavaScript browser-DOM

DOM is an HTML manipulation method that complies with the World Wide Web standards. It provides more manipulation functions than the innerHTML features.

Here are the HTML code and CSS code

<! Doctype html> 
By changing the node's overall style class, className node features achieve dramatic style changes
DOM provides access to element style classes through the className feature of node attributes

alert(document.getElementById(“span1”).className);
You can change the appearance of an element by changing the name of the CSS style class.

Document. getElementById ("span1"). className = "class2"; // Replace the span1 style with the span2 Style
Similarly, we can also use the onmouseover () and onmouseout () events here to control the element style.
<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">
Although CSS is generally used to control this effect, we only pay attention to the application of these tools.

CSS style classes have nothing to do with Javascript classes-they are completely different.
By accessing a single style feature of a node, style node features achieve a small number of style changes
Node Style features provide access to a single Style feature
<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">
Style = "visibility: hidden" indicates element hiding
Webpage elements can be dynamically displayed or hidden using the visibility Style Features of element objects (display: none/display: block can also hide and display elements)
DOM can create any HTML element at will, including text paragraphs
Document. createElement () is used to create an HTML Tag. The parameter is the tag name.

Document. createElement ("p") creates a p tag

Document. createTextNode () is used to create text paragraphs. The parameter is text content.

Var pElem = document. createElement ("p"); // create a P tag

PElem. appendChild (document. createTextNode ("Hello WeAreZero !")); // Add the child element text for the P tag

Document. getElementById ("span1"). appendChild (pElem); // Add the P tag and Its subelements to the span1 tag.
Appendix:
Using the createElement () method of the document Object, you can create any HTML element.

To add text content to an element, you must create a text content sub-element and attach it to the element.

By carefully adding and removing nodes on the DOM tree, webpages can be freely disassembled and reorganized.
This is the introduction of JavaScript web pages-CSS and DOM. I hope it will be helpful to you!
Articles you may be interested in:

 

 
  
Use pure JS to select DOM Based on CSS class
 
  
Influence of JS, CSS, and img on DOMContentLoaded events