One, node 1.1 node properties
Node.nodename//Return node name, read-only node.nodetype//return constant value of node type, read-only Node.nodevalue//Return text value of text or comment node, read-only node.textcontent// Returns the text content of the current node and all its descendant nodes, read/write Node.baseuri//returns the absolute path of the current web page
Node.ownerdocument//Returns the top-level document object on which the current node is located, that is, documents Node.nextsibling//Returns the first sibling node immediately following the current node node.previoussibling// Returns the closest sibling node 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 the current node's has child nodes 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 sub-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. ----------------------------------------------------------------------------------------------------------
1.2 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); The default is False (Clone node), True (clone node and its attributes, and descendants) Node.insertbefore (Newnode,oldnode)//Insert new child node before specifying child node Node.removechild (node)/ /delete node, operate on the parent node of the node to be deleted 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 ()//for removing the current node Node.before ()//Node.after () Node.replacewith ()----------------------------- -----------------------------------------------------------------------------
1.3 Document Node
1.3.1 Attributes of the document node
Document.doctype//Document.documentelement///returns the root node of the current document Document.defaultview//Returns the Window object that contains a Document object Document.bo DY//Returns the <body> node of the current document Document.head//returns the
Node Collection properties Document.links//Returns all the a elements of the current document DOCUMENT.FORMS//Returns all the table cells in the page Document.images//Returns all the picture elements in the page Document.embeds//return All embedded objects in a Web page document.scripts//Returns all scripts for the current document Document.stylesheets//Returns all style sheets for the current page
Document information Properties Document.documenturi//Represents the current document's URL document. URL//Returns the current document's URL Document.domain//Returns the current document's domain name Document.lastmodified//returns the last modified timestamp of the current document Document.location//Returns the Location object, mentioning URL information for the current document Document.referrer//Returns the current document's access source Document.title//Returns the title of the current document Document.characterset property returns the character set that renders the current document, such as UTF-8, Iso-8859-1. Document.readystate//Returns the status of the current document Document.designmode//Controls whether the current document is editable, read/write Document.compatmode//Return to the browser's mode of processing the document Document.cookie//used to manipulate cookies
Methods for 1.3.2 Document nodes
(1) Reading and writing methods
Document.open ()//For new and open a document document.close ()//uneasy than the open method of the new document document.write ()///used to write to the current document Document.writein () Used to write content to the current document, trailing add line breaks. (2) Finding nodes
Document.queryselector (selectors)//accepts 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 document.getelementsbyclassname (className)// Returns an element that includes all class names that match the specified criteria Document.getelementsbyname (name)//To select HTML elements that have the name attribute (such as <form>, <radio>, < Img>, <frame>, <embed>, <object>, etc.) document.getElementById (ID)//Returns the element node that matches the specified ID attribute. Document.elementfrompoint (x, y)//Returns the element child node at the top of the page's specified position. (3) Build node
Document.createelement (TagName)//used to generate HTML element nodes. document.createTextNode (text)//is used to generate a text node Document.createattribute (name)///Generate a new Property object node and return it. Document.createdocumentfragment ()//Generate an DocumentFragment object (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 event Document.removeeventlistener (type,listener,capture)//Logoff event Document.dispatchevent (event)//Trigger Event (5) Other
Document.hasfocus ()//Returns a Boolean value that indicates whether an element in the current document is active or focusable. Document.adoptnode (Externalnode)//Removes a node from its original document, inserts the current document, and returns the new node after it is inserted. Document.importnode (Externalnode, deep)//Copy the specified node from the external document and insert the current document. ----------------------------------------------------------------------------------------------------------
1.4 element Node
1.4.1 attributes of the element node
(1) Attribute properties
element.attributes //Returns all attribute nodes of the current element node element.id //Returns the id attribute of the specified element, read/write element.tagname // Returns the uppercase tag name of the specified element element.innerhtml //Returns the HTML code contained in the element, which reads and writes element.outerhtml //returns all the HTML code for the specified element node. Includes all of its own and contained child elements, read/write element.classname //Return the current element's class attribute, read/write element.classlist //Return all class collections of the current element node element.dataset //Returns all the data-* properties in the element node. (2) Dimension properties
element.clientheight //Returns the height of the visible portion 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 edge 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, you can change the scroll position of the element element.scrolltop //Return the element node's vertical scrolling down the pixel value 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 // Returns the horizontal offset element.style //Returns the element node's inline style (3) node-related properties
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. Method of 1.4.2 Element node
(1) Location method
Getboundingclientrect ()//Getboundingclientrect Returns an object that contains the Top,left,right,bottom,width,height//width, height element itself width height/ /top element Sisu the distance from the top of the window//right outer boundary from the top of the window//Bottom element The outer boundary distance from the top of the window//The left element is from the top of the window//Width element itself (including border,p adding)//Height element itself high (contains border,padding)
Getclientrects ()//returns all rectangles of the current element on the page parameter.
Element offset on page var rect = El.getboundingclientrect () return {top:rect.top + Document.body.scrollTop, Left:rect . Left + Document.body.scrollLeft} (2) Property method
Element.getattribute (): reads the specified property Element.setattribute (): Sets the specified property Element.hasattribute (): Returns a Boolean value indicating whether the current element node has a specified property Element.removeattribute (): Remove the specified attribute (3) Find method
Element.queryselector () Element.queryselectorall () Element.getelementsbytagname () Element.getelementsbyclassname ( ) (4) Event method
Element.addeventlistener (): Add callback function for event Element.removeeventlistener (): Remove event Listener function element.dispatchevent (): Trigger Event
IE8 element.attachevent (Oneventname,listener) element.detachevent (Oneventname,listener)
Event object var event = window.event| | Event
Target node of event var target = Event.target | | Event.srcelement;
Event Proxy Ul.addeventlistener (' click ', Function (event) {if (event.target.tagName.toLowerCase () = = = ' Li ') {Conso Le.log (Event.target.innerHTML)}}); (5) Other
Element.scrollintoview ()//scrolls the current element into the viewable area of the browser
Parses an HTML string and then inserts the resulting node into the DOM tree at the specified location. Element.insertadjacenthtml (where, htmlstring); element.insertadjacenthtml (' Beforebegin ', htmlstring); Insert element.insertadjacenthtml (' Afterbegin ', htmlstring) before the element; Insert element.insertadjacenthtml (' BeforeEnd ', htmlstring) before the first child element of the element; Insert element.insertadjacenthtml (' Afterend ', htmlstring) after the last child element of the element; After the element is inserted
Element.remove ()//is used to remove the current element node from the DOM Element.focus ()//To transfer the focus of the current page to the specified element
Second, CSS operation
(1) Class name operation
IE8 element.classname//Gets 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 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 it contains Element.classList.toggle (className)//toggle class
----------------------------------------------------------------------------------------------------------
(2) Style operation
Element.setattribute (' style ', ')
Element.style.backgroundColor = ' Red '
Element.style.cssText//used to read or write or delete the entire style property
Element.style.setProperty (Propertyname,value)//Set CSS Properties Element.style.getPropertyValue (property)//Get CSS Properties Element.style.removeProperty//Delete CSS property action non-inline style//ie8 element.currentstyle[attrname]//ie9+ window.getComputedStyle (El,null) [Attrname] window.getComputedStyle (el,null). GetPropertyValue (AttrName)//Pseudo-class window.getComputedStyle (el, ': After ') [Attrname]---------------------------------------------------------------- ------------------------------------------three, the object
3.1 Object Objects
(1) Generating an instance object
var o = new Object () (2) property
Object.prototype//Return prototype object (3) method
Object.keys (o)//Iterate through an enumerable property of an object Object.getownpropertyname (o)//iterate over an object non-enumerable Property object instance method
ValueOf (): Returns the value corresponding to the current object. ToString (): Returns the string form corresponding to the current object. toLocaleString (): Returns the local string form corresponding to the current object. hasOwnProperty (): Determines whether a property is a property of the current object itself, or a property inherited from a prototype object. isPrototypeOf (): Determines whether the current object is a prototype of another object. propertyIsEnumerable (): Determines whether a property can be enumerated.
----------------------------------------------------------------------------------------------------------3.2 Array Object
(1) Generating an instance object
var a = new Array () (2) property
A.length//Length (3) Array.isarray ()
Array.isarray (a)//the method used to determine whether a value is an array (4) instance
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 an array, and returns the length of the array after adding the new element. Pop () //Use to delete the last element of the array and return the element join () //To return all array members as a string, using the argument as a delimiter. 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 () //To delete the first element of the array and return the element. Unshift (value) //is used to add an element at the first position in the array and returns the length of the array after the new element is added. Reverse () //For reversing the order of elements in the array, returning the changed array slice (Start_index, Upto_index); //For extracting part of the original array, returning a new array, The original array does not change. The first argument is the starting position (starting at 0), and the second parameter is the terminating position (but the element itself is not included in the position). 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, ...); //is used to delete a member of the original array and can be added to the new array member at the deleted location, and the return value is the element that was 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 () //sorting on array members by default, sorted 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, and in other cases, 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 accepts 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 over all members of an array, performs an operation, 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. The filter () //parameter is a function in which all array members execute the function sequentially, returning a new array of members that return a result of true. The method does not change the original array. Some () //used to determine if an array member conforms to a certain condition. Takes a function as an argument, and all the array members execute the function sequentially, returning a Boolean value. The function takes three parameters, in order, the member of the current position, the ordinal of the current position, and the entire array. As long as the return value of an array member is true, the return value of the entire some method is true, otherwise false. Every () //used to determine if an array member conforms to a certain condition. Takes a function as an argument, and all the array members execute the function sequentially, returning a Boolean value. The function takes three parameters, in order, the member of the current position, the ordinal of the current position, and the entire array. The return value of all array members is true to return true, otherwise false. Reduce () //Each member of the array is processed sequentially, and eventually accumulates to a value. Left-to-right processing (from the first member to the last member) Reduceright () //sequentially processes each member of the array, eventually accumulating to a value. Right-to-left (from the last member to the first member) IndexOf (s) //Returns the position of the first occurrence of the given element in the array, or 1 if it does not appear. You can accept the second argument, which indicates the start of the search lastIndexOf () //Returns the position of the last occurrence of the given element in the array, or 1 if it does not appear.
3.3 Number Object
(1) Generating objects
var n = new Number () (2) The property of the Number object
Number.POSITIVE_INFINITY: Positive infinity, pointing to INFINITY. Number.negative_infinity: Negative infinity, pointing to-infinity. Number.NaN: Represents a non-numeric value, pointing to NaN. Number.MAX_VALUE: Represents the maximum positive number, corresponding to the minimum negative number is-number.max_value. Number.min_value: Represents the smallest positive number (that is, the positive number closest to 0, 5e-324 in the 64-bit floating-point system), and the corresponding negative number closest to 0 is-number.min_value. Number.max_safe_integer: Represents the largest integer that can be represented accurately, that is, 9007199254740991. Number.min_safe_integer: Represents the smallest integer that can be represented accurately, which is-9007199254740991. (4) Method of Number object instance
ToString ()//is used to convert a numeric value to a string. You can accept a parameter that represents the output's binary. If this argument is omitted, the value is first converted to decimal, and then the string is output, otherwise a number is converted into a string of characters based on the input specified by the parameter. ToFixed ()//is used to convert a number to a specified number of decimal places, and returns the string corresponding to that decimal. Toexponential ()///used to convert a number to a scientific notation form. You can pass in a parameter that represents the number of digits of a valid digit after the decimal point, ranging from 0 to 20, beyond which a rangeerror is thrown. Toprecision ()///For a valid number to convert a number to a specified number of digits. 3.4 String Object
(1) Generating an instance object
var s = new String () (2) property of a String object
s.length //Returns the length of the string (3) method
S.chatat (Index) //Returns the character at the specified position s.fromcharcode () //The parameter of the method is a series of Unicode code points, which returns the corresponding string. S.charcodeat (Index) //Returns the Unicode code point for the given position character (decimal notation) s.concat (s2) //For connecting 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 starting position of the substring, and the second argument is the end of the substring (without that position). 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 starting 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. If the first parameter is a negative number, the character position of the reciprocal calculation is indicated. 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. You can accept the second argument, which indicates the start of the search 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, returns a new string S.tolowercase () //used to convert a string all 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 is equal to 0, the value is equal, or greater than 0, indicating that 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 with the members matching theThe first string. If no match is found, NULL is returned. S.search () //return value is the first position to match. If no match is found, 1 is returned. S.replace (Oldvalue,newvalue) //used to replace matching substrings, typically only the first match is replaced (unless a regular expression with the G modifier is used). S.split () //Split a string by a 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.
3.5 Math Object
(1) Properties
MATH.E: Constant E. The natural logarithm of the math.ln2:2. The natural logarithm of the math.ln10:10. MATH.LOG2E: The logarithm of the base 2 E. MATH.LOG10E: The logarithm of the base 10 E. Math.PI: Constant PI. The square root of the math.sqrt1_2:0.5. The square root of the math.sqrt2:2. (2) Mathematical methods
Math.Abs (): Returns the absolute value of the parameter Math.ceil (): Rounding up, accepting a parameter, returning the smallest integer greater than the parameter. Math.floor (): Rounding down Math.max (n,n1,...) : can accept multiple parameters, return maximum value math.min (n,n1,..) : can accept multiple parameters, returns the minimum value Math.pow (n,e): Exponential operation, returns the exponent value with the first argument as the base and the second argument to a power. MATH.SQRT (): Returns the square root of the parameter value. If the argument is a negative value, Nan is returned. Math.log (): Returns the natural pair of values with the base E. Math.exp (): Returns the exponent of E, which is the parameter of the constant E. Math.Round (): Rounding Math.random (): Returns a pseudo-random number from 0 to 1, which may be equal to 0, but must be less than 1. (3) Trigonometric method
Math.sin (): Returns the sine of the parameter Math.Cos (): Returns the cosine of the parameter Math.tan (): Returns the tangent of the parameter Math.asin (): Returns the inverse of the argument (radians) Math.acos (): Returns the inverse cosine (radian value) of the parameter Math.atan (): Returns the inverse tangent (radian value) of the parameter
3.6 JSON Object
(1) method
Json.stringify ()//is used to 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 accept an array, which, as the second argument, specifies the property that needs to be converted to a string. You can also accept the third parameter, which increases the readability of the returned JSON string. If it is a number, the space (up to 10) is added before each property, and if it is a string (no more than 10 characters), the string is added in front of each line.
Json.parse ()//is used to convert a JSON string into an object. 3.7 Console Object
(1) method
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 a format placeholder), the Console.log method replaces the placeholder with the following parameter, and then outputs it. 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, with a yellow triangle at the top, indicating a warning; Console.error ()//output information, with a red fork at the top, indicating an error, and displaying the stack console.table ()// You can convert data from a composite type to a tabular 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. The Console.time () console.timeend ()//time method means that the timing begins, and the Timeend method indicates the end of the timing. Their arguments are the names of the timers. After calling the Timeend method, the console window displays the timer name: Time spent.
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 ()//above these 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.
From the unknown great God of sharing, Invasion will be deleted!
The most comprehensive API collection on the front end
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
