1, DOM operation classification

DOM operations fall into three categories:

• DOM Core: any programming language that supports DOM can use it, such as getElementById()
• HTML-DOM: used to process HTML documents, such as document forms
• CSS-DOM: used to operate CSS, such as element style. color=“green”

Tips:
JavaScript is used to manipulate (x)html documents. It supports all three types of DOM operations

2, DOM operations in jQuery

jQuery encapsulates DOM operations in JavaScript
DOM operations in jQuery:

• Style operation
• Content and Value operation
• Node operation
• Node attribute operation
• Node traversal
• CSS-DOM operation

Tips:
"Element" and "node" have similar meanings, and this chapter does not strictly distinguish them

1. Style operation

Set and get style values

css(name,value);	//Set individual properties
css({name:value,name:value,name:value...});	//Set multiple properties at the same time
css(name)	//Get property value

Append and remove styles

• Append style

$(selector).addClass(class);
$(selector).addClass(class1,class2...classN);

• Remove style

$(selector).removeClass("class");
$(selector).removeClass("class1,class2...classN");

Toggle style

• toggleClass()
  The process of style switching between addClass() and removeClass() is simulated

$(selector).toggleClass(class);

Determine whether the specified style is included

• hasClass() method to determine whether the specified style is included

$(selector).hasClass(class);

2. Content operation

• HTML code operation
• Label content operation
• Attribute value operation

HTML code operation

• html() can operate on HTML code, similar to innerHTML in JS

$("div.left").html();//Get the html code in the element
$("div.left").html("<div class='content'>...</div>");//Set the html code in the element

Label content operation

• text() can pass or set the text content of the element

$("div.left").text();//Gets the text content in the element
$("div.left").text("<div class='content'>...</div>");//Set the text content in the element

The difference between html() and text() methods

Attribute value operation

• The past value of the value () or value () attribute of the element can be set

$(this).val();//Gets the value of the value attribute of the element
$(this).val(value);//Set the value of the value attribute of the element

3. Node operation

• Find node
• Create node
• Insert node
• Delete node
• Replace node
• Replication node

Create node element

The factory function $() is used to get or create nodes

• $(selector): get node through selector
• $(element): convert DOM node into jQuery node
• $(html): creates a jQuery node using an HTML string

Insert node

• Insert child node inside element
• Insert peer node outside element
  

Delete node

jQuery provides three ways to delete nodes

• remove(): deletes the entire node
• empty(): empty node contents
• detach(): delete the entire node and retain the binding event and additional data of the element

Replace node

replaceWith() and replaceAll() are used to replace a node
The relationship between the two is similar to append() and appendTo()

Replication node

clone() is used to copy a node

$(selector).clone([includeEvents]);
//[includeEvents]: parameter true or flash, true copies event processing, and vice versa when flash

4. Attribute operation

• Get and set element attributes
• Delete element attribute

Get and set element attributes

attr() is used to get and set element attributes

$(selector).attr([name]);//Get property value
$(selector).attr({[name1:value1]...[nameN:valueN]});//Set values for multiple properties

Delete element attribute

removeAttr() is used to delete element attributes

$(selector).removeAttr(name);

5. Node traversal

• Traversal of child elements
• Traverse peer elements
• Traversal of predecessor elements
• Other traversal methods

Traversal of child elements

The children() method can be used to get all the child elements of the element
Gets the child element of the element, but does not contain the child element of the child element

$(selector).children([expr]);

Traverse peer elements

jQuery can obtain all peer elements immediately after, immediately before, and before and after the element

Traverse predecessor elements

• parent(): get the parent element of the element
• parents(): the ancestor element of the element

Other traversal methods

• each(): Specifies the function to run for each matching element

$(selector).each(function(index,element));
//index: location of selector
//Element: current element

• end(): ends the recent filtering operation in the current chain and restores the matching element set to its previous state

6. CSS-DOM operation

In addition to css(), there are also style operation methods for obtaining and setting element height, width, etc