JavaScript external object, window object, Document object

Bom:

Browser Object Model: Browser objects models, used to access and manipulate the browser window, so that JS has the ability to "dialogue" with the browser, through the use of BOM, mobile windows, change the status of text, perform other not with the page content directly related to the operation, and no relevant standards, but widely supported.

1, the external object is the browser provides (internal) API

2, these objects by the Internet, the browser developers design and development

3, these objects are divided into 2 parts, where the BOM contains the DOM

4, we can access these objects through JS

Dom:

The Document Object model: the Documentation Objects module, which is used to manipulate documents

--Defines a standard way to access and manipulate HTML documents

-the application implements the operation of HTML document data by manipulating the DOM tree.

Window Object

Common methods:

-alert (), confirm ()

-settimeout (), cleartimeout ()

-setinterval (), Clearinterval ()

1, dialog box

Alert (str)

--Prompt dialog box to display the contents of the STR string

Confirm (STR)

--Identify the dialog box to display the contents of the STR string

--Press the OK button to return true, and other actions return false

Prompt ("")

--Input box

For example:

1) Pop-up Box

function F1 () {

Alert ("Hello!");

}

2) Confirmation Box

function F2 () {

var v = confirm ("Did you eat it?");

Console.log (v);

}

3) Input Box

function F3 () {

var v = prompt ("What you eat.") ");

Console.log (v);

}

2, Timer

1 more for the web dynamic clock, production countdown, happy Lights effect

2) Periodic clock

--Execute code at a certain interval and cycle

3) Disposable Clock

--Executes the code after a set interval, rather than executing it immediately after the function is called

3. Periodic timer

1) setinterval (exp,time): Periodic trigger code EXP

-EXP: Executing statements

-time: Time period, in milliseconds

-Returns the timer object that has been started

2) Clearinterval (TID): Stop-Start timer

-tid: The Timer object started

//Every n milliseconds to perform a function repeatedly,

Until the stop condition is reached.

function f4 () {

Start timer

var n=5;

Start timer, return the ID of the timer

Used to stop the timer

var id = setinterval (function() {

Console.log (n--);

if (!n) {

Stop this timer.

Clearinterval (ID);

Console.log ("BANG");

}

},1000);

/*

Starting the timer is equivalent to starting a spur line,

The current method F4 is equivalent to the main thread, and 2 threads execute concurrently

Do not wait with each other, so the main thread is after the spur path

Run down now, and the feeder will take 1 seconds to execute

*/

}

Through the periodic timer to realize the clock function, it is necessary to note that when the Start button multiple clicks to automatically ignore the back click, only calculate the first click event. The simple principle is the following diagram:

4, one-time timer

SetTimeout (exp,time): One-time trigger code EXP

-EXP: Executing statements

-time: Time interval, in milliseconds

-Returns the timer that has been started

Cleartimeout (TID): Stop-Start timer

-tid: The Timer object started

Postpone N-millisecond to perform a function once, after execution

Automatically stop, or you can manually stop before it is executed

var id;

function f5 () {

Start the timer, and if you want to stop the timer before it is executed, you need to use the ID

id = settimeout (function() {

Console.log ("Ding ding Ding");

},3000)

}

Analog mail Send function, when click send button wait 3 seconds, if click in 3 seconds to undo, then cancel this send, otherwise 3 seconds to automatically send mail, schematic diagram as follows

 

Screen Object

The--screen object contains information about the client display screen

--often used to get the resolution and color of the screen

--Common Properties

-width/height

-availwidth/availheight

For example:

Console.log (Screen.width);

Console.log (Screen.height);

Console.log (Screen.availwidth);

Console.log (Screen.availheight);

History Objects

The-history object contains URLs that the user has visited

-length property: Number of URLs in browser history list

-Method

-back ()

-forward ()

-go (num)

Alert (history.length)

History.forward ();

History.back ();

History.go (-2);

Location Objects

The--location object contains information about the current URL

-often used to get and change the currently browsed URLs

--href property: The Address of the Web page that the current window is browsing

Function F1 () {

var b = Confirm ("Are you sure you want to leave this page?");

if (b) {

Location.href= "http://www.baidu.com";

}

}

--Method

-reload (): Rewrite load current URL, press refresh button

Location.reload ();

Navigator Objects

The--navigator object contains information about the browser

-often used to get client browser and operating system information

Navigator.useragent;

Console.log (navigator.useragent)

Dom Overview

--Document Object model

--When the page is loaded, the browser creates the Document Object model for the page

Through the programmable object model, JS has acquired enough ability to create dynamic HTML

--JS can change all HTML elements in a page

--JS can change all HTML attributes on a page

--js can change all CSS styles in a page

--js can respond to all events in the page

DOM node tree:

A tree in which a DOM model is constructed as an object

The root of this tree is the document object.

The DOM provides the following actions

--Find nodes

--Read node information

--Modifying node information

--Create a new node

--Delete node

1) Read, modify

A) node Information

--nodename: node Name

--element node and Attribute node: label or property name

--Text node: Always be #text

--Document node: Always be #document

--nodetype: Node type

--Return value

--Element node: return 1

--Attribute node: returns 2

--text node: back to 3

--Note node: return 8

--Document node: back to 9

B the contents of the element node

--innertext

-Sets or gets the text that is inside the start and end tags of an object

--innerhtml

-Sets or gets the HTML that is inside the start and end tags of an object

C) Node Properties

--getattribute () Method: Gets the value of a property based on the property name

--setattribute (), RemoveAttribute ()

To object HTML tags, attributes, and CSS styles and both

D) The style of the element node

--style Property

--node.style.color

--node.style.fontsize;

--classname Property

O.classname= "style class name";

2) Query

Query node

--If you need to manipulate HTML elements, you must first find the element

--How To query nodes

--Query by ID

document.getElementById ();

-Returns the element node by specifying an ID, ignoring the structure of the document;

-Find any HTML element in the entire HTML document;

-Returns NULL if the ID value is incorrect;

--Through the hierarchy (node relationship) query

-parentnode

Follow the upper and lower hierarchies of the document to find a single parent node

-childnodes

Find multiple child nodes by following the document's upper and lower hierarchies

--Query by tag name

getElementsByTagName ()

Returns all elements based on the specified label name

Ignore the structure of a document

Find all the elements in an entire HTML document

If the label name is incorrect, the list of nodes with length 0 is returned

returns a list of nodes (array)

Use the Length property of the node list to get the number

[Index]: Locate the specific element

--Query By Name property

Document.getelementsbyname ()

Query based on the value of the label's Name property