Home > Developer > JavaScript
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>
<Head>
<Title> demo </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
/*
Example DOM element operation
*/
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 ";
}
}
</Script>
</Head>
<Body>
<Ul>
<Li> instructor li-English </li>
<Li> instructor Zhang-mathematics </li>
<Li> instructor Liu-physics </li>
</Ul>
</Body>
</Html>
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:<Html>
<Head>
<Title> demo </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
/*
Example DOM element operation
*/
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.
}
</Script>
</Head>
<Body>
<Ul>
<Li> instructor li-English </li>
<Li> instructor Zhang-mathematics </li>
<Li> instructor Liu-physics </li>
</Ul>
</Body>
</Html>
2. EventsAn 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: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
}
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 eventsDHTML 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 developmentLet'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.<Html>
<Head>
<Title> demo </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
/*
Example DOM element operation
*/
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 ";
Li [I]. onmouseover = function (){
This. style. color = "blue ";
}
Li [I]. onmouseout = function (){
This. style. color = "red ";
}
}
}
</Script>
</Head>
<Body>
<Ul>
<Li> instructor li-English </li>
<Li> instructor Zhang-mathematics </li>
<Li> instructor Liu-physics </li>
</Ul>
</Body>
</Html>
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:<Script type = "text/javascript">
/*
The example uses an object combination to represent a course in a school.
'Lecture' class
Use name and teacher as parameters
*/
Function Lecture (name, teacher ){
This. name = name;
This. teacher = teacher;
}
// A method of the 'lecture' class, used to generate a piece of information
Lecture. prototype. display = function (){
Return this. name + "teach" + this. teacher +. ";
}
// Use new to construct a new function and call the display method.
Var L = new Lecture ("instructor Li", "English ");
Var L_msg = L. display ();
Alert (L_msg );
</Script>
<Script type = "text/javascript">
/*
The example uses an object combination to represent a course in a school.
'Lecture' class
Use name and teacher as parameters
*/
Function Lecture (name, teacher ){
This. name = name;
This. teacher = teacher;
}
// A method of the 'lecture' class, used to generate a piece of information
Lecture. prototype. display = function (){
Return this. name + "teach" + this. teacher +. ";
}
// Use new to construct a new function and call the display method.
Var L = new Lecture ("instructor Li", "English ");
Var L_msg = L. display ();
// Alert (L_msg );// Define a new 'alllecture' class
// Use 'lec' as the parameter. lec is an array.
Function AllLecture (lec ){
This. lec = lec;
}
// A method of the 'alllecture' class to generate all course information
// The 'lec' needs to be output cyclically'
AllLecture. prototype. display = function (){
Var str = "";
For (var I = 0; I <this. lec. length; I ++ ){
Str + = this. lec [I] + "\ n ";
}
Return str;
}
// Use new below to create a new function to generate all the information
// Function parameters are arrays.
// Use the 'lecture' class to generate the array value.
Var B = new AllLecture ([New Lecture ("instructor Li", "English "). display (), new Lecture ("instructor Zhang", "Mathematics "). display (), new Lecture ("instructor Liu", "physical "). display ()]);
Var B _str = B. display ();
Alert (B _str );
</Script>
The final result will be output:
In this example, the value of the array calls the display () method.
The improvements are as follows:
In
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:
<Script type = "text/javascript">
/*
The example uses an object combination to represent a course in a school.
'Lecture' class
Use name and teacher as parameters
*/
Function Lecture (name, teacher ){
This. name = name;
This. teacher = teacher;
}
// A method of the 'lecture' class, used to generate a piece of information
Lecture. prototype. display = function (){
Return this. name + "teach" + this. teacher +. ";
}
// Use new to construct a new function and call the display method.
Var L = new Lecture ("instructor Li", "English ");
Var L_msg = L. display ();
// Alert (L_msg );// Define a new 'alllecture' class
// Use 'lec' as the parameter. lec is an array.
Function AllLecture (lec ){
This. lec = lec;
}
// A method of the 'alllecture' class to generate all course information
// The 'lec' needs to be output cyclically'
AllLecture. prototype. display = function (){
Var str = "";
For (var I = 0; I <this. lec. length; I ++ ){
// Str + = this. lec [I] + "\ n ";
Str + = this. lec [I]. display () + "\ n"; // put display () HERE TO CALL
}
Return str;
}
// Use new below to create a new function to generate all the information
// Function parameters are arrays.
// Use the 'lecture' class to generate the array value.
// Var B = new AllLecture ([new Lecture ("Miss Li", "English "). display (), new Lecture ("instructor Zhang", "Mathematics "). display (), new Lecture ("instructor Liu", "physical "). display ()]);
Var B = new AllLecture ([new Lecture ("Miss Li", "English"), new Lecture ("Miss Zhang", "Mathematics"), new Lecture ("Miss Liu ", "Physical")]);
Var B _str = B. display ();
Alert (B _str );
</Script>
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. SummaryStart 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
