A collection of common native JS apis for front-end development

A, node,

1.1 Node Attributes

Node.nodeName   // Return the node name, read-only
Node.nodeType   // Returns a 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 descendants, readable and writable
Node.baseURI    // Returns the absolute path to the current page

Node.ownerDocument  // Returns the top-level document object of the current node, i.e. Document
Node.nextSibling  // Returns the first sibling node immediately following the current node
Node.previousSibling  // Returns the nearest sibling preceding the current node
Node.parentNode   // Returns the parent of the current node
Node.parentElement  // Returns the parent Element of the current node
Node.childNodes   // Returns all children of the current node
Node.firstChild  // Returns the first child of the current node
Node.lastChild   // Returns the last child of the current node

/ / parentNode interface
Node.children  // Returns all Element children of the specified node
Node.firstElementChild  // Returns the first Element child of the current node
Node.lastElementChild   // Returns the last Element child of the current node
Node.childElementCount  // Returns the number of all Element children of the current node.
Copy the code

1.2 operating

Node.appendChild(node)   // Add the last child node to the node
Node.hasChildNodes()   // Returns a Boolean value indicating whether the current node has children
Node.cloneNode(true);  // Defaults to false(clone node), true(clone node and its properties, and descendants)
Node.insertBefore(newNode,oldNode)  // Insert new child nodes before specifying child nodes
Node.removeChild(node)   // Delete the node on the parent of the node to be deleted
Node.replaceChild(newChild,oldChild)  // Replace the node
Node.contains(node)  // Returns a Boolean value indicating whether the parameter node is a descendant 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 two nodes with the same type, the same attributes, and the same child nodes.
Node.normalize()   // 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()  // Used to delete the current node
Node.before()  //
Node.after()
Node.replaceWith()
Copy the code

1.3 the Document node

1.3.1 Attributes of the Document node

document.doctype   //
document.documentElement  // Returns the root node of the current document
document.defaultView   // Return the window object of the Document object
document.body   // Returns the  node of the current document
document.head   // Returns the  node of the current document
document.activeElement  // Returns the element that is in focus in the current document.

// Node set properties
document.links  // Returns all a elements of the current document
document.forms  // Returns all form elements in the page
document.images  // Returns all image elements on the page
document.embeds  // Returns all embedded objects in the web page
document.scripts  // Returns all scripts for the current document
document.styleSheets  // Returns all stylesheets for the current page

// Document information attributes
document.documentURI  // Represents the url of the current document
document.URL  // Returns the url of the current document
document.domain  // Returns the domain name of the current document
document.lastModified  // Returns the last modified timestamp of the current document
document.location  // Returns a location object that provides the URL information for the current document
document.referrer  // Returns the source of access to the current document
document.title    Return the title of the current document
documentThe. CharacterSet property returns the characterSet for rendering the current document, such as UTF- 8 -, ISO- 8859.- 1.document.readyState  // Returns the current document status
document.designMode  // Controls whether the current document is editable, readable and writable
document.compatMode  // Return to the mode in which the browser processes the document
document.cookie   // Used to manipulate cookies
Copy the code

1.3.2 Method of Document node

(1) Read-write methods

document.open()   // To create and open a document
document.close()   // Use the open method to create a new document
document.write()   // Write to the current document
document.writeIn()  // Used to write to the current document with a newline character at the end.
Copy the code

(2) Find the node

document.querySelector(selectors)   // Takes a CSS selector as an argument and returns the first element node that matches the selector.
document.querySelectorAll(selectors)  // Takes a CSS selector as an argument and returns all element nodes that match that selector.
document.getElementsByTagName(tagName)  // Returns all elements with the specified HTML tag
document.getElementsByClassName(className)   // Returns all elements whose class names match the specified criteria
document.getElementsByName(name)   // Select HTML elements that have the name attribute (e.g. 
      

       , 
       
        , 
        , , 
        , 
        
       
      
document.getElementById(id)   // Returns the element node matching the specified id attribute.
document.elementFromPoint(x,y)  // Returns the Element child node at the top of the page.
Copy the code

(3) Generate nodes

document.createElement(tagName)   // Used to generate HTML element nodes.
document.createTextNode(text)   // Used to generate text nodes
document.createAttribute(name)  // Generate a new property object node and return it.
document.createDocumentFragment()  // Generate a DocumentFragment object
Copy the code

