Introduction to JavaScript DOM
What is Dom?
The Document Object Model (DOM) is a standard programming interface recommended by the W3C organization for processing extensible markup languages. The history of the Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s. In order to compete for life and death in JavaScript and JScript, both parties gave browsers powerful functions on a large scale. Microsoft has added many proprietary things to web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, which makes many web pages unable to display properly using non-Microsoft platforms and browsers. DOM is the masterpiece brewed at that time.
DOM (Document Object Model) is the application programming interface (API) of HTML and XML. DOM will plan the entire page into a document composed of node levels.
The so-called Document Object Model is actually an internal representation of various elements in the HTML of a web page, such as headers, paragraphs, lists, styles, IDs, etc. in HTML. All elements can be passed through the DOM Come visit.
JavaScript ultimately needs to operate the Html page and turn Html into DHtml, and the DOM is required to operate the Html page. DOM simulates the Html page into an object. If JavaScript only performs some calculations, loops and other operations, but cannot operate Html, it will lose the meaning of its existence.
DOM is the model of the Html page. Each tag is treated as an object. JavaScript can programmatically control text boxes, layers and other elements in the web page by calling the properties and methods in the DOM. For example, by manipulating the DOM object of the text box, you can read and set the value in the text box.
JavaScript can change all HTML elements in the page
JavaScript can change all HTML attributes in the page
JavaScript can change all CSS styles in the page
JavaScript is able to react to all events in the page
Find HTML elements
Usually, with JavaScript, you need to manipulate HTML elements.
In order to do this, you must first find the element. There are three ways to do this:
Find the HTML element by id
Find the HTML element by tag name
Find the HTML element by class name
The simplest way to find an HTML element in the DOM is by using the element's id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}
</script>
</body>
</html>Find HTML elements by tag names
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementsByTagName("p")[1].innerHTML;
alert(str); //输出 我是第二个P，因为获取的是索引为1的P，索引从0开始
}
</script>
</body>
</html>##Find HTML elements by class names
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var node = document.getElementsByClassName("class1")[0];
alert(node.innerHTML);
}
</script>
</body>
</html> 
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
