JavaScript common DOM manipulation methods and functions

find node
ocument.queryselector (selectors) Takes a CSS selector as a parameter, returning the first element node that matches the selector.
document.queryselectorall (selectors)//accepts a CSS selector as a parameter, returning all element nodes that match the selector.
document.getelementsbytagname (tagName)//Returns all elements of the specified HTML tag
Span style= "font-size:18px" >document.getelementsbyclassname (className)//Returns an element that includes all class names that match the specified criteria
document.getelementbyid (ID)//Returns the element node that matches the specified ID attribute.
document.getelementsbyname (name)//is used to select HTML elements that have the name attribute (such as <form>, <radio>, , <frame>, <embed>, and
<object> And so on)

Build node
Document.createelement (TagName)//used to generate HTML element nodes.
document.createTextNode (text)//used to generate text nodes
Document.createattribute (name)//generates a new Property object node and returns it.
Document.createdocumentfragment ()//Generate a DocumentFragment object

attribute of element node
Element.attributes//Returns all attribute nodes of the current element node
Element.id//Returns the id attribute of the specified element, which can be read and written
Element.tagname//Returns the uppercase label name of the specified element
element.innerhtml//Returns the HTML code that the element contains, which can be read and written
element.outerhtml//Returns all the HTML code for the specified element node, including its own and all child elements contained in it, to read and write
Element.classname//Returns the Class property of the current element, which can be read and written
Element.classlist//Returns all class collections of the current element node
Element.dataset//Returns all the data-* properties in the element node.
Element.clientheight//Returns the height of the visible part of the element node
Element.clientwidth//Returns the width of the visible part of the element node
Element.clientleft//Returns the width of the left border of the element node
Element.clienttop//Returns the width of the top border of the element node
Element.scrollheight//Returns the total height of the element node
Element.scrollwidth//Returns the total width of the element node
Element.scrollleft//Returns the number of pixels that the horizontal scrollbar of the element node scrolls to the right, by setting this property to change the element's scroll position
Element.scrolltop//Returns the pixel value of the vertical scroll down of the element node
Element.offsetheight//Returns the vertical height of the element (including border,padding)
Element.offsetwidth//Returns the horizontal width of the element (including border,padding)
Element.offsetleft//Returns the vertical offset of the upper-left corner of the current element relative to the Element.offsetparent node
element.offsettop//Return to horizontal displacement
Element.style//Returns the inline style of the element node
Element.children//Includes all child elements of the current element node
Element.childelementcount//Returns the number of child HTML element nodes that the current element node contains
Element.firstelementchild//Returns the first Element child node of the current node
Element.lastelementchild//Returns the last Element child node of the current node
element.nextelementsibling//Returns the next sibling HTML element node of the current element node
element.previouselementsibling//Returns the previous sibling HTML node of the current element node
element.offsetparent//Returns the closest of the current element node, and the Position property of the CSS is not equal to the static parent element.
Node Properties
node.nodename//Return node name, read-only
node.nodetype//Return constant value of the node type, read-only
Node.nodevalue//Returns the text value of the text or comment node, read-only
node.textcontent//Returns the text content of the current node and all its descendant nodes, readable and writable
Node.baseuri//Returns the absolute path of the current page
node.ownerdocument//Returns the top-level document object on which the current node is located
node.nextsibling//Returns the first sibling node immediately following the current node
node.previoussibling//returns one of the closest sibling nodes in front of the current node
Node.parentnode//Returns the parent node of the current node
node.parentelement//Returns the parent element node of the current node
Node.childnodes//Returns all child nodes of the current node
Node.firstchild//Returns the first child node of the current node
Node.lastchild//Returns the last child node of the current node
//parentnode Interface
Node.children//Returns all element child nodes of the specified node
Node.firstelementchild//Returns the first element child node of the current node
Node.lastelementchild//Returns the last element child node of the current node
Node.childelementcount//Returns the number of all element child nodes of the current node.

