Node.nodename //Returns the node name, read-only node.nodetype //returns the 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, reads and writes Node.baseuri //Returns the absolute path to the current page node.ownerdocument // Returns the top-level document object on which the current node is located, that is, documentnode.nextsibling //Returns the first sibling node immediately following the current node node.previoussibling //returns to the front of the current node, From the nearest sibling 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 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
1.3 Document Node 1.3.1 Attributes of the document nodeNode.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 ()
document.doctype//document.documentelement//returns the root node of the current document Document.defaultview// Returns the Window object that contains the Document object Document.body//returns the<Body>node Document.head//Returns the current document's<Head>node Document.activeelement//Returns the element that receives focus in the current document. Node Collection properties Document.links//Returns all the a elements of the current document DOCUMENT.FORMS//returns all table cells in the page Document.images//Returns all the picture elements in the page Document.embeds// Returns 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// The URL document that represents the current document. URL//Return 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 the Location object, Provides 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 can be edited, read/write Document.compatmode// Returns the mode in which the browser processes the document Document.cookie//used to manipulate cookiesmethods 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 an HTML element that has the name attribute (for example<form>、<Radio>、<img>、<Frame>、<Embed>And<Object>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 a 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
1.4 Element Node 1.4.1 Attributes of the element node (1) attribute PropertiesDocument.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.
Element.attributes//Returns all attribute nodes of the current element node Element.id//Returns the id attribute of the specified element, reads and writes Element.tagname//returns the uppercase tag name of the specified element element.innerhtml// Returns the HTML code that the element contains, reads and writes element.outerhtml//returns all the HTML code for the specified element node, including itself and all child elements contained in it, reads and writes Element.classname//Returns the class attribute of the current element, Read/write Element.classlist//returns all the class collections of the current element node Element.dataset//Returns all data-* attributes 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 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 scroll position of the element element.scrolltop// Returns the vertical scroll-down pixel value 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 top left corner of the current element relative to the Element.offsetparent node Element.offsettop//return horizontal displacement Element.style// Returns the inline style of an element node
(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 of the current element node HTML node element.offsetparent // Returns the closest of the current element node, and the Position property of the CSS does not equal the parent element of static. 1.4.2 element Node method (1) Position method Getboundingclientrect () //Getboundingclientrect Returns an object that contains Top,left,right,bottom, Width,height//width, height element itself width height//top element Sisu boundary distance from the top of the window//right outer boundary distance from the top of the window//Bottom element The outer boundary distance from the top of the window//left outer boundary distance The top distance of the window//Width element itself is wide (contains border,padding)//Height element itself high (contains border,padding) getclientrects () ///Returns all rectangles of the current element on the page parameters. Element offset on page var rect = el.getboundingclientrect () return { top:rect.top + document.body.scrolltop,< C16/>left:rect.left + Document.body.scrollLeft }(2) Attribute method
Element.getattribute (): reads the specified property Element.setattribute (): Sets the specified property Element.hasattribute (): Returns a Boolean value, Indicates whether the current element node has a specified property Element.removeattribute (): Removes the specified property
(3) Search method
Element.queryselector () Element.queryselectorall () Element.getelementsbytagname () Element.getelementsbyclassname ( )
4) Event method
Ie8element.attachevent (Oneventname,listener) element.detachevent (Oneventname,listener)//Event object var event = window.event| | Target node of event;//event var target = Event.target | | event.srcelement;//Event Proxy Ul.addeventlistener (' click ', Function (event) {if (event.target.tagName.toLowerCase () = = = ' Li ') {Console.log (Event.target.innerHTML)}});(5) Other
Element.scrollintoview () //Scrolls the current element into the viewable area of the browser//parses the HTML string and then inserts the resulting node into the specified location of the DOM tree. 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 class name//Determine if there is a class name function Hasclass ( Element,classname) {return new RegExp (ClassName, ' GI '). Test (element.classname);} Remove Classfunction removeclass (element,classname) {element.classname = Element.className.replace (New RegExp (' (^|\\b) ' + classname.split ('). Join (' | ') + ' (\\b|$) ', ' gi '), ');} Ie10element.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 and 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 (property)//Delete CSS PropertiesAction non-inline style
Ie8element.currentstyle[attrname]//ie9+window.getcomputedstyle (El,null) [Attrname]window.getcomputedstyle (EL, NULL). GetPropertyValue (Attrname)//Pseudo-Class window.getComputedStyle (El, ': After ') [Attrname]
===============================================================================================
Third, the object
3.1 Object Objects (1) Generating an instance objectvar o = new Object()
(2) Properties
（3）方法
Object.keys (o)//Iterate over an object's enumerable properties Object.getownpropertyname (O)//Traversal object non-enumerable properties
Methods for object instances
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) //used to determine whether a value is an array
(4) method of an array 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 the array and returns the length of the array after adding the new element. Pop ()//is used to delete the last element of the array and return the element join ()//with the parameter as a delimiter, all array members are returned as 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 ()//is used 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, and the original array is unchanged. 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, ...); Used to delete part of a member of the original array, and to add a new array member to the deleted location, the returned 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 ()//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, 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 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, namely the current position value, the current positionThe number 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 ()//is 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 ()//is 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 ()//processes each member of the array 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 and eventually accumulates 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：表示能够精确表示的最小整数，即-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) Properties 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 (in decimal notation) s.concat (S2)//For connecting two strings S.slice (start,end)//For extracting substrings from the original string and returning, Does not change 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 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. 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 ()//is used to remove spaces at both ends of a string, returning 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)//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.
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 Argument 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 ()//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 currently executing code in the stackThe call path. Console.clear ()//is used to clear all output from the current console, and the cursor is reset to the first row.
Javsscript Common API Collections
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