(4) Event method

document.createEvent(type)   // Generates an event object that can be used by the element.dispatchEvent() method
document.addEventListener(type,listener,capture)  // Register events
document.removeEventListener(type,listener,capture)  // Cancel the event
document.dispatchEvent(event)  // Trigger the event
Copy the code

(5) Others

document.hasFocus()   // Returns a Boolean value indicating whether any elements in the current document are active or in focus.
document.adoptNode(externalNode)  // Remove a node from its original document, insert the current document, and return the inserted new node.
document.importNode(externalNode, deep)   // Copy the specified node from the external document and insert the current document.
Copy the code

1.4 Element node

1.4.1 Attributes of Element nodes

(1) Characteristics and attributes

Element.attributes  // Returns all attribute nodes of the current element node
Element.id  // Returns the id attribute of the specified element, readable and writable
Element.tagName  // Returns the uppercase tag name of the specified element
Element.innerHTML   // Returns the HTML code that this element contains, which is readable and writable
Element.outerHTML  // Returns all HTML code for the specified element node, including itself and all contained child elements, readable and writable
Element.className  // Returns the class attribute of the current element, which can be read and written
Element.classList  // Returns all classes of the current element node
Element.dataset   // Returns all data-* attributes in the element node.
Copy the code

(2) Size attribute

Element.clientHeight   // Returns the height of the visible part of the element node
Element.clientWidth   // Returns the width of the visible portion 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 scroll bar of the element node scrolls to the right
Element.scrollTop   // Returns the vertical scroll down pixel value of the element node
Element.offsetHeight   // Return the vertical height of the element (including border,padding)
Element.offsetWidth    // Return 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 the horizontal displacement
Element.style  // Returns the inline style of the element node
Copy the code

(3) Node-related attributes

Element.children   // Includes all the children 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 of the current node
Element.lastElementChild   // Returns the last Element child of the current node
Element.nextElementSibling  // Returns the next sibling of the current element node
Element.previousElementSibling  // Returns the previous sibling HTML node of the current element node
Element.offsetParent   // Returns the closest element of the current element node, and CSS position does not equal the static parent element.
Copy the code

1.4.2 Method of Element node

(1) Location method

getBoundingClientRect()  
/ / getBoundingClientRect returns an object that contains the top, left, right, bottom, width, height/high/wide width and height elements itself
// The distance between the outer edge of the top element and the top of the window
// The distance between the right outer border and the top of the window
// The distance between the bottom outer boundary and the top of the window
// The left outer margin of the left element is the distance from the top of the window
// Width element width (including border,padding)
// Height element itself height (including border,padding)

getClientRects()   // Returns all the rectangles of the current element's parameters on the page.

// The offset of the element on the page
var rect = el.getBoundingClientRect()  
return {   
  top: rect.top + document.body.scrollTop,   
  left: rect.left + document.body.scrollLeft  
}
Copy the code

(2) Attribute method

Element.getattribute () : Reads the specified attribute element.setAttribute () : sets the specified attribute element.hasattribute () : Returns a Boolean value indicating whether the current Element node has the specified attribute element.removeAttribute () : Removes the specified attributeCopy the code

(3) Search method

Element.querySelector()  
Element.querySelectorAll()  
Element.getElementsByTagName()  
Element.getElementsByClassName()
Copy the code

(4) Event method

Element. The addEventListener () : add event callback function Element. The removeEventListener () : remove event listeners function Element. The dispatchEvent () : the triggering event//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

/ / the event object
var event = window.event||event;    

// The target node of the event
var target = event.target || event.srcElement;

// Event broker
ul.addEventListener('click'.function(event) {   
  if (event.target.tagName.toLowerCase() === 'li') {   
    console.log(event.target.innerHTML)   
  }  
});
Copy the code

(5) Others

Element.scrollIntoView()   // Scroll the current element to the visible area of the browser

// Parses the HTML string and inserts the resulting node into the DOM tree at the specified location.
Element.insertAdjacentHTML(where, htmlString); 
Element.insertAdjacentHTML('beforeBegin', htmlString); // Insert before the element
Element.insertAdjacentHTML('afterBegin', htmlString); // Insert before the first child of the element
Element.insertAdjacentHTML('beforeEnd', htmlString); // Insert after the last child of the element
Element.insertAdjacentHTML('afterEnd', htmlString); // Insert after the element

