Realize the composition of JavaScript----BOM and Dom Detailed knowledge _ Basics

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

Today the main learning BOM and DOM.

Bom:

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

Window object:

The core of the BOM, which represents an instance of the browser, is both an interface through JavaScript to the browser window and a ECMAScript global object, meaning 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 III). In addition, if a Web page contains frames, each frame has its own window object and is saved in the Frames collection (index 0 begins, LTR,TTB).

First, the variables in the global execution environment are the generic and method of the Window object. Of course, there is a difference between a global variable and a directly defined window genus, and the global variable (which is exactly the explicitly declared global variable) cannot use Delete, and the Window property is OK. In addition, there is one more detail to note that attempting to access an undeclared variable can be an error, but there is no problem using the Query window object.

So what are the common properties or methods of Windows?

1.name, each Window object has a Name property that contains the names of the frames. This is usually to understand window relationships and frames.

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

3. Window Size properties: Innerwidth/height (the size of the view area (minus the width of the border) * 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 above the original width, and y higher than the original height). This sonata method does not apply to frame structure.

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

<a href=http://www.jb51.net>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 setting of the attribute string here is no longer detailed, and interested can click here

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

Timeout call: settimeout (JS code string, millisecond time), as a single-threaded language, JS task queue can only execute a piece of code each time, if the set interval after the task queue is empty, then execute the code string, otherwise, to wait until the previous code execution completed before execution.

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

Here, I call an anonymous function output good in 5 seconds, the window first pops up a warning box to display 2, the visible settimeout () function returns a numeric ID, is unique, then we can use this ID to clear the timeout call, you can work with cleartimeout ( ID) to clear it.

Indirect call: SetInterval (), he accepts the same arguments as settimeout (), returns a numeric ID, and uses cleartimeout () to clear.

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

Location objects

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

Location Object Properties list, modify these properties to load new pages, and generate new records in the history. Using Location.replace () does not generate new records in the history record.

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

Navigator object: The fact standard used to identify browsers, whose properties and methods are primarily used to detect the type of browser.

The rest, such as History object (save History), screen object (indicating client ability), because the programming function in JS is not big, will not repeat.

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

Dom:

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

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

Node Type:

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

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

The NodeName property, for the element node, the NodeName value is the label signature.

NodeValue property, the value of nodevalue is NULL for element nodes.

Node Relationship: Each node owns the ChildNodes property and holds the NodeList (class array Object) object. Each node has the ParentNode attribute, pointing to the parent node. The nodes in the childnodes have the same parentnode. You can access sibling nodes using the PreviousSibling and NextSibling properties. 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 new node. InsertBefore (), unshift a node to the NodeList header and returns the 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, similar to the effect of replacechild (). Clonechild (Boolean), true to indicate full replication (entire node and child nodes), False for basic replication.

Document Type:

Represents the document, which is an instance of the 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 (), to get attributes for class, use "class" instead of classname to get the class attribute when using Element.classname.

SetAttribute (), sets the attribute, and replaces it if the attribute exists. Otherwise, create.

RemoveAttribute (), remove element attributes completely.

CreateElement () to create a new element.

Text type:

createTextNode (), creates a text node, and if a text node is an adjacent sibling node, the two text is concatenated, with no spaces.

The above implementation of the composition of JavaScript----BOM and Dom detailed is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.