A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
About the origin of the DOM & BOM concept (Source), Method (methods), content (contents), Application (application)
1.NodeSelector Interface: This specification adds two new methods to any object implementation, or interface:
querySelectorThe report looks at the first matching node in a nodes tree. If no matching node is found, it is returned.
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.
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
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");
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
5. Time interval and pause:
SetTimeout (); Wait for xx milliseconds to execute.
Cleartimeout (); cancel
SetInterval (); Wait xx milliseconds after execution
Clearinterval (); cancel
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 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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service