1.DOM: 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.
2. Some commonly used properties of DOM
2.1 Get elements by ID
(1) Syntax:
The code copy is as follows:
document.getElementById("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:
The code copy is as follows:
Obgect.innerHTML="Hello World"
(2) Function: mainly to obtain or replace the content in the tag
(3) Example:
The code copy is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">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, creating a dynamic display effect on the web page and implementing user interaction functions. </p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("Original title:"+mychar.innerHTML+"<br>"); //Output the original h2 tag content
mychar.innerHTML="Hello World!";
document.write("Modified title:"+mychar.innerHTML); //Output the modified h2 tag content
</script>
</body>
</html>
(4) Note: Object is the element object obtained, such as the element obtained through document.getElementById("ID").
2.3 Change HTML style
(1) Syntax:
The code copy is as follows:
Object.style.property
(2) Function: used to modify HTML style
(3) Example:
The code copy is as follows:
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript enables web pages to display dynamic effects and implements user interaction functions. </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: 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:
Object.style.display=value
(2) Function: Display and hiding are often seen on web pages, which is achieved by using the display attribute.
(3) Example:
The code copy is as follows:
<script type="text/javascript">
function hiddentext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="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:
The code copy is as follows:
Object.className=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:
The code copy is as follows:
<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 id="p1" > JavaScript enables web pages to display dynamic effects and implements user interaction functions. </p>
<input type="button" value="Add style" onclick="add()"/>
<p id="p2">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 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
The above is all about this article, I hope you like it.