Today’s content:
1. JavaScript: 1. ECMAScript: 2. The eventCopy the codeDOM simple learning: To meet case requirements
Document. GetElementById (" ID value "): Get the Element object by the id of the Element * Manipulate the Element object: 1. Modify attribute values: 1. Which object is explicitly obtained? InnerHTML = innerHTML = innerHTML = innerHTML = innerHTML Get the element object. 2. Modify the body of the tag with the innerHTML attributeCopy the codeEvent simple learning
* Functions: Some code is triggered when some operations are performed on some components. * after my crystal was destroyed, I blamed my friends. * After the enemy crystal is destroyed, I praise myself. * How to bind event 1. Directly in the HTML tag, specify the event attribute (operation), attribute value is js code 1. <body> <img id="light" SRC ="img/off.gif" onclick="fun();" > <img id="light2" SRC ="img/off.gif"> <script> function fun(){alert(' I was hit '); Alert (' I've been clicked again '); } function fun2(){alert(){function fun2(){alert(); '); Var light2 = document.getelementById ("light2"); //2. Bind the event light2.onclick = fun2; Case 1: Light switch <! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Light switch </title> </head> <body> <img id="light" SRC ="img/off.gif"> <script> /* Rule: * If the light is on, switch the picture to OFF * If the light is off, switch the picture to on * Use the flag to do this */ //1. Var light = document.getelementById ("light"); var flag = false; // The light is off. Light.onclick = function(){if(flag){// If the light is on, then off light.src = "img/off.gif"; flag = false; }else{// If the light is off, turn on light.src = "img/on.gif"; flag = true; } } </script> </body> </html>Copy the codeBOM:
The Browser Object Model encapsulates the various components of the Browser as objects. 2. Composition: * Window * Navigator * Screen * History * Location: address bar object 3. Window object 1. Method 1. Pop-up related methods: Alert () displays an alert box with a message and a confirmation button. Confirm () displays a dialog box with a message and buttons to confirm and cancel. * If the user clicks on the OK button, the method returns true * If the user clicks on the cancel button, the method returns false Prompt () displays a dialog box that can prompt the user for input. * Return value: gets the value entered by the user. 2. * Who calls me, who DO I close open() Opens a new browser Window * Returns a new Window object 3. The timer related method setTimeout() calls a function or evaluates an expression after a specified number of milliseconds. * Parameters: 1. js code or method object 2. Millisecond value * Return value: unique identifier used to cancel timer clearTimeout() Cancel timeout set by setTimeout() method. SetInterval () calls a function or evaluates an expression at the specified interval in milliseconds. ClearInterval () cancels timeout set by setInterval(). Properties: 1. Get other BOM objects: History Location Navigator Screen: 2. * Window object does not need to be created. Window. method name (); * The window reference can be omitted. The method name (); Location: address bar object 1. Create (obtain) : 1. Window. Location 2. Reload () reloads the current document. Refresh 3. Property * href Settings or return the full URL. Create (get) : 1. window.history 2. History 2. Method: * back() loads the previous URL in the history list. * Forward () loads the next URL in the history list. * go(argument) loads a specific page in the history list. * Parameters: * Positive: forward several history records * Negative: Back several history records 3. Property: * Length Returns the number of urls in the current window history list.Copy the codeDOM:
The Document Object Model encapsulates the components of a markup language Document as objects. You can use these objects to perform DYNAMIC CRUD operations on markup language documents. * The W3C DOM standard is divided into three distinct sections: * Core DOM - Standard model for any structured Document * Document: Document object * Element: Element object * Attribute: Attribute object * Text: Text object * Comment: Comment object * Node: Node object, parent object of other 5 * XML DOM - Standard model for XML documents * HTML DOM - Standard Model for HTML documents * Core DOM model: * Document: Document object 1. Create (retrieve) : Use the window object in the HTML DOM model to retrieve 1.window.document 2. document 2. GetElementById () : Gets the Element object based on the id attribute value. 2. GetElementsByTagName () : Gets element objects based on the element name. The return value is an array. 3. getElementsByClassName(): Gets the element objects based on the Class attribute value. The return value is an array. 4. getElementsByName(): Gets the element objects based on the name attribute value. Create other DOM objects: createAttribute(name) createComment() createElement() createTextNode() 3. Attribute * Element: Element object 1. Get/create: Get and create from document 2. Methods: 1. RemoveAttribute () : delete attribute 2. SetAttribute () : setAttribute * Node: Node object, parent object of other 5 * features: all dom objects can be considered as a Node * methods: * CRUD dom tree: * appendChild() : Adds a new child node to the end of the node's child node list. * removeChild() : Removes (and returns) the specified children of the current node. * replaceChild() : Replaces a child node with a new node. * properties: * parentNode returns the parentNode of the node. * HTML DOM 1. Set and get the body of the tag: innerHTML 2. Div1.style. border = "1px solid red"; div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px"; 2. Define the style of the class selector in advance and set the value of the element's class property through the className property.Copy the codeEvent monitoring mechanism:
* Concept: the execution of some code is triggered when some component performs some action. * Events: Certain operations. For example: Click, double click, keyboard down, mouse moved * Event source: component. For example: button text input box... * Listener: code. * Register listeners: combine events, event sources, and listeners. When an event occurs on an event source, it triggers the execution of a listener code. * Common events: 1. Click event: 1. Onclick: click event 2. Ondblclick: double click event 2. Onblur: the element loses focus. Onfocus: the element gains focus. 3. Load event: 1. Onload: a page or an image is loaded. 4. Mouse events: 1. The onmouseDown mouse button is pressed. 2. The onmouseup mouse button is released. 3. Onmousemove The mouse is moved. 4. Onmouseover Moves the mouseover an element. 5. Onmouseout Move the mouse pointer away from an element. 5. Keyboard event: 1. Onkeydown A key is pressed. 2. Onkeyup A keyboard key is released. 3. Onkeypress A keyboard key is pressed and released. 6. Select and Change 1. The content of the onchange field is changed. 2. The onSelect text is selected. 7. Form event: 1. The onSubmit confirmation button is clicked. 2. The onReset button is clicked.Copy the code