JavaScript advanced Programming-Reading notes (3)

8th Chapter BOM

1. Window object

(1) Global scope

The core object of the BOM is window, which represents an instance of the browser. In the browser, the Window object is both an interface for accessing the browser window through JavaScript, and the global object specified by the ECMAScript.

All variables and functions declared in the global scope become properties and methods of the Window object.

(2) window relationship and framework

If the interface contains frames, each of which has its own window object and is saved in the Frames collection, the corresponding Window object can be accessed through the index of the numeric value (starting at 0, from left to right, top to bottom), or from the frame name.

The window object points to a specific instance of that frame, not the top-level frame.

The top object always points to the highest (most outer) layer of the frame, which is the browser object.

The parent object always points to the immediate upper frame of the current frame.

The self object always points to the window; In fact, the Self and Window objects can be used interchangeably, referencing the self object only to correspond to the top and parent objects.

(3) Window position

Use the following code to get the position of the left and top of the window across the browser:

var leftpos = (typeof Window.screenleft = = "Number")?

Window.screenLeft:window.screenX;

var toppos = (typeof window.screentop = = "Number")?

Window.screenTop:window.screenY;

IE, Safari, Opera, and Chrome provide the Screenleft and Screentop properties, respectively, in English to indicate the position of the window relative to the left and top of the screen. Firefox this provides the same window position information in the Screenx and Screeny properties.

It is possible to use the Movet () and Moveby methods to move the window precisely to a new location. Both methods receive two parameters, where Movet () receives x and a coordinate value for the new position, while Moveby () receives the number of pixels moving in both horizontal and vertical directions.

Both of these methods are disabled by default in opera and IE7 (and later), and neither of these methods is applicable to the framework and can only be used on the outermost window object.

(4) Window size

Firefox, Safari, Opera, and Chrome all offer 4 properties for this: Innerwidth, Innerheight, Outerwidth, and Outerheigh.

IE does not provide properties to get the size of the current browser window, but it provides information about the visible area of the page through the DOM.

The size of the browser window can be adjusted using Resizeto () and using the Resizeby () method. In some cases, it may also be disabled by the browser.

(5) Navigating and opening windows

Use the window.open () method to navigate to a specific URL, or to open a new browser window.

The Close method is only applicable to the closure of pop-up windows opened through window.open, and for the main window of the browser, it cannot be closed without the user's permission.

A pop-up window can call Top.close () to close itself without the user's permission.

Accurately detects if a pop-up window is blocked, the code is as follows:

var blocked = false;

try {

var Wroxwin = = window.open ("http://www.wrox.com", "_blank");

if (Wroxwin = = null) {

blocked = true;

}

} catch (ex) {

blocked = true;

}

if (blocked) {

Alert ("The popup was blocked");

}

(6) Intermittent call and timeout call

The timeout call uses the settimeout () method of the Window object to execute the code after the specified time, and to cancel the time-out call plan that has not yet been executed, you can use the Cleartimeout () method and pass the corresponding timeout call ID as a parameter to it.

The method for setting the intermittent call is SetInterval (), which executes the code once every specified time, and to cancel an intermittent call that has not yet been performed, you can use the Clearinterval () method and pass in the corresponding intermittent invocation ID.

It is generally believed that using a timeout call to simulate intermittent calls is an optimal mode.

(7) System dialog box

The browser uses the alert (), confirm (), and prompt methods to invoke the System dialog box to display the message to the user.

The System dialog box does not have a relationship with the Web page that the browser displays, nor does it contain HTML. Their appearance is determined by the operating system and/or browser settings, not by CSS.

There are also two dialog boxes open via JavaScript, Window.print () and Window.find ().

2. Location Address Bar Object

Provides information about the documents loaded in the current window, as well as some navigational features.

3. Navigator Browser Information Object

4. Screen Object

It is basically used only to indicate the client's ability, including information about the display outside the browser window, such as pixel width and height.

5. History Object

Save the history of the user's Internet access from the moment the window is opened.

Use the Go () method to jump anywhere in the user's history, either forward or backward.

In addition, two shorthand methods for back () and forward () are used instead of Go ();

9th Client Detection

1. Ability Testing

The most commonly accepted form of client-side detection, also known as feature detection, is the most popular, with the goal of detecting the ability of a particular browser before writing code.

2, Strange Force detection

The goal is to identify the specific behavior of the browser and what flaws exist ("quirks" are bugs).

3. User Agent Detection

The browser is identified by detecting the user-agent string.

Detect rendering engines, platforms, Windows operating systems, mobile devices, and game systems.

10th Chapter DOM

1. Node level

The DOM can describe any HTML or XML document as a structure composed of multiple nodes.

(1) Node type

All node types in JavaScript inherit from the node type, so all node types share the same basic properties and methods.

Each node has a NodeType property that indicates the type of the node.

To understand the specifics of a node, you can use both the NodeName and NodeValue properties.

For an element node, the label name of the element is always saved in nodename, and the value of NodeValue is always null.

Each node has a ChildNodes property, which holds a NodeList object. NodeList is a type array object that holds an ordered set of nodes that can be accessed through a location. And this object also has the length property, but it is not an instance of the array.

Each node has a ParentNode property that points to the parent node in the document tree.

Node diagram

The HasChildNodes () method returns True if the node contains one or more nodes.

All nodes have the last property is Ownerdocument, which points to the document node that represents the entire document.

Node Operation:

AppendChild () Adds a node to the end of the ChildNodes list;

The InsertBefore () method places the node in a specific position in the ChildNodes list;

ReplaceChild () Replace node;

RemoveChild () Remove nodes;

Each of these methods operates on a node's child nodes, which means that the parent node must be obtained first to use these methods.

There are two methods that all types of nodes have:

The first is CloneNode (), which is used to create an identical copy of the node that called the method. It accepts a Boolean parameter: The parameter is true, performs a deep copy, which is the copy node and the entire child node tree; The parameter is false, which means that only the node itself is copied, and the copy of the node returned after the copy belongs to the document, but does not have a pointer to the parent node.

Another method is normalize (), which works with text nodes in the document tree. When this method is called on a node, it is looked up in the node's descendant node. If an empty text node is found, it is deleted, and if adjacent text nodes are found, they are merged into a single text node.

(2) Document type

All browsers support the Document.documentelement and Document.body properties.

DocumentElement, FirstChild, and childnodes[0] have the same values, pointing to the

There are several methods that can be used to manipulate the elements of the Document object: getElementById (), getElementsByTagName (), Getelementsbyname ();

There are 4 methods for writing output streams to a Web page: Write (), Writein (), open (), close ().

Write () is written as-is, and Writein () adds a newline character (\ n) at the end of the string.

(3) Element type

The element type is used to represent XML or HTML elements, providing access to element tag names, child nodes, and attributes.

To access the tag name of an element, you can use the NodeName property, or you can use the TagName property.

Each HTML element has the following standard features: ID, title, lang (language code for element content, rarely used), dir (language direction, value ltr or RTL, rarely used), className.

Each element has one or more attributes that are used to give additional information about the corresponding element or content. There are three main DOM methods for manipulating properties, GetAttribute (), SetAttribute (), and RemoveAttribute () respectively.

Create elements using the Document.createelement () method. This method takes only one parameter, either to create the tag name of the element, to pass in the complete element tag, or to include the attribute.

(4) Text type

Text nodes are denoted by the text type and contain plain text content that can be literally interpreted.

The text contained in the node can be accessed through the NodeValue property or the Data property.

You can use document.createTextNode () to create a new text node that receives a parameter-the text to be inserted into the node.

Normalized text nodes can use the normalize () method. If the method is called on a parent element that contains two or more text nodes, all the text nodes are merged into one node, and the nodevalue of the resulting node equals the value of the NodeValue value of each text node before merging.

In contrast, the Splittext method divides a text node into two text nodes, that is, the NodeValue value is split at the specified location.

2. DOM Operation Technology

(1) Dynamic scripting

Refers to a script that does not exist at the time of page load, but is added dynamically by modifying the DOM at some point in the future.

There are two ways to create a dynamic script: Insert an external file and insert the JavaScript code directly:

² dynamically loading external JavaScript files, creating the DOM code for the nodes (the entire process using function encapsulation) is as follows:

function Loadscript (URL) {

var script = document.createelement ("script");

Script.type = "Text/javascript";

script.src = URL;

Document.body.appendChild (script);

}

To load an external JavaScript file by calling this function:

Loadscript ("Client.js");

(2) Dynamic style

There are two elements that can contain CSS styles in an HTML page. Where the,<link> element is used to contain files from external, and the <style> element is used to specify the embedded style.

(3) Operation form

To create a table, you typically have to refer to a label that represents a table row, cell, or table first.

To facilitate building tables, the HTML DOM also adds properties and methods to the <table>, <tbody>, and <tr> elements.

(4) Using nodelist

Essentially, all NodeList objects are queries that run in real time while accessing DOM documents. In general, the number of visits to nodelist should be minimized.

JavaScript advanced Programming-Reading notes (3)