Build node
Document.createevent (type)//generates an event object that can be used by the Element.dispatchevent () method
Document.addeventlistener (type,listener,capture)//Register Event
Document.removeeventlistener (type,listener,capture)//Logoff event
Document.dispatchevent (Event)//Trigger Event

Properties
Element.getattribute (): Read the specified property
Element.setattribute (): Sets the specified property
Element.hasattribute (): Returns a Boolean value that indicates whether the current element node has a specified property
Element.removeattribute (): Remove the specified property

Operation
node.appendchild (node)//Add the last child node to the node
node.haschildnodes ()//Returns a Boolean value indicating whether the current node has child nodes
Node.clonenode (TRUE);//default = False (Clone node), True (clone node and its attributes, and descendants)
Node.insertbefore (Newnode,oldnode)//Insert a new child node before specifying a child node
node.removechild (node)//Delete node, action on parent node to delete node
Node.replacechild (newchild,oldchild)//Replace node
node.contains (node)//Returns a Boolean value that indicates whether the parameter node is the descendant node of the current node.
node.comparedocumentposition (node)//Returns a binary value of 7 bits representing the relationship between the parameter node and the current node
Node.isequalnode (NOE)//Returns a Boolean value that checks whether two nodes are equal. The so-called equal node, refers to the two nodes of the same type, the same attributes, the same child nodes.
node.normalize ()//is used to clean up all text nodes inside the current node. It removes empty text nodes and merges adjacent text nodes into one.

Childnode interface
Node.remove ()//To delete the current node
Node.before ()//
Node.after ()
Node.replacewith ()

Event Method
document.createevent (type)//generates an event object that can be used by the Element.dispatchevent () method
Document.addeventlistener (type,listener,capture)//Register event
Document.removeeventlistener (type,listener,capture)//Logoff event
document.dispatchevent (Event)//Trigger event

Array
a.valueof ()//returns the array itself
a.tostring ()//returns the string form of the array
A.push (Value,vlaue ...)//used to add one or more elements at the end of the array and returns the length of the array after adding the new element.
pop ()//used to delete the last element of the array and return the element
join ()//takes a parameter as a delimiter to return all array members to a string. If no arguments are supplied, the default is separated by commas.
concat ()//for merging multiple arrays. It adds the members of the new array to the end of the original array, and then returns a new array, unchanged from the original array.
shift ()//is used to delete the first element of the array and return the element.
unshift (value)//is used to add an element at the first position of the array and returns the length of the array after the new element is added.
reverse ()//To reverse the order of the elements in the array, returning the changed array
Slice (start_index, upto_index);//used to extract part of the original array, return a new array, the original array unchanged. The first argument is the starting position (starting at 0), the second argument is the terminating position
(but the elements of the location are not included in the itself). If the second argument is omitted, it is returned to the last member of the original array. A negative number indicates the penultimate part.
Splice (index, Count_to_remove, AddElement1, AddElement2, ...);//used to delete part of a member of the original array and can be added to the new array member at the deleted location, returning
the value is the element that is being deleted. The first parameter is the starting position of the deletion, and the second parameter is the number of elements to be deleted. If there are more arguments later, it means that these are the new elements to be inserted into the array.
Sort ()//The array member is sorted by default in dictionary order. After sorting, the original array will be changed. If you want the sort method to be sorted in a custom way, you can pass in a function as a parameter
, which means sorting by custom method. The function itself accepts two parameters, representing two elements for comparison. If the return value is greater than 0, the first element is ranked after the second element;
case, the first element is preceded by the second element.
map ()///All members of an array call a function in turn, returning a new array based on the result of the function.
The map (Elem,index,arr)//map method takes a function as a parameter. When the function is called, the map method passes it to three parameters, namely the current member, the current position, and the array itself.
ForEach ()//iterates through all the members of an array, performs some action, and the argument is a function. It accepts three parameters, the value of the current position, the number of the current position, and the entire array.