Element.remove()  // Remove the current element node from the DOM
Element.focus()   // Used to shift the focus of the current page to the specified element
Copy the code

2. CSS operations

(1) Class name operation

/ / below ie8
Element.className  // Get the class name of the element node
Element.className += ' ' + newClassName  // Add a new class name

// Determine if there is a class name
function hasClass(element,className){
  return new RegExp(className,'gi').test(element.className);
}

/ / remove the class
function removeClass(element,className){
  element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)'.'gi'),' ');
}

//ie10 
element.classList.add(className)  / / new
element.classList.remove(className)  / / delete
element.classList.contains(className)  // Whether to include
element.classList.toggle(className)  //toggle class
Copy the code

(2) Style operation

element.setAttribute('style'.' ')

element.style.backgroundColor = 'red'

element.style.cssText // Use to read, write, or delete the entire style attribute

element.style.setProperty(propertyName,value)  // Set CSS properties
element.style.getPropertyValue(property)  // Get CSS properties
element.style.removeProperty(property)  // Delete the CSS propertiesOperate on non-inline styles//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
/ / class
window.getComputedStyle(el,':after')[attrName]
Copy the code

Three, objects,

3.1 Object

(1) Generate instance objects

var o = new Object(a)Copy the code

(2) Attributes

Object.prototype   // Return the prototype object
Copy the code

(3) Methods

Object.keys(o)   // Iterate over the enumerable properties of the object
Object.getOwnPropertyName(o)   // Iterate over an object's non-enumerable propertiesObject instance method valueOf() : returns the valueOf the current object. ToString () : Returns the string representation of the current object. ToLocaleString () : Returns the local string form of the current object. HasOwnProperty () : Determines whether an attribute is a property of the current object itself or inherits from the prototype object. IsPrototypeOf () : Determines whether the current object is a prototype of another object. PropertyIsEnumerable () : checks if a propertyIsEnumerable.Copy the code

3.2 the Array object

(1) Generate instance objects

var a = new Array(a)Copy the code

(2) Attributes

a.length  / / the length
Copy the code

(3) Array. IsArray ()

Array.isArray(a)   // Determine if a value is an array
Copy the code

(4) Array instance method

a.valueof()   // Returns the array itself
a.toString()  // Returns an array as a string
a.push(value,vlaue....)   // Used to add one or more elements to the end of an array and return the length of the array after adding the new elements.
pop()   // Remove the last element of the array and return that element
join()  // Returns all array members as a string, using arguments as delimiters. If no arguments are provided, they are separated by commas by default.
concat()  // For merging multiple arrays. It adds the members of the new array to the end of the original array, and returns a new array, unchanged.
shift()  // Remove the first element of the array and return that element.
unshift(value)  // Used to add an element to the first position of the array and return the length of the array after the new element is added.
reverse()   // Use to reverse the order of the elements in an array and return the changed array
slice(start_index, upto_index);   // Returns a new array, the original array remains unchanged. The first argument is the start position (starting from 0), and the second argument is the end position (but not the element itself). If you omit the second argument, you are returned to the last member of the original array. A negative number is the last digit.splice(index, count_to_remove, addElement1, addElement2, ...) ;// Delete a part of the original array, and add a new array member at the deleted location, return the deleted element. The first argument is the starting position of the deletion, and the second argument is the number of elements that were deleted. If there are more arguments, these are the new elements to be inserted into the array.
sort()   // Sort the group members by lexicographical order by default. After sorting, the original array will be changed. If you want the sort method to sort by custom, you can pass in a function that says sort by custom. The function itself takes two more parameters, representing the two elements being compared. If the return value is greater than 0, the first element comes after the second; In all other cases, the first element comes before the second.
map()   // Call a function on all the members of the array, and return a new array based on the result of the function.
map(elem,index,arr)   // The map method takes a function as an argument. When this function is called, the map method passes it three parameters: the current member, the current location, and the array itself.
forEach()   // Iterate over all the members of the array, perform some operation, and the argument is a function. It takes three arguments, the value of the current location, the number of the current location, and the entire array.
filter()   // The argument is a function that is executed by all array members and returns true as a new array. This method does not change the original array.
some()    // Determine whether an array member meets a certain condition. Takes a function as an argument that all array members execute in turn, returning a Boolean value. This function takes three arguments, the member of the current position, the ordinal number of the current position, and the entire array. As long as one array member returns true, the entire some method returns true, otherwise false.
every()   // Determine whether an array member meets a certain condition. Takes a function as an argument that all array members execute in turn, returning a Boolean value. This function takes three arguments, the member of the current position, the ordinal number of the current position, and the entire array. Return true if all array members return true, otherwise false.
reduce()   // Process each member of the array in turn, eventually accumulating to a value. Process from left to right (first member to last member)
reduceRight()  // Process each member of the array in turn, eventually accumulating to a value. From right to left (from last member to first member)
indexOf(s)   // Returns the first occurrence of the given element in the array, or -1 if none occurs. You can accept a second argument that indicates the start of the search
lastIndexOf()  // Returns the last occurrence of the given element in the array, or -1 if none occurred.
Copy the code

