Implementing JavaScript's composition----------------------------------------------------------------------------------------------------------------------

We know that a complete JavaScript implementation needs to be composed of three parts: ECMAScript (core), BOM (browser object model), and DOM (document object model).

Today I mainly learn BOM and DOM.

BOM:

BOM provides many objects to access the browser's functions, which have nothing to do with web page content (this is the DOM business). At present, BOM has been moved into the HTML5 specification by W3C.

window object:

The core of BOM represents an instance of the browser. It is both an interface to access the browser window through javascript and a Global object specified by ECMAScript. This means that any object, variable and function defined in the web page has window as its Global object, so it has permission to access methods such as paresinInt(). (Excerpt from Elevation III). Furthermore, if a web page contains frames, each frame has its own window object and is saved in the frames collection (index 0 starts, ltr, ttb).

First of all, variables and functions in the global execution environment are all genera and methods of window objects. Of course, there is a little difference between global variables and window attributes directly defined. Global variables (to be precise, they should be explicitly declared global variables) cannot use delete, while window attributes are fine. In addition, there is another detail to note that trying to access undeclared variables will error, but there is no problem using querying window objects.

So, what are the common properties or methods of window?

1.name, each window object has a name attribute, which contains the name of the frame. Usually to understand window relationships and frameworks.

2. Window position method: moveTo (x coordinate of the new position, y coordinate of the new position), moveBy (horizontal movement x, vertical movement y). These two methods do not apply to the framework.

3. Window size attributes: innerWidth/Height (size of view area (minus the width of border) /* IE, Safari, firefox */), outerWidth/Height (returns the size of the browser window /*IE, Safari, firefox */). In Chrome, inner and outer both return the size of the view area.

Of course, you can change the window size by resizeTo (new window width, new window height), resizeBy (up to the original width and increase y compared to the original height). This love song method does not apply to the framework structure.

4.window.open(URL, window target, feature string, whether the new page replaces the boolean of the currently loaded page in the browser history) is used to navigate to a specific URL or open a new window. If the window target is specified, and the window target is the name of an existing window or frame, the specified url will be loaded in the window or frame that has been renamed. Otherwise, the new window that opens will be named as the target window. Of course, the keywords that window targets can specify are _self, _parent, _top, _blank.

 <a href=//www.VeVB.COM>click me</a> <script> var link=document.getElementsByTagName("a")[0]; alert(link.nodeName); window.onload=function(){ link.onclick=function () { window.open(link.href,"good","width=400px,height=300px"); return false; } } </script

The specific settings of the feature string are not detailed here. If you are interested, you can click here

5. As a single-threaded language, js still allows setting timeout values (code execution after the specified event) and interval time values (loop once every specified time) to schedule code execution at a specific moment.

Timeout call: setTimeout (js code string, millisecond time). As a single-threaded language, the js task queue can only execute one piece of code at a time. If the task queue is empty after the set time interval, the code string will be executed. Otherwise, you have to wait until the previous code is executed before executing.

 var al=setTimeout(function () { alert("good"); },5000); alert(al); //2

Here, I called an anonymous function after 5 seconds to output good. A warning box popped up in the window to show 2. It can be seen that the setTimeout() function returns a numerical ID, which is unique. Then we can clear the timeout call through this ID, and can use clearTimeout(ID) to clear it.

Indirect call: setInterval(), the parameters it accepts are the same as setTimeout(), and also returns a numerical ID and cleared with clearTimeout().

6. System dialog box methods: alert(), confirm(), prompt(), etc. are written in my previous blog, click here

location object

Rather than being an object in the BOM, Location is a property in the window object. Of course, it is also the property of the document object in the DOM that will be discussed later. That is, window.location and document.location refer to the same object.

Location object attribute list, modifying these attributes can load a new page and generate a new record in the history. Using location.replace() will no longer generate new records in historical records.

navigator object: a de facto standard used to identify browsers, and its properties and methods are mainly used to detect browser types.

The rest are like history objects (save historical records) and screen objects (showing client capabilities). Since programming in JS is not very effective, I will not repeat them.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

DOM:

DOM is an API that is extended for HTML based on XML, and DOM relies on node trees to expand.

First of all, it is necessary to be clear that the document node is the root node of each node. The document node has and only one child node, namely the html (document element).

Node type:

An interface in DOM1 is implemented by all node types (text nodes, attribute nodes, element nodes), and this interface is implemented as a Node type in js.

nodeType attribute, owned by each node. Denoted by 12 numerical values, element--1, attribute--2, text--3...

nodeName attribute, for element node node, the value of nodeName is the label name.

nodeValue attribute, for element node node, the value of nodeValue is null.

Node relationship: Each node has the childNodes attribute, which saves NodeList (class array object) object. Each node has a parentNode property, pointing to the parent node. The nodes in childNodes have the same parentNode. Use the previousSibling and nextSibling properties to access sibling nodes. At the same time, childNodes[0]==firstChild,childNodes[childNodes.length-1]==lastChild.

Operation node: appendChild(), push a node to the end of NodeList, and return the newly added node. insertBefore(), return a node to the NodeList header unshift, and return a new node. replaceChild(newChild,targetChild), replaces the target node. The original node is still in the document, but there is no location. removeChild(tragetChild), removes the node, and the effect is similar to replaceChild(). cloneChild(boolean), when true, means complete replication (the entire node and child node), false means basic replication.

Document Type:

Represents a document, the document object is an instance of HTMLDDocument (inherited from Document type), representing the entire html page. At the same time, the douent object is also a property of the window object, so it can be accessed as a global object. document.firstChild==html. document.body==body. document.doctype--->Reference to <!DOCTYPE>. doucment.title--->title document.url--->location.url.

Find elements: getElementById(), getElementsByTagName(), getElementsByClassName().

Document writing: write(), writeeln(), open(), close()

Element type:

getAttribute(), get the feature for class, use "class", instead of className, and class attribute can be obtained when using element.className.

setAttribute(), sets the feature, if the feature exists, replace it. Otherwise, create.

removeAttribute() completely removes element characteristics.

createElement(), create new element.

Text Type:

createTextNode(), creates text nodes. If a text node is connected to a neighboring compatriot node, the two texts will be connected without spaces.

The above article's composition of JavaScript------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------