Foreword
We usually say that the JavaScript in the web is actually composed of three parts
- ECMAScript (JavaScript core modules)
- DOM (document node for operation)
- BOM (for operating a browser)
The JavaScript is ECMAScript specification as a core module, created out according to its host environment dynamic interpreted scripting language.
For example, JavaScript syntax and grammar used in the Node JavaScript in your browser are (different host environment) slightly different. And used between different browsers JavaScript syntax is slightly different.
Because JavaScript is a browser JS engine to parse executed, and the browser's JS engine was developed by browser developers out. Browser developers according to ECMAScript, DOM, BOM specifications, redevelopment JS engine developed in accordance with their own browser.
Therefore say why sometimes the same JavaScript code in the different effects of different browsers display
Of course, now the common market browser JS engine will then several (JS engine development because it is too difficult, but also large companies open their JS engine, so he used them the JS engine)
| Browser | JS engine |
|---|---|
| chrome | V8 (Nodejs the JS engine also this) |
| Firefox | Jager Monkey |
| Safari | SquirrelFish Extreme |
| Opera12.16+ | how |
DOM basic introduction
JavaScript DOM is a very important part, called the Document Object Model, DOM API is a struggle for HTML and XML documents. Our developers can manipulate HTML tags through the API.
Browser DOM currently experienced the following version
- DOM1 (formulated the basic node operation, CRUD, mainly defines the underlying structure of HTML and XML documents)
- DOM2, DOM3 (for DOM1 be expanded to include more interaction and error detection mechanisms, facilitate the development of human interaction with HTML and XML)
Now basically all browsers support DOM1 are very sound, but to varying degrees and DOM3 DOM2 standard supported by each browser, you can view the details of the following sites
Web site: https: //www.w3.org/2003/02/06-dom-support.html
Basic introduction to JavaScript node
I think node concept is DOM is the most important concept, only a deep understanding node concept to good use the JavaScript DOM
When we look at an HTML code, we can easily find this HTML code is composed by a variety of labels, and tags can be nested labels, and is infinitely nested.
We found that only one copy of the HTML code certainly html tag, and the nested HTML tags and then a head tag and a body tag, and the head can be nested tags and labels, body labels, too.
We now provide for a rule
-
A label as a node of a tree
-
The HTML tags as a root node of the tree
-
If a tag is nested within another tag, the tag is a child of another node tag
Thus, we can be an HTML code into a tree, as shown in the following example
<!-- 告诉浏览器使用HTML5标准解析该HTML代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<div>
<span>DOM Tests</span>
</div>
<h2>web page!</h2>
</body>
</html>
The HTML conversion and tree as shown in FIG.
This tree node corresponding to each node on the DOM
Defines a Node interface in DOM1, this interface will have all types of nodes in the DOM implementation (ie all nodes in the DOM are inherited from the Node interface)
And there are 12 types of nodes, where each node type does not make a concrete description.
Common node types shown in the following table
| Constant Description | Node Type | description |
|---|---|---|
| Node.ELEMENT_NODE | Element node | Such as p tags, and div tags |
| Node.TEXT_NODE | Text node | Element node or the actual text attribute node |
| Node.COMMENT_NODE | Comment nodes | Comments in the code |
| Node.DOCUMENT_NODE | Document node | An HTML file |
| Node.DOCUMENT_TYPE_NODE | Document describes the node | HTML code used to describe, for example, <! DOCTYPE html> |
| Node.ATTRIBUTE_NODE | Attribute nodes | Attribute described on the label (in the specification DOM4 Node interface will no longer be achieved in the element properties) |
