First, understand the DOM
The Document Object Model DOM (Document Object Model) defines standard methods for accessing and manipulating HTML documents. DOM renders HTML documents as a tree structure (node tree) with elements, attributes and text.
Let's take a look at the following code:
Decompose HTML code into a hierarchy of DOM nodes:
HTML documents can be said to be a collection of nodes, three common DOM nodes:
1. Element nodes: <html>, <body>, <p>, etc. in the above figure are all element nodes, that is, tags.
2. Text node: The content displayed to the user, such as JavaScript, DOM, CSS and other text in <li>...</li>.
3. Attribute node: element attribute, such as the link attribute href="http://www.imooc.com" of the <a> tag.
See the code below:
<a href="http://www.imooc.com">JavaScript DOM</a>
2. Get element by ID
After learning HTML/CSS style, you all know that web pages are organized by tags, and the id attribute value of the tag is unique, just like each person has an ID number, as long as you can find the corresponding ID number through the ID number people. Then in the web page, we first find the tag by id, and then operate.
grammar:
document.getElementById(“id”)
Take a look at the code below:
result: null or [ object HTMLParagraphElement]
Note: The acquired element is an object. If we want to operate on the element, we need to pass its properties or methods.
Example error code:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>document.getElementById</title>
6 </head>
7 <body>
8 <p id="con">JavaScript</p>
9 <script type="text/javascript">
10 var mychar=document.getElementById("con");
11 document.write("result:"+mychar); //Output the obtained P tag.
12 </script>
13 </body>
14 </html>
Output result:
JavaScript Result: [object HTMLParagraphElement]
3. innerHTML attribute
The innerHTML property is used to get or replace the content of an HTML element.
grammar:
Object.innerHTML
Notice:
1.Object is the obtained element object, such as the element obtained by document.getElementById("ID").
2. Pay attention to writing, innerHTML is case-sensitive.
We get the <p> element through id="con", and output and change the content of the element. The code is as follows:
result:
Fourth, change the HTML style
HTML DOM allows JavaScript to change the style of HTML elements. How to change the style of HTML elements?
grammar:
Object.style.property=new style;
Note: Object is the obtained element object, such as the element obtained by document.getElementById("id").
Basic property sheet (property):
Note: This table is only a small part of CSS style properties, other styles can also be set and modified by this method.
Take a look at the code below:
Change the style of the <p> element, changing the color to red, the font size to 20, and the background color to blue:
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
result:
Five, show and hide (display property)
Display and hide effects are often seen in web pages, which can be displayset through properties.
grammar:
Object.style.display = value
Note: Object is the obtained element object, such as the element obtained by document.getElementById("id").
value value :
Take a look at the code below:
Sample code:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>display</title>
6 <script type="text/javascript">
7 function hidetext()
8 {
9 var mychar = document.getElementById("con");
10 mychar.style.display="none";
11 }
12 function showtext()
13 {
14 var mychar = document.getElementById("con");
15 mychar.style.display="block";
16 }
17 </script>
18 </head>
19 <body>
20 <h1>JavaScript</h1>
21 <p id="con">As a web developer, JavaScript is an essential tool if you want to provide beautiful web pages and a satisfying web experience for users. </p>
22 <form>
23 <input type="button" onclick="hidetext()" value="隐藏内容" />
24 <input type="button" onclick="showtext()" value="显示内容" />
25 </form>
26 </body>
27 </html>
Six, control class name (className attribute)
classNameThe attribute sets or returns the element's class attribute.
grammar:
object.className = classname
effect:
1. Get the class attribute of the element
2. Specify a css style for an element in the web page to change the appearance of the element
Take a look at the code below to get the class attribute of the <p> element and change the className:
result:
Sample code:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>className属性</title>
6 <style>
7 body{ font-size:16px;}
8 .one{
9 border:1px solid #eee;
10 width:230px;
11 height:50px;
12 background:#ccc;
13 color:red;
14 }
15 .two{
16 border:1px solid #ccc;
17 width:230px;
18 height:50px;
19 background:#9CF;
20 color:blue;
21 }
22 </style>
23 </head>
24 <body>
25 <p id="p1" > JavaScript enables web pages to display dynamic effects and interact with users. </p>
26 <input type="button" value="添加样式" onclick="add()"/>
27 <p id="p2" class="one">JavaScript makes the web page display dynamic effects and realize the function of interacting with the user. </p>
28 <input type="button" value="更改外观" onclick="modify()"/>
29
30 <script type="text/javascript">
31 function add(){
32 var p1 = document.getElementById("p1");
33 p1.className="one";
34 }
35 function modify(){
36 var p2 = document.getElementById("p2");
37 p2.className="two";
38 }
39 </script>
40 </body>
41 </html>
practise:
1. Define the "change color" function
hint: obj.style.color obj.style.backgroundColor
2. Define the function of "change width and height"
hint: obj.style.width obj.style.height
3. Define the function of "hidden content"
提示: obj.style.display="none";
4. Define the function of "display content"
提示: obj.style.display="block";
5. Define the "unset" function
Tip: Use the confirm() box to confirm whether to cancel the settings. If so, restore all the above settings to their original values, otherwise do not operate.
6. When the corresponding button is clicked, the corresponding operation is performed, and the corresponding event is added to the button
Specific code:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
5 <title>javascript</title>
6 <style type="text/css">
7 body{font-size:12px;}
8 #txt{
9 height:400px;
10 width:600px;
11 border:#333 solid 1px;
12 padding:5px;}
13 p{
14 line-height:18px;
15 text-indent:2em;}
16 </style>
17 </head>
18 <body>
19 <h2 id="con">JavaScript课程</H2>
20 <div id="txt">
21 <h5> JavaScript adds dynamic effects to web pages and implements functions that interact with users. </h5>
22 <p>1. Introduction to JavaScript, let you who don't know JS quickly understand JS. </p>
23 <p>2. Advanced JavaScript chapters, let you master the basic syntax, functions, arrays, events, built-in objects, BOM browser, and DOM operations of JS. </p>
24 <p>3. After completing the above two basic courses, in-depth study of JavaScript's variable scope, events, objects, motion, cookies, regular expressions, ajax and other courses. </p>
25 </div>
26 <form>
27 <!--When the corresponding button is clicked, the corresponding operation is performed, and the corresponding event is added for the button-->
28 <input type="button" value="改变颜色" onclick="aa()">
29 <input type="button" value="改变宽高" onclick="bb()">
30 <input type="button" value="隐藏内容" onclick="cc()" >
31 <input type="button" value="显示内容" onclick="dd()">
32 <input type="button" value="取消设置" onclick="ee()" >
33 </form>
34 <script type="text/javascript">
35 var txt=document.getElementById("txt");
36 //Define the "change color" function
37 function aa(){
38 txt.style.color="red";
39 }
40
41 //Define the function of "change width and height"
42 function bb(){
43 txt.style.width="30px";
44 txt.style.height="60px";
45 }
46
47 //Define "hidden content" function
48 function cc(){
49 txt.style.display="none";
50 }
51
52 //Define the function of "display content"
53 function dd(){
54 txt.style.display="block";
55 }
56
57 //Define the "unset" function
58 function ee(){
59 var message=confirm("Are you sure to cancel all settings?");
60 if(message==true){
61 txt.removeAttribute('style');
62 }
63 }
64
65
66 </script>
67 </body>
68 </html>
Run the screenshot:
