BOM and Dom Summary

Bom
1.1 Introduction
1.BOM is an abbreviation for the browser object model, referred to as the browser object
2.BOM provides objects that are independent of the content and interact with the browser window
3. Since the BOM is primarily used to manage communication between windows and Windows, its core object is window
4.BOM is composed of a series of related objects, and each object provides many methods and properties
5.BOM lack of standards, the standardization of JavaScript Grammar Organization is ECMA,DOM standardization Organization is the
6.BOM was originally part of the Netscape browser standard

The relationship between the various objects window--
1.doucment--2.frames--3.history--4.location--5.navigator--6.screen
1.document--1.1 anchors--1.2 links--1.3 forms--1.4 images--1.5 Location

The main features of the BOM include:
1. The ability to pop up a new browser window.
2. Ability to move, close, and change the size of the browser window.
3. A navigation object that provides detailed information about the Web browser.
4. A local object that provides detailed information about the page that the browser loads.
5. Provide screen objects for user screen resolution details.
6. Support Cookies.
7. IE extends the BOM to include ActiveX object classes, which can be implemented by JavaScript.
Note: The BOM is the host object.

1.2 Timer (Window object)
1.2.1 The function that implements the Window object executes after the specified number of milliseconds.
SetTimeout (executedfunction, millisecond); Execute only once

Eg:settimeout (function () {//Put anonymous function
Console. Info ("Execute Function! " ) ;
}, 1000)

Eg:function Execute () {//put in a named function
Console. Info ("Execute Function! " ) ;
}
SetTimeout (execute, 1000);

Eg:settimeout ("Console. Info (' Execute function! ') ", 1000); Directly into the execution code

Tips: In addition, SetTimeout () can return a value that can be passed to cleartimeout () to destroy the timeout timer.
Eg:var timer = setTimeout (function () {
Console. info (1);
}, 1000);
Cleartimeout (timer);


1.2.2 SetInterval (interval execution)
The SetInterval method of the Tips:window object is similar to the SetTimeout method, except that the method repeats the call in the interval of the specified number of milliseconds.

Eg:setinterval (function () {//setinterval can also execute a reference put into the execution code or a named function
Console. Info ("Execute Function! " ) ;
}, 1000);
Tips: Use Clearinterval to destroy this interval timer.
Eg:var timer = setinterval (function () {
Console. Info ("Execute Function! " ) ;
}, 1000);
Clearinterval (timer);

1.3 Popup dialog box (Window object)
1.3.1 Alert
Alert () displays a message to the user and waits for the user to close the dialog box.
The Tips:alert method causes blocking, which means that the code behind the alert does not execute until the user turns off the dialog box that they are displaying.
This means that the code stops running until a dialog box pops up.
1.3.2 Confirm
Confirm () also displays a message asking the user to click the OK or Cancel button and return a Boolean value.
eg:var bool = confirm ("May I has a date with you?");
Console. info (bool);
Tips:confirm methods can also cause blocking.
1.3.3 Prompt
Prompt () also displays a message waiting for the user to enter a string and return the string.
Prompt () is written in two ways:
Eg:var Inputval = prompt ("Please enter a value");
Console.        Info (typeof Inputval); There is a typeof that is the type of the return value, and none returns the value.
Eg:var Inputval = prompt ("Please enter a value", "Default value");
Tips:prompt methods can also cause blocking.

1.4 Opening new and closing Windows (Window object)
1.4.1 Open function
Use the Window object's open function to open a new browser window (or tab, which is usually related to the browser's configuration options). window.open () loads the specified URL into a new or
exists in the window and returns the Window object that represents it. It has 4 optional parameters.
1. The first parameter is the URL of the document to display in a new window. If this parameter is omitted (which can be an empty string), then the URL of the blank page is used About:blank.
2. The second parameter is the name of the newly opened window (that is, window.name), if the value of the _blank, _self, _parent, or _top parameter is used, the document that specifies the reference will be displayed in the new
A blank window, a window of its own, a parent window, or a top-level window, is somewhat similar to the target of a tag.
3. The third parameter is non-standard, and the HTML5 specification also argues that the browser should ignore it and that it has a number of key-value pairs that can be used to set the size position of the newly opened window.
4. The fourth parameter is only useful if the second parameter is named an existing window. It is a Boolean value that declares that the URL specified by the first parameter is the app that replaces the window browser history
The current record (true), or you should create a new record (false) in the window browsing history, which is the default setting.

1.4.2 Window.close function
The Window.close () function closes a window.

Eg:window.    Close (); Closes the window and Firefox clears the document
Eg:var NewWindow = open ("https://www. Baidu.        com "," _blank "," "); You can also close a window that is already open
SetTimeout ("NewWindow. Close (); ", 1000);

1.5 access to the specified URL (window.location object)
The Location object property of the Window object has an HREF attribute that specifies the URL of the page that needs to be loaded.
Eg:location. href = "https://www." Baidu.            COM "; A little acquaintance with a tag.

1.6 Access History (Window.history objects)
1.6.1 History.back function
This function is used to return the page to the previous browse page, and if the page is first opened, the method has no effect.
Eg:history.                 Back (); Back to previous page

1.6.2 History.foward function
This function is used to forward the page to the next browse page, provided that the back or go method was used before. Go ahead to the page you just browsed.
Eg:history.                 Foward (); Go to the next page