3.3 Number object

(1) Generate objects

var n = new Number(a)Copy the code

(2) Number object attribute

NumberPOSITIVE_INFINITY: positive infinity, pointingInfinity.Number.negative_infinity: negative infinity, pointing to -Infinity.Number.nan: indicates non-numeric, pointing toNaN.Number.MAX_VALUE: indicates the largest positive number, and correspondingly, the smallest negative number is -Number. MAX_VALUE.Number.min_value: indicates the smallest positive number (that is, the closest0The positive number of theta is zero64In the bit floating-point system, is5e-324(corresponding, closest0The negative of PI is minus PINumberBetween integer.min_value.NumberMAX_SAFE_INTEGER: indicates the maximum integer that can be expressed accurately9007199254740991.NumberMIN_SAFE_INTEGER: indicates the smallest integer that can be accurately represented- 9007199254740991..Copy the code

(3) Number object instance method

toString()   // To convert a value to a string. You can take a parameter that represents the base of the output. If omitted, the value is converted to decimal by default and then printed as a string. Otherwise, a number is converted to a string of some base based on the base specified by the argument.
toFixed()   // Converts a number to a decimal number. Returns the string corresponding to the decimal number.
toExponential()  // Used to convert a number to scientific notation. You can pass in an argument that represents the number of significant digits after the decimal point, ranging from 0 to 20, beyond which a RangeError is raised.
toPrecision()  // A significant number used to convert a number to a specified number of digits.
Copy the code

3.4 String object

(1) Generate instance objects

var s = new String(a)Copy the code

(2) String attributes

s.length   // Returns the length of the string
Copy the code

(3) Methods

s.chatAt(index)   // Returns the character at the specified position
s.fromCharCode()    // This method takes a series of Unicode code points and returns the corresponding string.
s.charCodeAt(index)    // Returns the Unicode code point (in decimal) for the character at the given position
s.concat(s2)  // Used to concatenate two strings
s.slice(start,end)   // Is used to retrieve substrings from the original string and return them without changing the original string. The first argument is the start of the substring, and the second argument is the end of the substring (excluding that position). If the argument is negative, it represents the position of the countdown from the end, that is, the negative value plus the length of the string.
s.substring(start,end)  // Is used to retrieve substrings from the original string and return them without changing the original string. The first argument represents the start position of the substring, and the second position represents the end position.
s.substr(start,length)   // Is used to retrieve substrings from the original string and return them without changing the original string. The first argument is the start position of the substring, and the second argument is the length of the substring. If the first argument is negative, it represents the character position of the reciprocal calculation. If the second argument is negative, it is automatically converted to 0, so an empty string is returned.
s.indexOf(s)   // Returns the position of the given element's first occurrence in the string, or -1 if none occurs. You can accept a second argument that indicates the start of the search
s.lastIndexOf()  // Returns the last occurrence of the given element in the string, or -1 if none occurred.
s.trim()  // Removes Spaces at both ends of the string to return a new string
s.toLowerCase()  // Use to convert a string to lowercase and return a new string without changing the original string.
s.toUpperCase()  // All uppercase
s.localeCompare(s2)  // Compare two strings. It returns an integer that, if less than 0, means that the first string is less than the second string; If it's 0, it means they're equal to each other; If greater than 0, the first string is greater than the second string.
s.match(regexp)   // Used to determine if the original string matches a substring, returns an array of matched first strings. If no match is found, null is returned.
s.search()  // Returns the first position matched. If no match is found, -1 is returned.
s.replace(oldValue,newValue)  // Replace the substring of the match, usually only the first match (unless a regular expression with the G modifier is used).
s.split()  // Split the string according to the given rules, returns an array of split substrings. You can also pass in a second argument that determines the number of members to return.
Copy the code

3.5 Math object

(1) Attributes

Math.e: constant E.MathLN2:2The natural log of omega.MathLN10:10The natural log of omega.Math. LOG2E: in2Log base e.Math. LOG10E: in10Log base e.Math.PI: constant PI.MathSQRT1_2:0.5Square root of PI.MathSQRT2:2Square root of PI.Copy the code

(2) Mathematical methods

Math.abs() : Returns the absolute value of the argumentMath.ceil() : rounded up, takes a parameter, and returns the smallest integer greater than that parameter.Math.floor() : round downMath.max(n,n1,...) : Accepts multiple parameters and returns the maximum valueMath.min(n,n1,..) : Accepts multiple arguments and returns the minimum valueMath.pow(n,e) : An exponential operation that returns an exponential value with the first argument as the base and the second argument as the power.Math.sqrt() : returns the square root of the parameter value. Returns if the argument is a negative valueNaN.Math.log() : returns the natural log base e.Math.exp() : returns the exponent of e, the parameter power of the constant e.Math.round() : roundMathThe random () : returns0to1Between a pseudorandom number that might be equal to0But it must be less than1.Copy the code

(3) Trigonometric function method

Math.sin() : Returns the sine of the argumentMath.cos() : returns the cosine of the argumentMath.tan() : returns the tangent of the argumentMath.asin() : Returns the arcsine (radian value) of the parameterMath.acos() : Returns the arccosine (radian value) of the argumentMath.atan() : Returns the arctangent (radian value) of the argumentCopy the code

3.6 a JSON object

(1) Method

JSON.stringify()   
// Convert a value to a string. The string should be in JSON format and can be restored by the json.parse method.
// (json.stringify (obj, selectedProperties)) can also take an array as a second argument specifying the properties to be converted to a string.
// You can also take a third argument to increase the readability of the returned JSON string. If it is a number, the number of Spaces (up to 10) added before each attribute; If it is a string (no more than 10 characters), the string is appended to the beginning of each line.

JSON.parse()   // Used to convert JSON strings into objects.
Copy the code

3.7 the console object

(1) Method

console.log(text,text2,...)   // Used to output information in the console window. It can take multiple arguments and concatenate their results for output. If the first argument is a format string (using format placeholders), the console.log method replaces the placeholders with subsequent arguments in turn before printing.
console.info()   // In the console window, the output information will be preceded by a blue icon.
console.debug()  // In the console window, the output information will be preceded by a blue icon.
console.warn()  // Add a yellow triangle to the front of the output message, indicating a warning;
console.error()  // The output message is preceded by a Red Cross, indicating an error, and the stack where the error occurred is displayed
console.table()  // You can convert complex data to tabular display.
console.count()  // To count how many times it is called.
console.dir()    // Inspect an object and display it in a format that is easy to read and print.
console.dirxml()  // Display DOM nodes as a directory tree.
console.assert()  // Takes two arguments, the first an expression and the second a string. The second argument is printed only if the first argument is false, otherwise there is no result.

// These two methods are used for timing, so you can calculate the exact time an operation takes.
console.time()
console.timeEnd()
// The time method indicates the start of the timer, and the timeEnd method indicates the end of the timer. They take the name of the timer. After calling the timeEnd method, the console window displays "Timer name: Time consumed."

console.profile()  // To create a new profile, which takes the name of the profile.
console.profileEnd()  // To end a running performance tester.

console.group()
console.groupend()
// These two methods are used to group the displayed information. It is only useful for output of large amounts of information, grouped into groups that can be folded/expanded with the mouse.
console.groupCollapsed()  // Displays of information into groups that collapse rather than unfold during first displays.

console.trace()  // Displays the invocation path of the currently executing code on the stack.
console.clear()  // Used to clear all output from the current console, putting the cursor back to the first line
Copy the code

This article is intended as a learning memo

---

Read the original