7th Week blog (bom&dom)

About the origin of the DOM & BOM concept (Source), Method (methods), content (contents), Application (application)

Dom (origin): The File object Model (Documentobjectmodel, referred to as DOM), is a standard programming interface recommended by the Organization for the processing of extensible superscript languages. Documentobjectmodel's history dates back to the late 1990 's "browser Wars" between Microsoft and Netscape, with both sides giving the browser a powerful feature in order to make a life-and-death decision in JavaScript and JScript. Microsoft has added a number of proprietary things to Web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, making it impossible for many Web pages to be displayed using non-Microsoft platforms and browsers. Dom is the masterpiece of the time.

Dom (method): The DOM can access and modify the content and structure of a document in a way that is platform-and language-independent. In other words, this is a common way of representing and working with an HTML or XML document. It is important to note that Dom design is based on the protocol of the Object Management Organization (OMG) and therefore can be used in any programming language. Dom technology allows the user page to dynamically change, such as the ability to dynamically display or hide an element, change their properties, add an element, and so on, Dom technology makes the page interactivity greatly enhanced. It is actually a document model that is described in an object-oriented manner. The DOM defines the objects that are required to represent and modify the document, the behavior and properties of those objects, and the relationships between those objects. You can think of the DOM as a tree representation of the data and structure on the page, although the page may not be implemented in this way. With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page. To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This portal, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).

using selectors to position DOM elements: The Selector API provides methods to quickly and easily retrieve nodes from the DOM by matching a set of selectors. This is much faster than in the past, for example, it is necessary to use loops in JavaScript code to locate specific items that you need to find. Element.

1.NodeSelector Interface: This specification adds two new methods to any object implementation, or interface:DocumentDocumentFragmentElement

querySelectorThe report looks at the first matching node in a nodes tree. If no matching node is found, it is returned.Elementnull

querySelectorAllThe report looks at all nodes of all matching nodes in the game's pip tree, and if no match is found, the report looks at the empty node.NodeListElementNodeList

The Selector API provides a number of ways to by matching a set of selectors, you can quickly and easily retrieve nodes from the DOM . This is much faster than the technology of the past, for example, it is necessary to use loops in JavaScript code to locate the specific item you need to find

2. Select: The selector method accepts one or more comma-delimited selectors to determine which or which elements should be returned. For example, select all paragraphs ( p ), whose CSS class is either an element in a document warning ornote.

Dom (content): DOM is the standard. The DOM defines the standard for accessing HTML and XML documents: The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

rating : According to the W3CDOM specification, the DOM is an application programming interface (API) for HTML and XML, and the DOM maps the entire page to a file composed of hierarchical nodes. There are 1 levels, 2 levels, 3 levels and a total of 3.

The 1-level dom:1 DOM became a world wide proposal in October 1998, consisting of the DOM core and domhtml two modules. The DOM core maps an XML-based document structure, allowing access to and manipulation of any part of the document. Domhtml extends the DOM core by adding HTML-specific objects and functions.

Level 2 DOM: Because the Level 1 DOM targets only the mapping document structure, the DOM2 level is broader. By extending the original DOM, the Level 2 DOM adds support for mouse and user interface events, scopes, traversal, and cascading style sheets (CSS) through the object interface. It also extends the core of DOM1 to support XML namespaces.

Level 2 DOM introduces several new DOM modules to handle the new interface types: DOM view: An interface that describes the various views that track a document (before and after the document is designed using CSS styles); DOM Event: Describes the event interface; DOM Style: Describes handling interface based on CSS styles ; Dom traversal and scope: Describes the interface for traversing and manipulating document trees;

Level 3 Dom:3 Dom is further extended by introducing a unified way to load and save document and document validation methods, DOM3 contains a new module called "Dom Load and save", which supports all XML1.0 content, including Xmlinfoset, XPath, and Xmlbase.

node : each component in the dom,html document is a node. The DOM says this: The entire document is a document node. Each HTML tag is an element node. The text contained in the HTML element is a text node. Each HTML attribute is an attribute node. Comments belong to the comment node.

node hierarchy : Nodes have hierarchical relationships with each other. All the nodes in the HTML document make up a document tree (or node tree). Each element, attribute, text, and so on in an HTML document represents a node in the tree. The tree starts at the document node and continues to extend its branches until all the text nodes are at the lowest level of the tree. DOM (application): Registering event Listeners: There are three ways to register event handlers for DOM elements.

Access Event interfaces: event handlers can be attached to various objects, including DOM elements, documents, window display objects, and so on. When an event occurs, the event object is created and passed to the event listener in its order. Eventthe interface is accessed from the handler function by the event object that can be passed as a parameter. The following simple example shows how to pass an event object to an event handler and can be used in one such function.

BOM (origin): BOM (Browser object mode) refers to the browser object model, which is a model for describing the hierarchical relationship between objects and objects, and the browser object model provides a content-independent object structure that can interact with the browser window. A BOM consists of multiple objects, which represent the window object of the browser windows as the top-level object of the BOM, and the other objects are child objects of that object.

BOM (method)：

1. Window Operation:

Moveby (Dx,dy): Moves the browser window horizontally by x pixels relative to the current position, moving the y pixels vertically.

MoveTo (x, y): Move the browser window so that their upper-left corner is at (x, y) of the user's screen.

Resizeby (DW,DH): Adjusts its width to x pixels and height to y pixels relative to the current size of the browser window.

Resizeto (W,H): Adjusts the width of the window to x and the height to Y. cannot be a negative number.

★ie provides window.screenleft and Window.screentop objects to determine the position of the window. The Document.body.offsetWidth and Document.body.offsetHeight properties can get the viewport size.

