Implementing the composition of JavaScript----BOM and DOM

We know that the implementation of a complete JavaScript needs to consist of three parts: ECMAScript (Core), BOM (Browser object model), DOM (Document Object model).

Today we mainly study BOM and Dom.

　　Bom:

The BOM provides many objects to access the functionality of the browser, which are irrelevant to the content of the Web page (these are Dom's things), and currently the BOM has been moved into the HTML5 specification. .

Window object:

The core of the BOM, which represents an instance of the browser, is both an interface for accessing the browser window through JavaScript, and the global object specified by ECMAScript, which means that any object, variable, and function defined in the Web page, has window as its global object and therefore has access to methods such as Paresinint (). (Excerpt from elevation three). In addition, if a Web page contains frames, each frame has its own window object and is saved in the Frames collection (starting at index 0, LTR,TTB).

First, the variables in the global execution environment, functions are the type and method of the Window object. Of course, the global variable is slightly different from the directly defined window genus, and the global variable (which is exactly the global variable that should be explicitly declared) cannot use Delete, and the Window property can. In addition, there is a detail to note that attempting to access an undeclared variable will make an error, but using the Query window object is not a problem.

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

1.name, each Window object has a Name property that contains the frame's names. This is often done to understand window relationships and frameworks.

2. Window Position method: MoveTo (The x-coordinate of the new position, the y-coordinate of the new position), Moveby (move the x horizontally, move y vertically). These two methods do not apply to the framework.

3. Window Size properties: Innerwidth/height (the size of the view area (minus the border width)/* Ie,safari,firefox */), outerwidth/height (returns the size of the browser window/*ie,safari, Firefox */). In Chrome, Inner,outer returns the size of the view area.

Of course, you can change the window size by Resizeto (new window width, new window height), Resizeby (Increase x from the original width, and y higher than the original height). This sonata method does not apply to frame structures.

4.window.open (URL, window target, character string, whether the new page supersedes a Boolean of the page currently loaded in the browser history) is used to navigate to a specific URL or open a new window. If a window target is specified and the window target is the name of an existing window or frame, the specified URL is loaded in a renamed window or frame. Otherwise, the Open new window is named the target window. Of course, the window target can specify the keywords that have _self,_parent,_top,_blank.

　　　　

<ahref= "Http://www.baidu.com">Click Me</a>    　　 <Script>        varLink=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

Here the specific settings of the character string are no longer mentioned, interested can click here

5. As a single-threaded language, JS still allows you to set the timeout value (the execution code after the specified event) and the interval time value (once every specified time cycle) to dispatch code to execute at a particular moment.

Timeout call: SetTimeout (JS code string, milliseconds time), as a single-threaded language, JS's task queue can only execute a piece of code at a time, if the task queue is empty after the set interval, then execute the code string, otherwise, wait until the previous code execution completes before executing.

　　　　

var al=settimeout (function () {            alert ("good");        },5000);        Alert (AL);  2

Here, I call an anonymous function output good after 5 seconds, the window pops up a warning box to display 2, the visible settimeout () function returns a numeric ID that is unique, so we can clear the timeout call with this ID, and we can use Cleartimeout ( ID) to clear.

Indirect invocation: SetInterval (), which takes the same arguments as settimeout (), returns a numeric ID, and clears with Cleartimeout ().

6. System dialog method: Alert (), confirm (), prompt () and so on in my previous blog wrote, click here

Location Object

Rather than being an object in a BOM, location is a property of the Window object, and, of course, the property of the Document object in the DOM that is to be said, that is, Window.location and Document.location refer to the same object.

A list of Location object properties that can be modified to load new pages and generate new records in the history. Using Location.replace () does not generate a new record in the history.

Hash	"#contents"	Returns the hash in the URL without a ""
Host	"Www.google.com"	Returns the server name and port number (if any)
Hostname	"Www.google.com"	Returns the server name without a port number
Href	"Www.google.com"	Returns the full URL of the current page, called Assign ()
Pathname	"'/wileycda/'	Return directory Name
Port	"8080"	Returns the port number, without returning an empty string
Protocol	"http:"	Returns the protocol used by the page
Search	"? =javascript"	Returns the query string, starting with a question mark

Navigator object: A fact standard used to identify browsers whose properties and methods are primarily used to detect browser types.

The rest, such as the history of the object (save historical records), screen object (indicating the client's ability), because in the JS programming role is not very much, will not repeat.

　　

　　

　　Dom:

The DOM is an XML-based api,dom that is expanded for HTML depending on the node tree.

　　The first thing to make clear is that the document node is the root node of each node, and the document node has only one child node, both element html (document Element).

Node Type:

An interface in DOM1 is implemented by all DOM node types (text nodes, attribute nodes, ELEMENT nodes), which are implemented as node types in JS.

　　　　The NodeType property, which is owned by each node. Represented by 12 values, element--1,attribute--2,text--3 ...

The NodeName property, for element nodes, nodename the value of the label signature.

NodeValue property, for element nodes, the value of NodeValue is null.

Node relationships: Each node has a ChildNodes property that holds the NodeList (class array Object) object. Each node has a ParentNode property that points to the parent node. The nodes in ChildNodes have the same parentnode. Sibling nodes can be accessed using the PreviousSibling and NextSibling properties. At the same time Childnodes[0]==firstchild,childnodes[childnodes.length-1]==lastchild.

Action node: appendchild (), push a node to the end of NodeList, and return the new node. InsertBefore (), unshift a node to the NodeList header and returns the new node. ReplaceChild (Newchild,targetchild), replacing the target node, the original node is still in the document, but there is no location. RemoveChild (tragetchild), removes the node, similar to the effect of replacechild (). Clonechild (Boolean), true to indicate full replication (entire node and child node), False for basic replication.

Document Type:

Represents the document, which is an instance of Htmlddocument (inherited from Document type), representing the entire HTML page. Also, the Doument object is a property of the Window object and can therefore be accessed as a global object. Document.firstchild==html. Document.body==body. Document.doctype---> To <! A reference to the doctype>. Doucment.title--->title document.url--->location.url.

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

Document write: Write (), Writeln (), open (), close ()

Element type:

GetAttribute (), get the attribute for class, use "class" instead of classname, and you can get the class attribute when using Element.classname.

SetAttribute (), set the attribute, or replace if the attribute exists. Otherwise, create.

RemoveAttribute () to completely remove the element attributes.

CreateElement () to create a new element.

Text type:

createTextNode (), create a text node, if the text node is adjacent to the sibling node, then the two text will be connected, there is no space.

　　　　

　　　　

　　

　　　　　

　　　　

　　　　　　　　

　　

　

　　

　　

Implementing the composition of JavaScript----BOM and DOM