JS Getting Started classic notes

1, escape character\b Backspace character \f page break \ n newline character \ r return character \ Tab \ ' single quotation mark \ ' double quote \ \ Backslash \xnn where nn is a hexadecimal number representing a number in the Latin-1 character set to represent a word

The 2.parseInt () function and the parsefloat () function Convert a string to integers and floating-point numbers, which are parsed verbatim, and if the parsed character is not a valid number, parsing stops and converts the parsed string to the corresponding value. such as parseint ("123ABC") will return a value of 123, when JavaScript resolves to the a character a, the string will be considered to be the part of the end of the number. Parsefloat () works the same way as parseint (), except that it treats the decimal point as part of the number. If no number will return Nan

3. Create array var myArray = new Array ();(case sensitive). Limit the length var myArray = new Array (6), or var myArray = new Array (' Paul ', ' John ', ' 112 '); In JavaScript, the length of the array can be modified, as we define a 3-length array var myArray = new Array (3); Then, define a value for the element of index 130 myarray[130]= "Paul"; then JavaScript will assume that we have modified the length of the MyArray array and defined the MyArray array as length 131, which can contain at least 131 elements of the array.

JavaScript simulates multidimensional arrays and does not exist, but can be simulated out of var personnel = new Array ();    Personnel[0] = new Array ();    Personnel[0][0] = "NAME0"; PERSONNEL[0][1] = "AGE0";

4. Comparisons can also be made between strings , and all comparisons applied to numeric values can also be applied to strings, except that strings are compared in alphabetical order. toUpperCase () Converts the string to uppercase. toLowerCase () Converts the string to lowercase.

The 5.for...in statement can traverse an element in an array without having to know the number of elements in the array.   It means that the code in the loop body is executed once for each element contained in the array. For (index in arrayname) {} where index is a variable declared before a loop statement, it is automatically assigned to the array element that the index refers to. ARRAYNAMEP It is a variable that contains the array we want to traverse

6. for a page, any variable declared outside of a function is scoped to all script code on that page. A variable declared in a function is a local variable. JavaScript will often perform garbage collection

7.JavaScript Built-in objects, common with string objects, math objects, array objects, and date objects

String Object

When a string object is compared to a string of a base data type, the actual string values are compared for equality, but when you compare two string objects, the introduction of two objects is equal. For a partial method of a String object, we can treat the string as a series of individual characters. Each character has an index that represents the position of the character in the string.

1 "Length Property

2 "charAt () method gets the character charCodeAt () method of the parameter position gets the Unicode encoding of the positional character of the parameter fromCharCode () method converts the character encoding to a string, which, contrary to the above method, is a static method of string.    We can call String.fromCharCode directly (65,66); IndexOf () and LastIndexOf () find the position of the substring in the string, they have two parameters, need to find the substring, where to start finding the substring (optional) Find the return position, cannot find the return-1 substr () method and substring () method to copy a string of strings, the difference between the two methods is the parameter, the first parameter represents the starting position, and the second argument is optional, if it is not represented to the end of the word string. The second parameter of the SUBSTR () method indicates the length of the substring being obtained. The second parameter of the substring () method indicates the location reached, that is, a substring before two positions, and the header does not wrap.

Math Object

The math object in JavaScript is unique in that it is a global object that does not need to declare or define a new one before using the Math object, and JavaScript will automatically create the Math object, which we can use directly. The Math object contains some frequently used mathematical constants, such as the Pi attribute common mathematical methods are:

The 1.abs () method returns the absolute value of the passed-in parameter

2.ceil () Method rounding up

3.floor () method rounding down

The 4.round () method is used to round an integer

The 5.random () method returns a random number from 0 to 1 that contains 0 but does not contain 1

The 6.pow () method is used to calculate a number of the specified power pow (n,m) n as base, and M to power

Number Object

Similar to a string object, we need to create a number object before we can use the various methods and properties of the # object. The ToFixed () method is used to intercept a number in the specified number of decimal places, and the parameter is the number of bits of the truncated decimal, which is rounded when the number of bits is intercepted.

Array Object

