Implementation of JavaScript components ---- BOM and DOM explanation, ---- bomdom

Implementation of JavaScript components ---- BOM and DOM explanation, ---- bomdom

We know that a complete JavaScript implementation consists of three parts: ECMAScript (CORE), BOM (Browser object model), and DOM (Document Object Model ).

Today, I mainly studied BOM and DOM.

BOM:

BOM provides many objects for accessing the browser. These functions are irrelevant to the webpage content (these are DOM Issues). Currently, BOM has been moved to the HTML5 specification by W3C.

Window object:

BOM core indicates an instance of the browser. It is both an interface for accessing the browser window through javascript and a Global object specified by ECMAScript, which means any object defined on the webpage, both variables and functions have window as their Global object, so they have the right to access methods such as paresinInt. (From elevation 3 ). In addition, if a webpage contains a framework, each framework has its own window object and is saved in the frames set (index 0 starts, ltr, ttb ).

First, the variables and functions in the global execution environment are the types and methods of window objects. Of course, global variables are slightly different from the directly defined window type. delete is not available for global variables (explicitly declared global variables), and the window attribute is fine. In addition, it is worth noting that an error occurs when you try to access undeclared variables, but there is no problem when you use the window object to query.

So what are the common properties or methods of window?

1. name. Each window object has the name attribute, including the Framework name. It is usually used 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 moving x, vertical moving y ). These two methods are not applicable to the framework.

3. window Size attribute: 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, both inner and outer return the size of the view area.

Of course, you can change the window size by resizeTo (new window width, new window height) and resizeBy (increase x from the original width and increase y from the original height. This 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 you specify a window target and the window target is an existing window or framework name, the specified url will be loaded in a renamed window or framework. Otherwise, the new window is named as the target window. Of course, the keywords that can be specified by the window Target include _ self, _ parent, _ top, and _ blank.

<a href=http://www.bkjia.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 described here. If you are interested, click here

5. as a single-threaded language, js still allows you to set the timeout value (the code is executed after the specified event) and the interval value (loop once every specified time) to schedule code execution at specific times.

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 specified time interval, the code string is executed. Otherwise, the code will be executed after the preceding code is executed.

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

Here, I called an anonymous function 5 seconds later and output good. The window pops up with a warning box that shows 2. It can be seen that the setTimeout () function returns a value ID, which is unique, then we can clear the timeout call using this ID, and clear it using clearTimeout (ID.

Indirect call: setInterval (), which accepts the same parameters as setTimeout () and returns a value ID, which is cleared using clearTimeout.

6. System dialog box methods: alert (), confirm (), prompt () and so on wrote in my previous blog. Click here

Location object

Location is not so much an object in BOM as an attribute in the window object. Of course, it is also the attribute of the document Object in the DOM to be discussed later, that is, window. location and document. location references the same object.

Location object attribute list. modifying these attributes can load new pages and generate new records in historical records. When location. replace () is used, no new records are generated in the historical records.

Hash	"# Contents"	The hash in the returned url is 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 a port number.
Href	"Www.google.com"	Returns the complete url of the current page and calls assign ()
Pathname	''/WileyCDA /'	Returned directory name
Port	"8080"	Return port number. If no port number is returned, an empty string is returned.
Protocol	"Http :"	Back to the protocol used on the page
Search	"? = Javascript"	Returns a query string starting with a question mark.

Navigator object: used to identify browser fact standards. Its Attributes and methods are mainly used to detect browser types.

Others, such as the history object (storing historical records) and the screen Object (indicating the client capability), are not described in detail due to their low programming function in js.

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

DOM:

DOM is an XML-based extended API for HTML. DOM is expanded based on the node tree.

First, you need to make it clear that the document node is the root node of each node. The document node has only one child node, namely, html (document element ).

Node Type:

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

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

NodeName attribute. For element nodes, the value of nodeName is the tag name.

NodeValue attribute. For element nodes, the value of nodeValue is null.

Node relationship: each node has the childNodes attribute and stores the NodeList (class array object) object. Each node has the parentNode attribute pointing to the parent node. Nodes in childNodes have the same parentNode. You can use the previussibling and nextSibling attributes to access sibling nodes. At the same time, childNodes [0] = firstChild, childNodes [childNodes. length-1] = lastChild.

Operation node: appendChild (), which pushes a node to the end of NodeList and returns the newly added node. InsertBefore (), unshift a node to the NodeList header, and return the new node. ReplaceChild (newChild, targetChild), replace the target node, the original node is still in the document, but there is no location. RemoveChild (tragetChild) removes a node, which is similar to replaceChild. CloneChild (boolean). true indicates full replication (entire node and sub-node), and false indicates basic replication.

Document Type:

The document object is an instance of the HTMLDDocument (inherited from the Document type), indicating the entire html page. The doument object is also an attribute of the window object, so it can be accessed as a global object. Document. firstChild = html. document. body = body. document.doc type ---> pair <! DOCTYPE>. Doucment. title ---> title document. url ---> location. url.

Search element: getElementById (), getElementsByTagName (), getElementsByClassName ().

Write: write (), writeln (), open (), close ()

Element type:

GetAttribute (). If you want to obtain a feature for a class, use "class" instead of "className". You can obtain the class feature when using element. className.

SetAttribute (), set the feature. If the feature exists, replace it. Otherwise, create.

RemoveAttribute () to completely delete element features.

CreateElement () to create a new element.

Text Type:

CreateTextNode (): Creates a text node. If a text node is a neighboring compatriot node, the two texts are connected without spaces.

The above implementation of JavaScript components-BOM and DOM are all the content shared by the editor. I hope to give you a reference, and I hope you can provide more support to the customer's house.