BOM and DOM

BOM (Browser Object Model) refers to the browser object model that enables JavaScript capable browser to "talk."

DOM (Document Object Model) refers to the document object model, through which you can access all the elements of the HTML document.

Window object is one of the top target client JavaScript, because the window object is the common ancestor of most of the other objects, when calling window object's methods and properties, you can omit a reference to the window object. For example: window.document.write () can be abbreviated as: document.write ().

window object

All browsers support the window object. It represents the browser window.

Some commonly used Window methods:

Internal height of the browser window - window.innerHeight
window.innerWidth - inside the browser window width
window.open () - opens a new window
window.close () - Close the current window

window child objects

navigator object

navigator.appName　　// Web browser full name 
navigator.appVersion　　// Web browser vendors and detailed version of the string 
navigator.userAgent　　// client most of the information 
navigator.platform　　　// operating system is running in the browser

screen objects

　　screen.availWidth - available screen width

　　screen.availHeight - available screen height

history objects

　　window.history object contains the browser's history.

　　Browsing history object that contains the user's current page browsing history, but we can not see the specific address, can simply be used to move forward or backward a page.

history.forward ()   // forward a 
history.back ()   // Go Back One Page

The location object

window.location object is used to get the address (URL) of the current page, and the browser is redirected to the new page.

location.href get the URL of 
location.href = " the URL of "  // jump to a specific page 
location.reload () to reload the page

Pop-up box: Warning message box box box confirmation

Alert ( " Did you see that? " ); 
Confirm The ( " Are you sure? " ) 
prompt ( " Please enter below " , " your answer " )

Timing-related

By using JavaScript, we can in a certain interval of time later to execute code, and not immediately after the function is called. We call timed events.

setTimeout()

Syntax: var T = the setTimeout ( " the JS statement " , ms)

setInterval()

setInterval () method in accordance with a specified period (in milliseconds) to the calling function or calculation expression.

setInterval () method will continue to call the function, until the clearInterval () is called, or the window is closed. A setInterval () ID is used as a parameter value returns the clearInterval () method.

Syntax: setInterval ( " JS statements " , interval)

clearInterval()

the clearInterval () method cancels the timeout setInterval () set.

The clearInterval parameter () method must be the ID value of setInterval () returns.

Syntax: clearInterval (setinterval ID value returned)

<! DOCTYPE HTML> 
<HTML lang = " EN " > 
<head> 
    <Meta charset = " UTF-. 8 " > 
    <title> the Title </ title> 
</ head> 
<body> 
<Script> 
    function foo () { 
        Alert ( 123 ) 
    } 
    function Show () { 
        var T = the setInterval (foo, 3000 ); # a specified interval (in milliseconds) to the calling function or calculation expression. 
        Inner function () { 
            the clearInterval (T) # timeout canceled by the setInterval () set. 
        } 
        The setTimeout (Inner,
</script>
</body>
</html>

JUDGMENT

DOM (Document Object Model) is a set of methods for the content of the document and abstract conceptualization.

When the page is loaded, the browser will create a page of a document object model (Document Object Model).

Find label

　　Direct Find

According to a tag ID acquisition document.getElementById 
document.getElementsByClassName obtained according to the class attribute 
document.getElementsByTagName acquired under the label name tag collection

　　Indirect Find

parentElement parent tag element 
children of all sub-tabs 
firstElementChild first child tag element 
lastElementChild last child element tag 
sibling element tag nextElementSibling next 
sibling elements on the label previousElementSibling

navigator object

Guess you like