The Concat () method joins two arrays and can concatenate two separate arrays to form a new array, the first array calls this method, and the second array object is passed in

The slice () method, gets the partial element of the array, the return value is also an array object, two parameters to copy the starting index of the array element, the index of the array element that represents the end position boundary of the copied array element (optional parameter)

The join () method, converts the array to a string, and joins the strings into a complete string, with only one parameter being the delimiter for the concatenated array element.

Sort () method sorts the array, ascending

The reverse () method reverses the order of the elements in the array and can be used in conjunction with the sort () method to achieve a descending effect

Date Object

GetDate () returns an integer that indicates that the current date is the day ordinal of the Month GetDay () method, returns an integer that represents the day of the week, 0 for Sunday, and so on GetMonth () returns an integer representing the current month, and 0 for the January getfullyear ( Returns a 4-digit year Getdatestrig () returns a date string that people can understand based on the current time zone

SetDate (), Setmonth (), setFullYear (); no setday () because when the date is determined, the day of the week determines the value of the set if it exceeds the range of the above three functions, They are calculated from the first day or month or year plus the set value (which can be negative) to calculate the new date.  So calculate a year after 28 days can be used the following code var nowdate = new Date ();  var currentday = Newdate.getdate (); Nowdate.setdate (Currentday + 28);

Get the value of Time getHours (), getminutes (), getseconds (), getmilliseconds (), totimestring () getmilliseconds ()

Classes in 8.javascript

The name of the constructor is exactly the same as the class name, there is no need to define a class attribute in JavaScript, only the property is attached, and JavaScript will automatically create these properties, and the object is the same so that most of the objects in JavaScript have the prototype property. You can create new properties and methods by using the prototype property

9. The browser programming browser itself is made up of many objects. Like the Window object, which represents the browser's form, we have used the two methods of the Window object, the alert () and the prompt () method, as well as the document object, which is used to load the page itself in the browser. A collection of objects typically provided by the browser to JavaScript is called the browser object model (brow Ob model,dom). The browser object model is a hierarchical object structure with Windwo objects at the top of the hierarchy. The Window object represents the browser's frame and everything about the browser. such as scroll bars, navigation buttons, etc. are included in the Window object.

The Window object represents the browser's frame or browser's form, and on some program it also represents the browser itself. It contains a lot of properties about the browser. The Window object is a global object, in effect the global and global variables are properties of the global object, and when you declare a global function or global variable, you actually create a property of that global variable.   Alert () is actually a method of the Window object, because the Window object is a global object, so using alert () instead of Window.alert () is also correct. Some properties of the Window object are itself an object, such as the Document object, the Navigator object, the Histroy object, the screen, and the Location object. Where document represents the page of the browser. The Histroy contains a history of the pages the user has visited, navigator contains information about the browser itself, and screen contains information about the display capabilities of the client computer's display.   Location contains details about the URL of the current page that the browser is loading. Modify the browser status bar information with the Defaultstatus property, Window.defaultstatus = "Hello"

The history Object has a length property with the length property, which gives you the number of pages in the browser's historical stack. The history object has the back () method and the Forward () method, and the Histroy object also has the Go () method, which takes a parameter that indicates that the current page is the basis for moving forward or back several pages in the historical stack.

The location Object site object contains a large number of useful information about the current page position, which contains not only the Uniform Resource Locator (URL) information for the current page, but also the server information that provides the Web service, the port number to connect to the server, and the protocol information used.   This information can be obtained through the href attribute of the Location object, the Hostname property, the port property, and the Protocol property. If we are going to navigate to another page, there are two ways to Location.href (), Location.replace () The difference is that one is added to the top of the history stack and one is replaced, and the replaced by history page will not return to the current page.

Navigator Object It contains a large amount of relevant information about the browser and operating system running the current script. Its most common use is to differentiate between different browsers.

The screen object contains a large amount of information about the display capabilities of the client computer. With the Height property and the Width property, these two properties are measured in pixels. There is also the ColorDepth property, which indicates the number of color digits of the display color

The Document Object has many properties associated with the HTML document, all of which are array types.   Several important attributes are the forms array, the images array, and the links array. For each hyperlink tag with an href attribute <a>, the browser will create a corresponding a object, link[] array to represent a collection of all the A objects on the page, as seen in the previous images[] array containing the IMG object

The event processing event handler consists of the keyword on plus the name of the event to be processed. such as the Click event, the onclick

10. Forms We can access the form object directly from the form name, such as Document.myfrom to access the form object, myfrom as a table sole name, and also access the form object through the forms[] array property of the Document object  Most of the properties of the <form> tag can be accessed as properties of the form object, specifically, the Name property of the Form object is mapped to the Name property of the <form> tag. All form elements have the focus () and Blur () methods, which get focus and lose focus, both onfocus () and onblur () event buttons support onmousedown events and onmouseup events

A text box also has two properties, the Size property, and the MaxLength property. The Size property determines how many characters the text box has, and the MaxLength property is used to determine how many characters a user can enter in a text box. It also has the Select () method for selecting or highlighting text in a text box. In addition to the common onfocus and onblur events, the text object also has the Onchange,onselect,onkeydown,onkeypress and onkeyup event handlers, which trigger the Onselect event when the user selects the value of the text box. The onchange event of a text box is triggered only when the value of the text box loses focus and when the value is not the same as when the focus is obtained.

TextArea this also has the cols width property and the rows Height property, and a wrap property that determines what to do when the user enters the end of a line in the text area. The wrap default is soft, which means that the user does not need to enter the ENTER key at the end of a line and automatically goes to the next line when the input exceeds the right edge of the text field. To open the text area's wrap feature, you can set the value of the Wrap property to one of soft or hard. If you want to turn off the carriage return wrap, set wrap to OFF.

CheckBox check box, radio radio button, radio button with the same name will form a radio button group

The select tag creates a Select object, and if we want to define the list box as a drop-down list box, simply set the size of the select tag to 1. If you allow users to select multiple options at once from a list box or drop-down list box, simply <select> Add a multiple attribute to the definition of the tag.

11. Framework frame     Many web applications use frames to separate browser windows.   for a page that does not contain frames, there is only one window object, but for a page that contains a frameset, each frame in the page has a corresponding Window object   If a frame contains a child frame, The Window object for these sub-frames is the child object of the frame's Window object   each frame has a separate window and has a Windows object of its own. In addition, using the Parent property of the Window object, you can use the Window object from any frameset page contained in the frameset. By referencing the Parent property of a Window object, you can access the various properties and methods of the parents window object, just like the various properties and methods of the Window object that accesses the current page. In addition, you can access the various JavaScript variables and functions defined in the frameset page.     has such a relationship that the top Window (Framenu,framain (Fratop,frabottom)) contains the relationship. So what if, in the Frabottom frames page, we want to be able to access the window object of the Framenu frames page over the code? In fact, we can refer to the Window object of the top-level windows through Window.parent.parent, and the Framenu frame page is also a sub-object of the top-level window. To access this sub-object, you can use 3 methods, and these 3 methods have the same effect. 1. Accessed through the frames[] array property of the top-level window object, where the Framenu frames page is indexed in the frames[] array 0;window.parent.parent.frames[0]. 2. You can also use the name of the Framenu frame page as an index to the frames[] array; window.parent.parent.frames["Framemenu"] 3. You can also refer to the Framenu frames page directly by Framenu the name of the frames page: The Top property of the Window.parent.parent.fraMenu   window object returns a reference directly to the topmost frame in the frameset.

The Window object has an open () method to open a new browser window. The method can receive 3 parameters. The 3rd parameter is optional. The method returns a reference to the newly opened window. The first parameter is the URL of the page to load in the new window, and the second parameter is the name assigned to the new window. Instead of referencing the window in a script, the name is used in some HTML tags as the value of the target property, as used in hyperlinks or in the form's target property. Used in the target property of a hyperlink or form. If the second parameter of the window is set to Mywindow and a link is set on the page of the original window <a href= "test3.html" target=mywindow>test3.html</a> then click, The test3.html page is loaded in a new window named Mywindow. The third parameter is the value of the specified new window width property and height property var NewWindow = window.open ("test2.htm", "Mywindow", "width=250,height=250");

Add an attribute to the new browser window, with the third parameter, you can control the properties of the new window, such as the size of the new window, the starting benefit of the new window in the screen, whether the user can change the size of the new window, whether the new window has a toolbar, etc., set the property to Yes or 1 o'clock, the property will open. Setting this property to No or 0 o'clock turns off the property, and to set the property of a browser window to Yes to open, just include the name of the property in the third parameter of the window.open () method, and you do not need to specify a property value for the property.

Before we introduced the window.open () method to open a new window and return a reference to a new window, we can access the properties and methods of the new window, and access the document object of the new window, if the browser window of the open new window is called the source window, So, if the source window is accessed in a new window, accessing the Window object in the new window, the key is to use the opener property of the new window. The Opener property returns a reference to the Window object that opens the current new window.   You can use the following code to modify the source window background color to red: window.opener.document.bgcolor= "Red"; The use of the Window.opener property is similar to using the Window.parent property and the Window.top property in a frameset.

12. String manipulation

1 Split () method This method splits a string into an array of substrings, based on some sort of partition flag. The split string is based on the split marker passed in as a parameter to the split () method, which can be either a character or a string. The result of this method returns an array, but the last element is an empty string

2 The Replace method will find whether the specified substring exists, and when a matching substring is found, the replace () method replaces the matched substring with the specified string we set. Mystring.replace ("May", "June")

3 The search () method is used to find a specific substring in a string, if the substring is found, returns the substring's position in the string, otherwise the -1.search () method receives only one parameter. That is, the substring to look up in the string.

4 the Match () method is very similar to the search () method, except that the search () method returns the position where the substring was found, and the match () method returns an array in which each element contains a matching substring found.

13. Regular Expressions in JavaScript, regular expressions are used by RegExp objects, and RegExp objects are similar to String.array and are built-in objects in JavaScript. To create a new RegExp object, you can use two methods, the simplest of which is to use regular expression literals, such as the following code: var myregexp =/\b ' | ' \b/where the slash (/) is used to denote the start and end of a regular expression. Another method is var myregexp = new RegExp ("\\b ' | ')   \\b "); Regular expressions have three attributes: 1.G represents a global match, not a default match after the first one does not look for a 2.i representation of the case of ignoring letters 3.M multi-line marker

Regular Expressions: Special meta-characters

1. Text, numbers and punctuation characters

\d 0-9 any number \d any non-numeric character \w any word character, that is, the character between A-z,a-z,0-9, as well as the underscore character \w any non-word character \s any whitespace character, containing a horizontal tab, line feed, carriage return, paper break, and Vertical tab \s any non-whitespace character. Any single character other than line break (\ n) [...] Match any one of the characters inside the square brackets [^ ...] Match any character except for the characters inside the square brackets

2. The repeating character indicates that the item or character that precedes the repeating character needs to repeat the number of times {n} before the item repeats n times {n,} before the item repeats n times, or more than n times {n,m} before the item appears at least n times, up to M times? The preceding item appears 0 or 1 times + the preceding item appears 1 or more times, but appears at least 1 times * Previous entries appear 0 or more times

3. Positional metacharacters are used to set whether a regular expression is a substring that matches the starting position of a string, or a substring that matches the end position, or a dividing line where the pattern character is matched.

^ The metacharacters represent the starting position of the matched string, or the beginning of each line of a multiline string, for a multiline string (that is, a string containing a carriage return), when defining a regular expression, you need to set the multiline tag m, such as/myreg ex/m

$ The metacharacters represent the end position of the matched string, or the end position of each line that matches the multiline string. For multiline strings (that is, strings that contain carriage returns), when defining a regular expression, you need to set the multiline tag m, such as/myreg ex/m

\b The meta-character matches the dividing position of the word, in essence, the position of the word is located between a word character and a non-word character.

\b The meta-character matches the non-dividing position of the word

4. Regular expressions are grouped in regular expressions, parentheses are metacharacters that represent the grouping of pattern strings, and expressions in parentheses are referred to as a sub-pattern or a child regular expression. The sub-mode is matched as a whole, not as part of a sub-pattern.

To reference a substring that matches a regular expression grouping, you can use the $ symbol followed by the ordinal of the grouping. The regular expression is as follows: Var myregexp =/(\d) (\w)/g represents a reference to the first grouping (\d), while the $ $ represents a reference to the second grouping (\w).   Also, in this regular expression, the global flag G is set to ensure that all substrings that match the pattern are replaced---not just the first matched substring. If you want to put var myString = "1999,2000,2001"; Replace with "The year 1999,the year 2000,the year 2001" Var Myregexp =/(\d{4})/g; myString = Mystring.replace (Myregexp, "the Year $");

14. Global match Mark G does not work in the search () method . The match () method of string is similar to the search () method, where the two method differs in that the search () method returns the location where the substring was found, and the match () method returns an array with each element containing a substring that matches the pattern string

15. Time, date, timer We need a standard time value to represent the same time in different locations, which is the coordinated World time (coordinated Universal TIME,UTC). Its predecessor was Greenwich Mean Time (Greenwich Mean time,gmt) The Date object in JavaScript provides a number of methods to support UTC time. such as the setUTCHours () method

A one-time timer that only needs to use the SetTimeout () method of the Window object Window.settimeout ("Your JavaScript code", Milliseconds_delay) the first parameter is the executed code, The second parameter is the time of the timer delay, in milliseconds, which returns a value that is the timer ID to stop before the timer is triggered, which can be used with the Window.cleartimeout () method, which receives only one parameter, that is, by settimeout () The SetInterval method returns a unique timer ID number for the interval timer, which can be used with the () method and the Clearinterval () method, similar to the one-time timer parameter

7 Types of Errors common in 16javaScript

1 "Variable not defined 2" case sensitive 3 "mismatched curly braces 4" connection string missing + 5 "assignment instead of equality 6" mismatched parentheses 7 "mistakenly consider the method property, or the property is mistaken for the method

17. the key to using cookies is to use the cookie attribute of the Document object, use cookie properties, create a cookie in JavaScript code, or access the data in the cookie.

Cookie string, when creating a cookie, you need to create a cookie string that contains 6 substrings to set: Name, value, expires (Expiration time), path, domain (field) , Secure (security), where the latter 4 substrings are available first. In a cookie value string, a semicolon cannot be included in a value string because a semicolon is used as a delimiter in a different part of a cookie string. If you do not set an expiration time, the default browser is disabled after it is closed, which is the session cookie

The Escape () function and the unescape () function encode and decode special characters Fushing. The Escape () function converts non-alphabetic or numeric characters to the corresponding hexadecimal encoding in the Latin-1 character set and adds a percent-semicolon (%) character before encoding.

18.DHTML events in IE Browser when an event is triggered in IE, IE will generate a global object event that contains the data associated with the triggered event.   The Type property of the Event object returns a string containing the name of the events, whether IE or FF browsers support the Type property, except that the method to access the Type property is different Window.event.type= "" The Srcelement property is another very useful property provided by the event object that returns the HTML element that receives the current event.

Other Browser event object non IE browser does not track the global object event that is currently triggering events, instead, non-IE browsers require the web developer to pass the event object as a parameter in the code to the event handler.   The event parameter contains a reference to the current event object. When an event is triggered, it is useful to know which HTML element the event is triggered on. For IE, you can use the Srcelement property to refer to the HTML element that triggered the current event. However, other browsers do not support this property, and for non-IE browsers, you should use the target property, like the Srcelement property in IE, to refer to the HTML element that receives the current event

Common CSS properties color foreground colors such as font color background-color background color background-image:url background picture font-family set text font font-size font size FONT-WEIHGT: Bold to display text in bold font-style:italic the text in italics text-decoration:underline; underline text Visibility:hidden: Hidden element visible Display This property will appear in a blank area Display:none hidden elements will be removed from the document flow block displayed inline in row layout mode

To make an element take absolute positioning as long as the position property of the element is set to absolute to make a relative positioning of an element, simply set the position property of the element to relative, which is used to locate The CSS key property of the element is the left property and the top property

Use JavaScript to change the Style object property as follows: OHtmlElement.style.cssProperty = value; Typically, the name of a CSS property is the same as the name of the property in the CSS file, such as color, but, in some cases, the CSS property's name is slightly different from its name in the CSS file, and a typical exception is a CSS property that contains a hyphen (-). For CSS properties that contain a hyphen (-), you need to remove the hyphen and change the first letter after the hyphen to uppercase. When you use a Style object to access the style properties of an element, you can access only the inline style properties of the element. For style properties in the <style/> tag, you cannot access it through the style object

Modifying the Class Property Ohtmlelement.classname = Snewclassname; using it to modify the style of an element has two benefits, first, it reduces the number of JavaScript code that needs to be written, and second, You can extract the style settings of an element from the JavaScript code and place it in a separate CSS file.

Moving elements is similar to using a style object to set element styles, using JS to move elements, you can use the Position property to change how elements are positioned (that is, relative or absolute), or you can use the left and top properties to set the meta-genus to the specified location. The DOM model in modern browsers exposes the offsettop and Offsetleft properties of HTML elements. These two properties return the position offset relative to the parent element. The return value of the offsettop property and the Offsetleft property are numeric types, so it is easy to check whether the current position of the element is on the motion path of the animation.

19.XHTML There are some differences between actual HTML and XHTML, but XHTML does not add new elements and attributes to HTML. The following points are the main differences between XHTML and HTML: 1.XHTML requires that the first line at the beginning of the page must contain an XML declaration, such as <?xml version= ' 1.0 '?> 2. At the top of the page you must also provide a DTD declaration, It also indicates the version of the referenced DTD standard 3. A reference to the XML namespace containing the current HTML element must be included in the page 4. Because XML is case-sensitive, all XHTML tokens must use lowercase 5. In an XHTML document, you must include the

20.DOM

Basic DOM Objects

1. Each node in the nodes document is a

2. NodeList an array containing multiple node objects, typically used to represent the child nodes that an element contains

3. Namenodemap This object establishes a one by one mapping relationship between the node name and the node so that the node name can be accessed directly to the node advanced DOM object nodes can be divided into element nodes, attribute nodes, or plain text nodes document representing the root node of the documents DocumentType x The object representation of a DTD or schema for an ML document DocumentFragment a document fragment object, which is an incomplete document object that is used to temporarily store fragments of documents that are not joined to the DOM tree EntityReference Represents an entity reference in an XML document that represents an element in a document ATTR represents an attribute of an element in a document ProcessingInstruction represents a processing instruction Comment represents a comment Text in an XML document or an HTML document Represents an object representation of a CDATA section in a cdatasection XML document that constitutes a child node of a constituent element entity represents a non-resolved entity defined in the DTD notation the body surface is defined in the DTD

Document Object method: Returns a collection of elements or elements 1.getElementById (idname) returns a reference to the specified ID element node object in the document 2.getElementsByTagName (tagname) returns an array of objects, To refer to a particular element in the collection, you must also specify the index value of the element in the collection, which returns the element of the specified index value through the collection's item () method.

DocumentElement returns a reference to the topmost element of the document (that is, the root element, such as the

The element object contains only one property tagname returns the tag name of the current node

node object: Navigating in the document tree 1.firstChild returns the first node in the Child Nodes list (childNodes) of the element 2.lastChild returns the last node in the list of child nodes of element 3. PreviousSibling in the sibling child node, return the previous sibling node of the current child node 4.nextSibling in the sibling child node, return the last sibling node of the current child node 5.ownerDocument returns the root node 6 of the document that contains the current node. ParentNode returns the parent node of the current node in the tree structure 7.nodeName returns the name of the current element node 8.nodeType returns a number that represents the type of the current node text node 3 This is useful for distinguishing between different browsers using 9.nodeValue The value of the current node returned as plain text   It's worth noting that, for Firefox,opera and Safari browsers, the difference between these browsers is that the whitespace between HTML tags and tags is also considered a text node, so for Firefox, The opera and Safari browser,<body/> nodes also contain a blank text node

Node Object method: Add and remove elements from the document 1.appendChild (NewNode) adds a new node newNode to the end of the child node list, which returns a reference to the new Insert Node Object 2. CloneNode (Clonechildren) returns a copy of the current node that receives a Boolean value as a parameter, and if the value of this parameter is true, clones the current node and all its child nodes, and if the value of this parameter is false, only the current node is cloned and its child nodes are not included. 3.hasChildNodes () checks if the current node contains child nodes, and if there are child nodes, returns a true value of 4.insertBefore (Newnode,referencenode) before the specified Referencenode node. Insert a new node NewNode, which returns a reference to the new Insert Node Object 5.removeChild (Childnode) from the node object's child nodes list, removing the child nodes specified by the parameter Childnode, The method returns a reference to all deleted node objects 6.replaceChild (Newchild,oldchild) replaces the specified child node of the parameter Oldchild with the new node specified by the parameter newChild, which returns a reference to the replaced Node object.

Method of document object: Adding and removing elements from documents

1.createElement (elementname) creates a new element based on the tag name specified by the elementname parameter. The method returns a reference to the object of the newly created element, 2.createTextNode (text) creates a text node with the text specified by the parameter text, and returns a reference to the newly created text node. 3.createAttribute (AttributeName) creates a property with the name specified by the parameter AttributeName and returns a reference to the newly created attribute node object.

The attribute method of element object 1.getAttribute (AttributeName) Returns the value of the property specified by the parameter AttributeName 2.setArrtibute (attributename,value) Set the value of the AttributeName property to the value specified by the parameter value 3.remvoeAttribute (attributename) to remove the value of the AttributeName property and revert it to the default value

property of the event object 1.bubbles A logical value that indicates whether event bubbling is allowed (that is, events are passed up from one underlying element to the previous layer) 2.cancelable a logical value that indicates whether the default behavior of the event can be canceled 3.currentTarget Represents the element node that the current event points to 4.eventPhase a numeric value of 5.target that represents the current stage of the event stream (only for DOM-enabled browsers) This property represents the element object that raised the current event, and in the Dom's event model, the text node also triggers event 6 in the DOM. TimeStamp (only for Firefox browsers) indicates the time that the event occurred 7.type represents the name of the current event in addition, the DOM event model introduces a MouseEvent object specifically designed to handle the various events raised by mouse actions.

The properties of the MouseEvent object 1.altKey A logical value that indicates whether the ALT key is pressed 2.button for mouse events When an event occurs, which indicates which button of the mouse is pressed 3.clientX to indicate when an event occurs The horizontal axis of the mouse pointer in the client area 4.clientY means that when the event occurs, the mouse pointer is in the client area of the ordinate 5.ctrlKey a logical value, indicating when the event occurs when the CTRL key is pressed 6.metaKey a logical value, indicating when the event occurs, Whether the META key is pressed 7.relatedTarget (only for DOM-enabled browsers) in the DOM event model, the text node can also trigger the MouseOver event, which represents the element node associated with the event, Similar to the Event.toelement property in IE and the event.fromelement attribute 8.screenX means that when an event occurs, the mouse pointer is relative to the horizontal axis of the computer screen area, and 9.screenY indicates that when the event occurs, The mouse pointer is a logical value relative to the ordinate 10.shiftKey in the computer screen area, indicating whether the SHIFT key is pressed when the event occurs

21.JavaScript and XML XSLT (extensible Stylesheet Language Transformations, extensible style Translation language) formats an XML document as an HTML document XSLT is a template-based style translation language. It can reconstruct the contents of an XML document and convert it to the format we want. XSLT transformations allow different kinds of applications to exchange data. Using XSLT enables the same source document to generate several different views, so that the content of the Web site can be displayed on multiple devices.

The transformation of the XSLT requires two documents (one is an XML source document, another XSLT style sheet), and the result of the transformation will generate a new document. Typically, the result of a conversion is a new XML document or an HTML document

JS Getting Started classic notes