1.DOM: Document Object Model DOM defines the standard way to access and process HTML documents. The DOM renders an HTML document as a tree structure (a node tree) with elements, attributes, and text.
Some of the commonly used properties of 2.DOM
2.1 Getting elements by ID
(1) Syntax:
Copy Code code as follows:
document.getElementById ("id");
(2) Function: ID on a person's ID, we can find the ID of the tag to find the label, and then do the appropriate operation.
(3) Note: Don't forget to write document!
2.2 innerHTML Properties
(1) Syntax:
Copy Code code as follows:
Obgect.innerhtml= "Hello World"
(2) Function: mainly to the contents of the label to get or replace
(3) Examples:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>innerHTML</title>
<body>
<p> JavaScript is an object-based, event-driven simple scripting language, embedded in the HTML document, the browser is responsible for interpretation and execution, on the Web page to produce dynamic display effects and user interaction functions. </p>
<script type= "Text/javascript" >
var Mychar=document.getelementbyid ("Con");
document.write ("original title:" +mychar.innerhtml+ "<br>"); Output original H2 label content
Mychar.innerhtml= "Hello world!";
document.write ("Revised title:" +mychar.innerhtml); H2 label content after output modification
</script>
</body>
(4) Note: object is an element object that gets, such as an element obtained by document.getElementById ("ID").
2.3 Changing the HTML style
(1) Syntax:
Copy Code code as follows:
(2) Role: for modifying HTML styles
(3) Examples:
Copy Code code as follows:
<body>
<p> JavaScript enables Web pages to display dynamic effects and interact with users. </p>
<script type= "Text/javascript" >
var mychar= document.getelementbyid ("con");
Mychar.style.color= "Red";
Mychar.style.backgroundcolor= "#ccc";
Mychar.style.width= "300px";
</script>
</body>
(4) Note: The property has a lot of styles, such as color,height and so on can be modified in this way, in one is not to forget the attribute after all to add a semicolon.
2.4 Show and hide (display property)
(1) Syntax:
Object.style.display=value
(2) Function: The Web page often see display and hidden, is to use display properties to achieve
(3) Examples:
Copy Code code as follows:
<script type= "Text/javascript" >
function HideText ()
{
var MyChar = document.getElementById ("con");
Mychar.style.display= "None";
}
function Showtext ()
{
var MyChar = document.getElementById ("con");
mychar.style.display= "Block";
}
</script>
(4) Note: value is none and block, none of which does not display content, and block is displayed
2.5 ClassName Properties
(1) Syntax:
Copy Code code as follows:
Object.classname=classname
(2) Function: 1. Gets the class attribute of the element; 2. Specify a CSS style for an element in the Web page to change the appearance of the modified element
(3) Examples:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>classname Properties </title>
<style>
body{font-size:16px;}
. one{
border:1px solid #eee;
width:230px;
height:50px;
Background: #ccc;
color:red;
}
. two{
border:1px solid #ccc;
width:230px;
height:50px;
Background: #9CF;
Color:blue;
}
</style>
<body>
<p id= "P1" > JavaScript enables Web pages to display dynamic effects and interact with users. </p>
<input type= "button" value= "Add Style" onclick= ' Add () '/>
<p id= "P2" class= "one" >javascript enables Web pages to display dynamic effects and interact with users. </p>
<input type= "button" value= "Change Appearance" onclick= "Modify ()"/>
<script type= "Text/javascript" >
function Add () {
var P1 = document.getElementById ("P1");
P1.classname= "one";
}
function Modify () {
var P2 = document.getElementById ("P2");
P2.classname= "two";
}
</script>
</body>
The above is the entire content of this article, I hope you can enjoy.