Let's take a look at a picture:
Explanations:
ECMAScript: defines all objects, attributes, and methods of the script language.
Document Object Model (DOM): HTML and XML application interface
Browser Object Model (BOM): Access the browser window
Here is a specific description of each component:
About ECMAScript
ECMAScript defines syntaxes and objects, from basic data types, condition statements, keywords, reserved words to Exception Handling and object definitions.
Objects defined in the scope of ECMAScript are also called Native objects.
In fact, it is a set of interfaces that define syntax rules, which are then implemented by different browsers. Finally, we write programs that follow the syntax rules to meet application development requirements.
About DOM
According to the definition of DOM (HTML and XML application interface), DOM consists of two parts: DOM for XML, namely DOM Core and dom html for HTML.
What are the differences and Relationships Between DOM Core and dom html?
The Core concept of DOM Core is Node ). DOM will view different types of elements in the document (not including the <div> tag, but also attributes, comments, and text) as different nodes.
Node Structure
Describes the structure of dom core, which is professional. Here is a simple example:
Copy codeThe Code is as follows:
<Div id = "container">
<Span> hello world </span>
</Div>
Let's take a look at the DOM performance of this Code in a standard browser:
The div and span elements are displayed as an Element node, corresponding to the Element in the node structure diagram.
The interval between "hello world" and div and span is displayed as a text node, corresponding to the CharacterDate element in the node structure diagram.
When parsing a document, dom core treats all elements, attributes, text, and comments as a node object (or an object inherited from a Node object, with polymorphism and upward transformation ), the text structure is displayed in sequence, and the last line is a "DOM tree"
The core concept of dom html is HTMLElement. dom html regards all elements in the document (the elements here refer to the <body> tag, excluding comments, attributes, and texts) as htmlelements. The attribute of the element is the attribute of HTMLElement.
Let's look at an example:
Properties provided from the Node interface
MyElement. attributes ["id"]. value; obviously, myElement. attributes ["id"] returns an object. value, which is the value Attribute of the object.
Element implementation method return
MyElement. getAttributes ("id"); obviously, id is only an attribute, which is only an operation to get the attribute.
In fact, the external calling interfaces of DOM Core and DOM html are not very different. For html documents, DOM html can be used for operations, and DOM Core can be used for xhtml.
About BOM
The old rule is shown in the following figure:
BOM is closely integrated with browsers. These objects are also called host objects, that is, objects provided by the environment.
Here we need to emphasize a strange Global object, which represents a Global object. Javascript does not allow independent functions, variables, and constants. If no additional definition is available, they are all viewed as attributes or methods of Global objects. for example, parseInt (), isNaN (), and isFinite () are treated as Global objects. For example, "constants" such as Nan and Infinity are also attributes of Global objects. The constructor of built-in Global objects such as Boolean, String, Number, and RegExp is also an attribute of the Global object. but the Global object does not actually exist, that is, you use Global. when NaN accesses NaN, an error is reported. In fact, it is played by window, and this process is performed when javascript is loaded for the first time.
Okay, okay. Let's get there. There is still a part. Forget it. Let's open another section later.