1.6.3 History.go () function
The Go (NUM) function can specify how many pages to forward or back, with NUM controlling the number of pages to forward and backward, or forward if Num is positive (if 1 is equivalent to the foward function),
If NUM is negative, it is backward (if 1 is the equivalent of the back function).
Eg:history.                 Go (-1); Returns the previous page, equivalent to the back function.

1.7 Getting Client screen information (Window.screen object)
1. window.screen.height screen height, in pixels.
2. Window.screen.width screen width, in pixels.
3. Window.screen.availHeight can use the screen height, not including toolbars, etc., in pixels.
4. Window.screen.availWidth can use the screen height, in pixels.

2 DOM (Document Object model)
DOM---Tpis:
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 have 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).
In 1998, the first level of the DOM specification was published by the consortium. This specification allows access to and manipulation of each individual element in an HTML page.
All browsers have implemented this standard, so the DOM compatibility issue is almost impossible to trace. DOM can be used by JavaScript to read, change
HTML, XHTML, and XML documents.

2.1 DHTML (Dynamic HTML)
Summary: DHTML refers to Dynamic HTML.
DHTML is a technical composition used to create dynamic sites. For most people, DHTML means HTML 4.0, style sheets, and JavaScript binding.
Consists of four parts of the technology:
1. HTM L4.0 2. Cascading Style Sheets (CSS) 3. Document Object Model (DOM) 4. Javascript

2.2 How browsers work
1. The browser changes the loaded HTML into a DOM tree, but there is no display style at this time.
2. All displayed styles are CSS-defined, and the browser renders the view style only through CSS.
3. The browser will render as a full page after the DOM tree is loaded separately and the final CSS style is calculated.

2.3 Dom Introduction
2.3.1 Dom Tree
1. In order to enable us to control the Web page programmatically, the organization presented the Document Object Model DOM (DOC).
2.DOM can access and modify the content and structure of a document in a platform-and language-independent manner.
3. This is a common way to represent and process an HTML or XML document.
4. The design of the DOM is based on the protocol of the object management organization and can therefore be used in any programming language.

2.3.2 DOM node type
1. Documentation node Document = = = root node.
2. Document type node DocumentType ====DTD reference is <! Doctype>.
3. Element node element======= tag.
4. Text node text in the ====== tag or plain text contained within the cdatasection.
5. Attribute node attr====== the attributes of the element.
6.CDataSection = = is usually the parent class of the text node and the comment node.
7. Comment Node Comment ===== comment

2.3. Properties and methods for 3 nodes
NodeName node Name
The value of the NodeValue node
One of the type constants of the NodeType number node
Ownerdocument document to which it belongs
FirstChild the first node in the ChildNodes list
LastChild the last node in the ChildNodes list
ChildNodes List of NodeList nodes
PreviousSibling before a sibling node
NextSibling after a sibling node
HasChildNodes () Whether a child node is included
Attributes Property Collection
AppendChild (node) adds node to the end of ChildNodes
InsertBefore (NewNode, refnode) insert Refnode before newnode in ChildNodes
RemoveChild (node) removes node from childnodes
ReplaceChild (NewNode, OldNode) replaces OldNode in childnodes with NewNode

2.3.4 constants and values for DOM node types
Node type node type constant node type value
Element Node Node.element_node 1
Attribute Node Node.attrbute_node 2
Text Node Node.text_node 3
CDATA Node Node.cdata_section_node 4
Note Node Node.comment_node 8
Document Node Node.document_node 9
Document type Node Node.document_type_node 10

3DOM manipulating HTML
3.1 Common operations for all types of nodes
3.1.1 Get node
1. Acquiring nodes using node relationships
ChildNodes-Gets all child nodes.
FirstChild-Gets the first child node.
LastChild-Gets the last child node.
PreviousSibling-Gets the previous sibling node.
NextSibling-Gets the next sibling node.
ParentNode-Gets the parent node.

2. Direct access to Nodes
document.getElementById ("id")-Gets the node by ID.
document.getElementsByTagName ("div")-Gets the node based on the tag name.
Document.getelementsbyclassname ("class")-Gets the node based on the class name.
Document.getelementsbyname ("name")-Gets the node by name.

3.1.2 created Nodes
1. Create a new node
createelement ("div")-Creates the element node of the Div.
createTextNode ("text")-Creates a text node that contains "text".
eg
Document. CreateElement ("P");
Document. createTextNode ("haha");
Tpis: At this point you can't see the P tag on the page because it's not associated with the DOM tree, and creating a node must be associated with the DOM tree.

2. Cloning nodes
CloneNode (BOOL)-Clone node.
When BOOL is false, only the element node is cloned.
When BOOL is true, the node and all child nodes of that node are cloned.

3.1.3 Adding nodes
AppendChild (node)-Adds a node after all child nodes.
InsertBefore (node, refnode)-Add a node before refnode.
Remember that this addition occurs on a child node of an element, which is preceded by a node in front of the Refnode child node of an element.

3.1.4 Deleting a node
RemoveChild (node)-delete node child nodes.

3.1.5 Replace Node
Raplacechild (NewNode, OldNode)-replace OldNode with NewNode.
Tips: Remember that this substitution occurs on a child node of an element, which is to replace the OldNode child node of an element with NewNode.

3.1.6 general operation (add and revise)
InnerHTML-All the HTML that an element node contains, including all element nodes, text nodes, and attribute nodes.

BOM and Dom Summary