string
var s = new String ()
S.chatat (Index)//returns the character at the specified position
S.fromcharcode ()//The parameter of the method is a series of Unicode code points that return the corresponding string.
s.charcodeat (Index)//returns the Unicode code point for the given position character (in decimal notation)
s.concat (S2)//For connection of two strings
S.slice (start,end)//used to remove substrings from the original string and return without changing the original string. The first argument is the beginning of the substring, and the second argument is the end position of the substring (not
including the location). If the argument is a negative value, it represents the position at which the inverse is calculated from the end, that is, the negative value plus the string length.
s.substring (start,end)//used to remove substrings from the original string and return without changing the original string. The first parameter represents the start position of the substring, and the second position represents the end position.
s.substr (start,length)//used to remove substrings from the original string and return without changing the original string. The first argument is the starting position of the substring, and the second argument is the length of the substring. As
The first argument is a negative number that represents the character position of the reciprocal calculation. If the second argument is a negative number, it is automatically converted to 0, so an empty string is returned.
S.indexof (s)//returns the position of the first occurrence of the given element in the string, or 1 if it does not appear. Can accept the second parameter, which indicates where the search begins
s.lastindexof ()//returns the position of the last occurrence of the given element in the string, or 1 if it does not appear.
S.trim ()//for removing spaces at both ends of a string, returning a new string
s.tolowercase ()//is used to convert a string to lowercase, returning a new string without changing the original string.
s.touppercase ()//full capitalization
s.localecompare (S2)//For comparison of two strings. It returns an integer, if less than 0, that indicates that the first string is less than the second string, and if it equals 0, that the two are equal;
0, which indicates that the first string is greater than the second string.
S.match (regexp)//is used to determine whether the original string matches a substring, returns an array, and the member is the first string to match. If no match is found, NULL is returned.
The S.search ()//return value is the first position to match. If no match is found, 1 is returned.
s.replace (Oldvalue,newvalue)//is used to replace a matched substring, typically only the first match is replaced (unless a regular expression with the G modifier is used).
s.split ()//splits a string by the given rule, returning an array of separated substrings. You can also pass in the second parameter, which determines the number of members that return the array.

Console Object
Console.log (text,text2,...)//used to output information in the console window. It can accept multiple parameters and concatenate their results to output. If the first argument is a format string (using the grid
Placeholder ), the Console.log method replaces the placeholder with the following parameter, followed by the output.
console.info ()///output information in the console window, plus a blue icon in front of the output information.
console.debug ()///output information in the console window, plus a blue icon in front of the output information.
Console.warn ()//output information, in front of a yellow triangle, indicating a warning;
console.error ()//output information, with a red fork at the top, indicating an error, and displaying the stack of errors occurring
console.table ()//can convert data of composite type to table display.
Console.count ()//used to count, output how many times it was called.
Console.dir ()//is used to inspect an object (inspect) and display it in a format that is easy to read and print.
console.dirxml ()//For displaying DOM nodes in the form of a directory tree.
Console.assert ()//accepts two parameters, the first argument is an expression, and the second argument is a string. The second parameter is output only if the first argument is false, otherwise there will be no result.

These two methods are used for timing, which calculates the exact time spent on an operation.
Console.time ()
Console.timeend ()
The time method indicates that the timing begins, and the Timeend method indicates that the timing is complete. Their arguments are the names of the timers. After calling the Timeend method, the console window displays the timer name: the cost of
Time ".

Console.profile ()//used to create a new performance tester (profile) whose parameters are the name of the performance tester.
Console.profileend ()//is used to end the running performance tester.

Console.group ()
Console.groupend ()
The above two methods are used to group the displayed information. It is only useful when outputting a large amount of information, divided into a set of information, can be folded/expanded with the mouse.
Console.groupcollapsed ()///is used to group the displayed information, and the contents of the group are closed on the first display (collapsed) instead of expanded.

Console.trace ()//Displays the calling path of the currently executing code in the stack.
Console.clear ()//is used to clear all output from the current console, and the cursor is reset to the first row.

JavaScript common DOM manipulation methods and functions