Document Object Model DOM popular explanation _ Basics

Before we start, Dom is very easy to understand, but it's so official that it's hard to understand and we translate it in very simple language. Deepen the understanding of the DOM and thus have a comprehensive understanding of it.

what is Dom

The full name of the DOM is Document Object model, which allows scripts to control Web pages, Windows, and documents.

Without dom,javascript would be another scripting language, and with Dom it would be a powerful tool for making dynamic pages. Dom is not part of the JavaScript language, but is an application interface built into the browser. Of course, we can simply interpret it as a programming interface for HTML and XML documents. It provides a structured representation of documents that can change the content and presentation of documents.

The DOM (Document Object model) is a set of web standards that describe how scripts interact and access structured documents. His function is to parse the document supported by the browser (including HTML XML XHTML) as an object. Dom is actually a programming API for manipulating content contained within a document, allowing developers to read, search, modify, add, and delete data from the document. DOM is platform-and language-independent, meaning that you can write documents as long as it is a platform and programming language that supports DOM.

The DOM defines a series of objects, methods, and properties that are used to access, manipulate, and create content, structure, style, and behavior in a document. Each page element (an HTML tag) corresponds to an object (object, the so-called "objects"), in the words "things" in white. ）。 The labels on the Web page are nested, the outermost layer is <HTML&GT, and the Document Object model is nested like this, but is usually understood as a tree shape. The root is the window or Document object, which is the outer edge of the outermost label, the entire document. Beneath the roots (the tree's picture is usually inverted), like a genetic pedigree or a genealogy. The root is the only common ancestor) is the child level object, the child object also has its own child object, in addition to the root object, all objects have their own parent object, the same object child object is a sibling relationship. If you have not seen a family tree, you should know a company's organizational structure.

Dom is actually a document model that is described in an object-oriented fashion. The DOM defines the objects that are required to represent and modify documents, the behavior and properties of those objects, and the relationships between those objects. The DOM can be thought of as a tree representation of the data and structure on the page, but the page may not, of course, be implemented in the same way as the tree. With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page.

To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This portal, along with methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).

Dom and JavaScript

All of the things we do with JavaScript in a Web page are done through the DOM. How do I access objects in the DOM?

The parent object name, followed by the child object name, is separated by a dot.

Copy Code code as follows:

<span style= "font-size:18px" >window.document.write ("Hi!how are you!") </span>

Dom Action CheckBox Instance

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>dom Operation Checkbox</title>
<script type= "Text/javascript" >
When the HTML page is finished loading, perform the following functions
Window.onload = function () {
document.getElementById ("btn"). onclick = function () {
var inputs = document.getElementsByTagName ("input");
for (var i = 0; i < inputs.length; i++) {
if (Inputs[i].type = "checkbox") {
if (inputs[i].value% 2!= 0) {
Inputs[i].checked = true;
}
}
}
}
}
</script>
<body>
<input type= "checkbox" value= "1"/>
<input type= "checkbox" value= "2"/>
<input type= "checkbox" value= "3"/>
<input type= "checkbox" value= "4"/>
<input type= "checkbox" value= "5"/>
<input type= "checkbox" value= "6"/>
<input type= "checkbox" value= "7"/>
<input type= "checkbox" value= "8"/>
<input type= "checkbox" value= "9"/>
<input type= "checkbox" value= "Ten"/>
<button id= "BTN" > Selected odd </button>
</body>

Standalone button Display effect: