js DOM study notes_javascript skills

Today I learned DOM and did the following basic exercises...
DOM is the abbreviation of Document Object Model; use JavaScript to operate DOM for DHTML development.
Learning goal: Be able to use JavaScript to operate Dom to achieve common DHTML effects.
Reference book: Zhang Xiaoxiang's "JavaScript Web Development - Experiential Learning Tutorial"
1. Introduction to DOM:
1. DOM is the model of an HTML page. Each tag is treated as an object. JavaScript can programmatically control text boxes, layers and other elements in web pages by calling attributes and methods in the DOM. For example, by manipulating the DOM object of the text box, you can read and set the value in the text box.
2. DOM, like WinForm, can be programmed through events, properties, and methods.
3. CSS JavaScript DOM=DHTML (i.e. dynamic HTML, an extension of the HTML language. It can increase the presentation effect of documents and objects.)
2. Events:
1. Event:

The code in onmousedown is executed when the mouse is clicked. If there is too much code to respond to time events, put it in a separate function
:

Copy the code The code is as follows:

Please note: the brackets after bodymousedown cannot be lost, because it means calling the bodymousedown function, not the response function of the onmousedown event is bodymousedown.
2. Dynamically set events:
The event response function can be dynamically set in the code, just like "btn.Click=" in .Net.

Copy code The code is as follows:

.org/1999/xhtml">



> ;

3. window object Represents the current browser window. When using the properties and methods of the window object, you can omit the window. For example, window.alert('a') can be omitted to alert('a')
1) The alert method pops up a message dialog box
2) The confirm method displays the "OK" and "Cancel" dialog boxes. If the [OK] button is pressed, it returns true, otherwise it returns false.
if(confirm("Continue?"))
｛
alert("Confirm");
｝
else
{ alert("Cancel");}
3) Navigate again to the specified address: navigate("http://www.microsoft.com/");
4) setInterval executes the specified code every once in a while, and the first parameter is the string of the code , the second parameter is the interval time (unit: milliseconds), and the return value is the timer ID. For example: setInterval("alert('hello')",5000);

Copy code The code is as follows:

5) clearInterval cancels the scheduled execution of setInterval, which is equivalent to Enabled=False in Timer. Because setInterval can set multiple timings, clearInterval must specify the identifier of the timer to clear, which is the return value of setInterval. var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout is also executed regularly, but it is not executed regularly like setInterval, but after the set time Only executed once, clearTimeout is also the clearing time.
It’s easy to distinguish: Interval means timing; Timeout means timeout. For example: var timeoutld=setTimeout("alert('hello')",2000);
Case: Realize the revolving effect of the title bar, that is, the title text of the browser scrolls to the right every 500ms. Tip: The title is the document.title attribute.
4. 1) onload: Triggered when the web page is loaded. The browser downloads the document while parsing and executing it. It may happen that a certain element needs to be operated when JavaScript is executed. This element has not been loaded. In this case, the operation must be performed. Put the code in the onload event of the body, or you can put the JavaScript after the element. The element's onload event is triggered when the element itself is loaded, and the onload in the body is when all loading is completed.
2) onunload: Triggered after the web page is closed (or left). Assign a value to "Window.event.returnValue" in the event (the warning message to be displayed), so that a confirmation message will pop up when the window is left (such as forward, backward, closed). For example:

Copy code The code is as follows:

textarea> <br> <br> <br>

5. Other events:
In addition to unique attributes, there are of course general HTML elements Events: onclick (click), ondblclick (double-click), onkeydown (key press), onkeyup (key release), onkeypress (click button), onmousedown (mouse press), onmousemove (mouse move), onmouseout (mouse leaves) element range),
onmouseover (mouse moves to element range), onmouseup (mouse button release), etc.
3. Properties of the window object
1. window.location.href="http://www.sina.com.cn", redirecting to a new address, has the same effect as the navigate method. window.location.reload() refreshes the page.
2. window.event is a very important attribute, used to obtain information when an event occurs. Events are not limited to events of the window object. Events of all elements can obtain relevant information through the event attribute.
1) altKey attribute, boot type, indicates whether the alt key is pressed when an event occurs. Similar attributes include ctrlKey and shiftKey. For example, ;

Copy code The code is as follows:

baidu

> ;

2) clientX, clientY are the coordinates of the mouse in the client area when events occur; screenX, screenY are the coordinates of the mouse on the screen when events occur; offsetX, offsetY are when events occur relative to the mouse relative to the event source (for example, onclick is triggered when a button is clicked) coordinates.
3) returnValue attribute. If returnValue is set to false, the processing of the default event will be cancelled.
4) srcElement: Get the event source object
5) KeyCode: The key value when the time occurs
6) button: The mouse button when the time occurs, 1 is the left button, 2 is the right button, 3 is the left button keys simultaneously.