Home > Developer > JavaScript
I. Review
First, let's review the DOM and events.
1, DOM
DOM is the most widely used in JavaScript, and most programming languages for Web development provide related implementations. Provides developers with a unified interface.
See the following example:
<Html> <pead> <title> demo </title> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> </pead> <body> <ul> <li> instructor li-English </li> <li> instructor Zhang-mathematics </li> <li> instructor Liu -Physical </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
After loading all the content on the page, use the getElementsByTagName () method to obtain the li element in the page, and then cyclically change the color of the li element to red.
Let's look at the second DOM example. The example will delete the second li element from the page.
<Html> <pead> <title> demo </title> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> </pead> <body> <ul> <li> instructor li-English </li> <li> instructor Zhang-mathematics </li> <li> instructor Liu -Physical </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Obtain the ul element of the parent node of the li element, and then use the removeChild () method to delete the specified li element under the ul element.
Of course, you can also directly use parentNode to directly obtain the parent node of the li element. The Code is as follows:
Copy codeThe Code is as follows:
Window. onload = function (){
// Add color to the Dom Element
Var li = document. getElementsByTagName ("li ");
For (var I = 0; I <li. length; I ++ ){
Li [I]. style. color = "red ";
}
// Delete the second li Element
// Var ul = document. getElementsByTagName ("ul") [0]; // The index starts from 0.
// Ul. removeChild (li [1]); // The index starts from 0.
Li [1]. parentNode. removeChild (li [1]); // The index starts from 0 and uses parentNode directly to obtain the parent node of the li element.
}
2. Events
An event is the glue that binds all user interactions in an application. DOM and events are the golden partner in JavaScript (haha, the ad word), which determines the fundamental form of modern Web applications.
See the following example:
<Html> <pead> <title> demo </title> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> </pead> <body> <ul> <li> instructor li-English </li> <li> instructor Zhang-mathematics </li> <li> instructor Liu -Physical </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In this example, after obtaining the li element, add events to the element cyclically and add onmouseover and onmouseout events. When sliding, the color is changed. When sliding out, the color is restored.
Events are complex and changeable. The previous example is the simplest, so there are basically no problems. In the future, we will encounter problems such as event bubbling, event transfer, and event cancellation.
3. DOM and events
DHTML is generated based on DOM and event interaction. The essence of DHTML is the interaction between JavaScript events and CSS attributes on DOM elements. DHTML means combining these two technologies and then doing it.
2. Simple object-oriented development
Let's first take a look at how JavaScript object-oriented is written. The following code shows the course name and teacher information in the school.
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The final result will be "instructor Li teaches English ."
In this example, a function is defined to output all course information. The Code is as follows:
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The final result will be output:
In this example, the value of the array calls the display () method.
The improvements are as follows:
In
Copy codeThe Code is as follows:
AllLecture. prototype. display = function (){
Var str = "";
For (var I = 0; I <this. lec. length; I ++ ){
Str + = this. lec [I] + "\ n ";
}
Return str;
}
In this. lec [I], call the display () method. Call display () to remove the array value (). The modified code is as follows:
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
You can also output the same results as the example.
This is a simple object-oriented development example. As JavaScript is gradually accepted by programmers, well-designed object-oriented code is becoming increasingly popular. In the subsequent notes, you will see more object-oriented program code.
Iii. Summary
This chapter reviews the DOM and events, and then explains object-oriented development through examples.
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
