Getting Started with JavaScript three

BOM and dom********JavaScript is divided into Ecmascript,dom,bom. The BOM (Browser object model) refers to the browser's objects models, which make JavaScript capable of "talking" to the browser. The DOM (Document Object model) refers to all the elements of an HTML document that can be accessed by using it. The Window object is one of the top-level objects of the client-side JavaScript, and since the Window object is a common ancestor of most other objects, the Window object's reference can be omitted when invoking the methods and properties of the Window object. For example: Window.document.write () can be simply written as: document.write (). Window object (BOM) *******window objects are supported by all browsers. He represents the browser window. *If the document contains a frame (frame or iframe label), the browser creates a Window object for the HTML document and creates an additional window object for each frame. *There is no public standard applied to the Window object, but the object is supported by all browsers. All JavaScript global objects, functions, and variables automatically become members of the Window object. A global variable is a property of a Window object. A global function is a method of a Window object. The next HTML DOM document is also one of the properties of the Window object. Some common window methods: Window.innerheight-the internal height of the browser window window.innerwidth-internal width of the browser window window.open ()-Open a new Window window.close ()-Close the current windowChild object of Window ******navigator object (Learn it) * *A Browser object that can be used to determine the browser the user is using, including information about the browser. Navigator.appname//Web browser full nameNavigator.appversion//detailed string for Web browser vendor and versionNavigator.useragent//The majority of client informationNavigator.platform//the operating system where the browser is running**screen object (Learn it) * *screen objects, not commonly used. Some properties: Screen.availwidth-available screen widths Screen.availheight-the screen height available**history object (Learn it) * *the Window.history object contains the history of the browser. Browsing history objects, including the user's browsing history of the current page, but we can not see the specific address, it is simple to forward or backward a page. History.forward ()//forward one pageHistory.back ()//back one page**location Object * *The window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page. Common Properties and methods: Location.href get Urllocation.href= "URL"//jump to the specified pagelocation.reload () reload page* * Popup Box * *You can create three message boxes in JavaScript: A warning box, a confirmation box, and a prompt box. *Warning Box warning boxes are often used to ensure that users can get some information. When the warning box appears, the user needs to click the OK button to continue the operation. Syntax: Alert ("Have you seen it?" ");*The Confirm box (understand) confirmation box is used to enable users to verify or accept certain information. When the confirmation box appears, the user needs to click the OK or Cancel button to continue the operation. If the user clicks Confirm, then the return value istrue。 If the user clicks Cancel, the return value isfalse. Syntax: Confirm ("Are you sure?" ")*The Prompt box (understanding) prompt is often used to prompt the user to enter a value before entering the page. When the prompt box appears, the user needs to enter a value and then click the Confirm or Cancel button to continue the manipulation. If the user clicks Confirm, then the return value is the value entered. If the user clicks Cancel, the return value isNULL. Syntax: Prompt ("Please enter below", "your Answer")Timing RELATED * * * *by using JavaScript, we can execute code after a certain interval of time, rather than executing it immediately after the function is called. We call this a timing event. SetTimeout () Syntax:varT=settimeout ("JS statement", milliseconds) the SetTimeout () method returns a value. In the above statement, the value is stored in a variable named T. If you want to cancel the setTimeout (), you can use the variable name to specify it. The first argument to SetTimeout () is a string containing a JavaScript statement. This statement may be such as"Alert (' 5 seconds! ')", or a call to a function such as alertmsg () ". The second parameter indicates how many milliseconds from the current to execute the first parameter (1000 milliseconds equals one second). Cleartimeout () Syntax: Cleartimeout (settimeout_variable) For example://executes the corresponding function once after a specified time var timer = setTimeout (function () {alert ( 123);}, 3000)//cancels the SetTimeout setting cleartimeout (timer); the setinterval () SetInterval () method invokes the function or evaluates the expression in milliseconds, according to the specified period. The SetInterval () method keeps calling functions until Clearinterval () is called or the window is closed. The ID value returned by SetInterval () can be used as a parameter to the Clearinterval () method. Syntax: SetInterval ("JS statement", the interval) returns a value that can be passed to Window.clearinterval () to cancel the periodic execution of code. The Clearinterval () clearinterval () method cancels the timeout set by the SetInterval (). The parameter of the Clearinterval () method must be the ID value returned by SetInterval (). Syntax: clearinterval (ID value returned by setinterval) For example://every time the corresponding function is executed var timer = setinterval (function () {console.log (123);}, 3000)//Cancel SetInterval Settings clearinterval (timer); *********dom********dom (document Object Model) is a set of methods for abstracting and conceptualizing the contents of a document. When a Web page is loaded, the browser creates a Document object model for the page. The HTML DOM model is constructed as a tree of objects. https://images2018.cnblogs.com/blog/867021/201803/867021-20180312215352312-132101897.png* The DOM standard specifies that each component in an HTML document is a node: a document node (the Documents object): Represents the entire document element node (element Object): Represents an Element (label) text node (text object): A text attribute node that represents an element (label) (Attribute object): Represents an attribute, an element (label) has a property comment is a comment node (Comment object) *javascript can create dynamic html:javascript through the DOM to change all the HTML in the page Element JavaScript can change all HTML properties in the page JavaScript can change all CSS style JavaScript on the page to react to all the events in the page * * * Find tags ****** direct lookup * * document.getElementById ("ID Name") gets a label based on the ID document.getelementsbyclassname ("Class name") Gets the document.getelementsbytagname based on the class property ("Label name"gets the label collection according to the tag name Note: The JS code that involves DOM manipulation should be placed in the document's location. * * Indirect Find **parentelement parent node tag element children all child tags firstelementchild first child label element Lastelem Entchild the last child tag element nextelementsibing the next sibling tag element previouselementsibling the previous sibling Tag element node action ****** create Node * * Syntax: createelement (sign) Example: var divelement = document.createelement ("Div"); * * Add node * * Syntax: Append a child node (as the last child node) somenode.appendchild (newnode); Put the added node in front of a node. Somenode.insertbefore (NewNode, a node); Example: Var imgele=document.createelement ("IMG"); Imgele.setattribute ("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg ");varD1ele = document.getElementById ("D1");d 1ele.appendchild (Imgele);* * Delete node * *syntax: Gets the element to delete, called by the parent element to delete. RemoveChild (the node to be deleted)* * Attribute Node * *gets the value of the text node:varDivele = document.getElementById ("D1") DivEle.innerTextdivEle.innerHTML Set the value of the text node:varDivele = document.getElementById ("D1") Divele.innertext= "1"divele.innerhtml= "<p>2</p>"attribute OperationvarDivele = document.getElementById ("D1");d Ivele.setattribute ("Age", "18") Divele.getattribute ("Age") Divele.removeattribute ("Age")//your own properties can also be directly. property names to get and setimgEle.srcimgEle.src= "..." * * Get value action * *syntax: Elementnode.value applies to the following tags:. Input.select.textareavarIele = document.getElementById ("I1"); Console.log (iele.value);varSele = document.getElementById ("S1"); Console.log (sele.value);varTEle = document.getElementById ("T1"); Console.log (tele.value);**class of Operation * *ClassName gets all the style class names (strings) Classlist.remove (CLS) deletes the specified class Classlist.add (CLS) Add Class Classlist.contains (CLS) existence returns True, Otherwise, the return Falseclasslist.toggle (CLS) exists on the delete, otherwise added* * Specify CSS Actions * *Obj.style.backgroundColor= "Red"JS Operation CSS Properties of the law:1for CSS properties that do not have a horizontal line, you can use the style directly. Property name. such as: Obj.style.marginobj.style.widthobj.style.leftobj.style.position2for CSS attributes that contain a middle line, change the first letter in the back of the middle horizontal line to uppercase. such as: Obj.style.marginTopobj.style.borderLeftWidthobj.style.zIndexobj.style.fontFamilyEvent * * *HTML4.0one of the new features is the ability to enable HTML events to trigger actions in the browser, such as starting a piece of JavaScript when the user clicks on an HTML element. The following is a list of attributes that can be inserted into an HTML tag to define an event action* * Common Events * *onclick an event handle that is invoked when a user taps an object. OnDblClick an event handle that is called when the user double-clicks an object.               The onfocus element gets the focus.               The onblur element loses focus.             Scenario: For form validation, when a user leaves an input box, the Representative has already entered it and we can verify it. The contents of the onchange domain are changed.          Scenario: Typically used for form elements that are triggered when the element content is changed. (select linkage) onkeydown A keyboard key is pressed. Application scenario: When the user presses the ENTER key in the last input box, the form submits. onkeypress A keyboard key is pressed and released. OnKeyUp a keyboard key is released. OnLoad a page or an image to finish loading. OnMouseDown the mouse button is pressed. OnMouseMove Mouse is moved. onMouseOut the mouse to move away from an element. onmouseover mouse moves over an element. Onselect occurs when the text in the text box is selected. OnSubmit the Confirm button is clicked, the object used is the form. * * Binding Method * *Way One:<div id= "D1" onclick= "ChangeColor (this);" > Point Me </div><script>functionChangeColor (ths) {Ths.style.backgroundColor= "Green"; }</script>Note: This is an argument that represents the current element that triggered the event. The ths in the function definition process is a formal parameter. Way two:<div id= "D2" > Point me </div><script>varDivEle2 = document.getElementById ("D2"); Divele2.onclick=function () {     This. innertext= "hehe"; }</script>

Getting Started with JavaScript three