：Document Object Model DOM (Document Object Model) defines standard methods for accessing and processing HTML documents. DOM renders HTML documents as a tree structure (node tree) with elements, attributes, and text.
Some commonly used properties
2.1 Get elements by ID
(1) Syntax:
("id");
(2) Function: id refers to a person's ID card. We can find the tag by looking for the tag id, and then perform corresponding operations.
(3) Note: Don’t forget to write a document!
2.2 innerHTML attributes
(1) Syntax:
="Hello World"
(2) Function: mainly to obtain or replace the content in the tag
(3) Example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 >javascript</H2>
<p> JavaScript is a simple scripting language based on object and event driven. It is embedded in HTML documents and is interpreted and executed by the browser, generating dynamic display effects on the web page and implementing user interaction functions. </p>
<script type="text/javascript">
var mychar=("con");
("Original title:"++"<br>"); //Output the original h2 tag content
="Hello World!";
("Modified title:"+); //Output the modified h2 tag content
</script>
</body>
</html>
(4) Note: Object is the element object obtained, such as the element obtained through ("ID").
2.3 Change HTML style
(1) Syntax:
(2) Function: used to modify HTML style
(3) Example:
<body>
<h2 >I love JavaScript</H2>
<p> JavaScript enables web pages to display dynamic effects and implement user interaction functions. </p>
<script type="text/javascript">
var mychar= ("con");
="red";
="#ccc";
="300px";
</script>
</body>
(4) Note: Property has many styles, such as color, height, etc., which can be modified using this method. Don’t forget to add a semicolon to the properties after them.
2.4 Show and hide (display attribute)
(1) Syntax:
=value
(2) Function: Display and hiding are often seen on web pages, which is achieved by using the display attribute.
(3) Example:
<script type="text/javascript">
function hidetext()
{
var mychar = ("con");
="none";
}
function showtext()
{
var mychar = ("con");
="block";
}
</script>
(4) Note: The value of value is none and block, where none is not displayed, and block is displayed.
2.5 className attribute
(1) Syntax:
=classname
(2) Function: 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.
(3) Example:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className attribute</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>
</head>
<body>
<p > JavaScript enables web pages to display dynamic effects and implement user interaction functions. </p>
<input type="button" value="Add style" onclick="add()"/>
<p class="one">JavaScript enables web pages to display dynamic effects and implements user interaction functions. </p>
<input type="button" value="change appearance" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = ("p1");
="one";
}
function modify(){
var p2 = ("p2");
="two";
}
</script>
</body>
The above is the entire content of this article, I hope you like it.