★mozilla provides the position of the Window.screenx and Window.screeny properties to judge the window, and the Windows.innerwidth and Windows.innerheight properties to determine the viewport size; The Window.outerwidth and Window.outerheight properties determine the size of the browser window itself.

2. Navigate and open a new window:

Open a new window: window.open ("URL of new Window", "name", "attribute string");

Various settings:

Left: the leftmost coordinate of the window, cannot be a negative number;

Top: The upper coordinate of the window, cannot be a negative number;

Height: The width of the window cannot be less than 100;

Width: The window can not be less than 100;

Resizable: Determines whether the form can be dragged, default to No;

Scrollable: Determines whether the form scrolls when the content is not displayed, default is no;

Toolbar: Determines whether the toolbar is displayed, default is no;

Status: Determines whether to display the State bar, the default is no;

Location: Broken whether the address bar is displayed, default is No.

Close Self form: window.close ();

3. System dialog box:

Warning Box: alert ("XXX");

Confirmation Box: Confirm ("XXX");

Input box: Prompt ("' XXX")

4. Status bar

Window.defaultstatus= "XXXXXX"

Wingdow.status= "XXXXXX"

5. Time interval and pause:

SetTimeout (); Wait for xx milliseconds to execute.

Cleartimeout (); cancel

SetInterval (); Wait xx milliseconds after execution

Clearinterval (); cancel

6. History:

Back one page: Window.history.go (-1); or History.back ()

Forward a page: Window.history.go (1); or History.forward ()

Second, Document object:

Some common properties of the Document object:

1. LastModified: The date of the last modification is the string;

2. Referrer: A URL that backs up a location in browser history;

3. Title: Display text in the label;

4.URL: The URL of the currently loaded page.

Change Frame title: top.document.title= "new page title";

To navigate the window to a new page:

Document. URL = "http://www.baidu.com";

BOM (content):There is no independent existence between objects in JavaScript, and there is a hierarchical relationship between objects and objects. If the document object is a child of the Window object, the Window object is the Document object, which represents the entire browser window. The BOM is not a standard in the Web, so the objects, objects, properties and methods in the BOM supported by different browsers may be different. There are many sub-objects under the Document object, so the document object is a very important object. In fact, most browsers support document objects. The document branch in the BOM has been supported by many browsers before the web is formally defined by the DOM. After the DOM is formally defined, it is divided into three levels, 1 levels DOM (DOM Level 1), 2 levels of DOM (DOM Level 2), and 3 levels of DOM (DOM level 3). The document branch in the BOM is referred to as Level 0 DOM (DOM levels 0) because the branch defines the basic functionality of the documentation functionality.

Document object: This object represents the loaded documents in the browser window. Use the Document object to manipulate the contents of your documents. In the entire BOM, only the document object is related to the content of the HTML document.

Frames Array: The array represents the frame in the browser window. HTML allows you to divide a browser window into multiple frames, each of which can load an HTML document. In this framework page, each frame is an element in the frames array. Each element in the frames array is a Window object.

History object: This object represents the current browser window's browsing histories. This object enables you to forward or rewind a document in the current browser window to a URL that has already been visited (Uniform Resource Locator).

Location object: The object represents the URL of the current document. The URL is divided into several parts, such as the Protocol section, the host part, the port section, and so on. You can use the Location object to obtain these parts separately, and you can load a new document by modifying the values of those parts.

Navigator object: The object is a browser object that represents the browser's information. Unlike the Window object, the Window object can be used to control some properties of the browser window, such as the browser window size, location, and so on. The Navigator object contains information about the browser, such as the name of the browser, the version number, and so on.

Screen object: This object represents the information for the current display. Use the Screen object to obtain information such as the resolution of the user's display, the number of colors available.

The Document object represents an HTML document, and the HTML document contains many elements, and the BOM sees the elements as different objects.

Anchors array: The array represents all the anchors in the document. Each element in the array is an anchor object. Each Anchor object corresponds to a label in the HTML document that contains the name attribute, and the anchor object can be used to get the anchor name, as well as the text in the hyperlink.

Applets array: This array represents all the small programs that are embedded in the Web page. Each element in the array is an applet object that can be used to get the public fields of the Java applet.

Embeds array: Similar to applets, but it is recommended to use the embeds array.

BOM Architecture Forms Array: The array represents all the forms in the document. Each element in the array is a form object. Each Form object corresponds to a <form> tag in the HTML document. The Form object allows you to obtain various information from the form, or you can submit or reset the form. Because many form elements are also included in the form, the child objects of the Form object can also reference these form elements to accomplish a more specific application.

Images array: The array represents all the pictures in the document. Each element in the array is an image object. Each image object corresponds to a tag in the HTML document. You can obtain various information about a picture by using the Image object.

Links Array: The array represents all the hyperlinks in the document. Each element in the array is a link object. Each link object corresponds to a <a> tag in the HTML document that contains the HREF attribute, and the link object allows you to get information about the parts of the URL in the hyperlink.

Location object: The object is exactly the same as the Location object in the Window object. Because this object is not much related to an HTML document, it is an object that is opposed to use, and it is recommended that you use the location child object of the Window object.

BOM (application): BOM is the abbreviation of browser object model, referred to as the browser object, which has the following functions:

1. Pop up the new browser window, move, close the browser window and resize the window;

2. A navigation object that provides detailed information about the Web browser;

3. Locate objects that provide detailed information about the pages loaded into the browser;

4. Screen object that provides user screen resolution details;

5. Support for Cookies

7th Week blog (bom&dom)