Home > Developer > JavaScript
I learned about DOM today and made the following basic exercises ......
DOM is the abbreviation of Document Object Model. It uses JavaScript to operate DOM for DHTML development.
Objective: To achieve common DHTML effects by using JavaScript to operate Dom.
Reference Book: Zhang Xiaoxiang JavaScript web page development-experiential learning tutorial
I. Introduction to DOM:
1. DOM is the model of an HTML page. Every tag is used as an object. by calling the attributes and methods in DOM, JavaScript can edit the text box, layer, and other elements in the webpage.
Process control. For example, you can read the value in the text box and set the value in the text box by operating the DOM object of the text box.
2. DOM is programmed through events, attributes, and methods like WinForm.
3. CSS + JavaScript + DOM = DHTML (that is, dynamic HTML) is an extension of the HTML language. It can increase the presentation effects of documents and objects .)
Ii. Events:
1. Event: <body onmousedown = "alert ('haha ')"> when you click the mouse, run the code in onmousedown. There are too many codes with time event responses, so they are placed in a separate letter.
Medium:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function bodymousedown ()
{
Alert ("the webpage is broken. Please pay for it! ");
Alert ("funny! ");
}
</Script>
<Body onmousedown = "bodymousedown ()">
Note: The parentheses after bodymousedown cannot be dropped because it indicates that the bodymousedown function is called, rather than the response function of the onmousedown event is bodymousedown.
2. dynamically set events:
You can dynamically set the Event Response Function in the code, just like "btn. Click + =" in. Net.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function bodymousedown (){
Alert ("the webpage is broken. Please pay for it! ");
Alert ("funny! ");
}
Function f1 (){
Alert ("I am f1 ");
}
Function f2 (){
Alert ("I am f2 ");
}
</Script>
</Head>
<Body>
<Input type = "button" onclick = "document. ondblclick = f1" value = "associated Event 1"/>
<Input type = "button" onclick = "document. ondblclick = f2" value = "associated Event 2"/>
</Body>
</Html>
3. The window object represents the current browser window. window can be omitted when the properties and methods of the window object are used. For example, window. alert ('A') can be omitted to alert ('A ')
1) alert method. The message dialog box is displayed.
2) The confirm method displays the "OK" and "cancel" dialog boxes. If you press the "OK" button, true is returned; otherwise, false is returned.
If (confirm ("continue? "))
{
Alert ("OK ");
}
Else
{Alert ("canceled ");}
3) navigate to the specified address again: navigate ("http://www.microsoft.com /");
4) setInterval runs the Specified Code at intervals. The first parameter is the code string, the second parameter is the interval (in milliseconds), and the return value is the identifier of the timer. For example, setInterval ("alert ('hello')", 5000 );
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> welcome to my homepage </title>
<Script type = "text/javascript">
Function scroll (){
Var title = document. title;
Var firstch = title. charAt (0 );
Var leftstr = title. substring (1, title. length );
Document. title = leftstr + firstch;
} // The purpose is to scroll up the webpage title
SetInterval ("scroll ()", 500 );
</Script>
</Head>
<Body>
</Body>
</Html>
5) clearInterval cancels the scheduled execution of setInterval, which is equivalent to Enabled = False in Timer. Because setInterval can be set to multiple times, clearInterval must specify the identifier of the timer to be cleared, that is, the return value of setInterval. Var intervalld = setInterval ("alert ('hello')", 5000 );
ClearInterval (intervalld );
6) setTimeout is also scheduled, but not as scheduled as setInterval, but only once after the set time. clearTimeout is also the clearing time.
A good distinction: Interval is scheduled; Timeout is Timeout. For example, var timeoutld = setTimeout ("alert ('hello')", 2000 );
Case: The title bar is highlighted by a Trojan, that is, the browser's title text is rolled to the right every Ms. Tip: The title is document. title.
4. 1) onload: triggered when the webpage is loaded. the browser downloads the document while parsing and executing it. Some elements need to be operated during JavaScript execution. This element has not been loaded yet, in this case, the operation code should be put into the onload event of the body, or JavaScript can be put after the element. The onload event of an element is triggered when the element is loaded, and the onload in the body is fully loaded.
2) onunload: triggered when the webpage is closed (or left. Assign a value to "Window. event. returnValue" in the event (the warning message to be displayed), so that the confirmation message will pop up when the Window leaves (such as forward, backward, and close. For example, <body onbeforeunload = "Window. event. returnValue = 'Do you really want to quit posting? '">
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script type = "text/javascript">
// Showmodeldialog('htmlpage00000000htm'); // blocked
// Btn. value = "OK"; // error reported because the btn element has not been constructed
</Script>
</Head>
<Body onload = "btn. value = 'OK';" onbeforeunload = "window. event. returnValue = 'Do you really want to quit posting? The article will be lost! '; ">
<Input type = "button" id = "btn" value = "Modal Dialog Box" onclick = "showmodelessdialog('htmlpage?#htm')"/>
<Input type = "text"/>
<Textarea cols = "20" rows = "20"> </textarea>
</Body>
</Html>
5. Other events:
In addition to its unique attributes, there are also common HTML element events: onclick, ondblclick, onkeydown, and onkeyup) onkeypress, onmousedown, onmousemove, onmouseout ),
Onmouseover (move the mouse to the element range), onmouseup (release the mouse button), and so on.
3. properties of the window object
1. window. location. href = "http://www.sina.com.cn", redirect to the new address, the same effect as the navigate method. Window. location. reload () refresh the page.
2. window. event is a very important attribute used to obtain information when an event occurs. events are not limited to window object events. All element events can obtain relevant information through the event attribute.
1) altKey attribute, of the boot type, indicates whether the alt key is pressed when an event occurs. Similarly, the ctrlKey and shiftKey attributes are also supported, example <input type = "button" value = "click" onclick = "if (event. altKey)
{Alert ('alt click')} else {alert ('normal click')} "/>;
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
</Head>
<Body>
<Input type = "button" value = "href" onclick = "alert (location. href)"/>
<Input type = "button" value = "redirection" onclick = "location.href?'htmlpage1.htm'"/>
<Input type = "button" value = "click" onclick = "if (window. event. ctrlKey) {alert ('Press Ctrl ')} else {alert ('normal click')} "/>
<A href = "http://www.baidu.com" onclick = "alert ('Access prohibited! '); Window. event. returnValue = false; "> Baishi </a>
<Form action = "jing. aspx">
<Input type = "submit" value = "submit" onclick = "alert ('data is faulty! '); Window. event. returnValue = false; "/>
</Form>
</Body>
</Html>
2) coordinates of the mouse in the client zone when events of clientX and clientY occur; coordinates of the mouse on the screen when events of screenX and screenY occur; when an offsetX or offsetY event occurs, the cursor is relative to the coordinates of the event source (such as The onclick triggered when a button is clicked.
3) returnValue attribute. If you set returnValue to false, the processing of the default event is canceled.
4) srcElement: obtains the event source object.
5) KeyCode: the key value at the time of occurrence
6) button: the mouse button at the time of occurrence. 1 indicates the left button, 2 indicates the right button, and 3 indicates the left and right keys. <Body onmousedown = "if (event. button = 2) {alert ('prohibit copycopy')}">
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
