The BOM and Dom of the Web front-end base

First, Introduction

JavaScript is divided into Ecmascript,dom,bom.

The BOM (Browser object model) refers to the browser's objects models, which make JavaScript capable of "talking" to the browser.

The DOM (Document Object model) refers to all the elements of an HTML document that can be accessed by using it.

Second, Window object

Window objects are supported by all browsers. It represents a browser window.

All JavaScript global objects, functions, and variables automatically become members of the Window object.

A global variable is a property of a Window object. A global function is a method of a Window object.

The next HTML DOM document is also one of the properties of the Window object.

Some of the commonly used window methods:

Window.innerheight-Interior height of the browser window

Window.innerwidth-Interior width of the browser window

window.open ()-Open a new window

Window.close ()-Close the current window

Third, the child object of window

1. Navigator Object

A browser object that can be used to determine the browser the user is using, including information about the browser.

Navigator.appname//web browser full name

Detailed string of navigator.appversion//Web browser vendor and version

Navigator.useragent//Client Most information

Navigator.platform//The operating system where the browser is running

2. Screen objects (screens objects, not commonly used)

Some properties:

Screen.availwidth-Available screen widths

Screen.availheight-The available screen height

3. History Object

The Window.history object contains the history of the browser.

Browsing history objects, including the user's browsing history of the current page, but we can not see the specific address, it is simple to forward or backward a page.

History.forward ()//forward one page

History.back ()//back one page

4. Location Object

The Window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page.

Common Properties and methods:

Location.href Get URL

location.href= "URL"//Jump to the specified page

Location.reload () reload page

5. Popup Box

You can create three message boxes in JavaScript: A warning box, a confirmation box, and a prompt box.

(1) Warning box

Warning boxes are often used to ensure that users can get some information.

When the warning box appears, the user needs to click the OK button to continue the operation.

Grammar:

Alert ("Page dangerous! ");

(2) Confirm box (understand)

The confirmation box is used to enable users to verify or accept certain information.

When the confirmation box appears, the user needs to click the OK or Cancel button to continue the operation.

If the user clicks Confirm, then the return value is true. If the user clicks Cancel, the return value is false.

Grammar:

Confirm ("Are you sure?" ")

(3) Prompt box (learn to do)

The prompt box is often used to prompt the user to enter a value before entering the page.

When the prompt box appears, the user needs to enter a value and then click the Confirm or Cancel button to continue the manipulation.

If the user clicks Confirm, then the return value is the value entered. If the user clicks Cancel, the return value is null.

Grammar:

Prompt ("Please enter below", "your Answer")

6. Timing related

(1) setTimeout ()

var t=settimeout ("JS statement", MS)

The SetTimeout () method returns a value. In the above statement, the value is stored in a variable named T. If you want to cancel the setTimeout (), you can use the variable name to specify it.

The first argument to SetTimeout () is a string containing a JavaScript statement. This statement may be such as "alert (' 5 seconds! ')" or a call to a function, such as alertmsg () ".

The second parameter indicates how many milliseconds from the current start to execute the first parameter.

(2) Cleartimeout ()

Cleartimeout (settimeout_variable)

For example: var timer = setTimeout (function () {alert (123);}, 3000)//perform a corresponding function cleartimeout (timer) after the specified time; Cancel settimeout Settings

(3) SetInterval ()

The SetInterval () method invokes a function or evaluates an expression according to the specified period (in milliseconds).

The SetInterval () method keeps calling functions until Clearinterval () is called or the window is closed. The ID value returned by SetInterval () can be used as a parameter to the Clearinterval () method.

Grammar:

SetInterval ("JS statement", time interval)

(4) Clearinterval ()

The Clearinterval () method cancels the timeout set by SetInterval ().

The parameter of the Clearinterval () method must be the ID value returned by SetInterval ().

Grammar:

Clearinterval (ID value returned by setinterval)

For example: var timer = setinterval (function () {console.log (123);}, 3000)//every time the corresponding function clearinterval (timer) is executed; Cancel SetInterval Settings

Example: Timers

<! doctype html>
Iv. DOM
The DOM (document Object Model) is a set of methods for abstracting and conceptualizing the contents of a document.
When a Web page is loaded, the browser creates a Document object model for the page.
The HTML DOM model is constructed as a tree of objects.

1. Find tags
(1) Direct search
document.getElementById gets a label based on the ID Document.getelementsbyclassname gets document.getelementsbytagname based on the class attribute Get tag collections by tag name

Attention:
The JS code that involves DOM manipulation should be placed in the document's location.

(2) Indirect search
Parentelement parent Node Tag element
Children all Child Tags
Firstelementchild first child Label element
Lastelementchild Last Child tag element
Nextelementsibling Next brother Tag element
previouselementsibling previous Sibling Tag element
2. Node operation
(1) Creating nodes (important content)
Grammar:
CreateElement (sign)

Example:
var Divele = document.createelement ("div");

(2) Adding nodes
Grammar:
Somenode.appendchild (newnode);//Append a child node (as the last child node) Somenode.insertbefore (NewNode, a node); Put the added node in front of a node.

Example: Var imgele=document.createelement ("img"); Imgele.setattribute ("src", "http://image11.m1905.cn/uploadfile/s2010 /0205/20100205083613178.jpg "), var D1ele = document.getElementById (" d1 ");d 1ele.appendchild (Imgele);
(3) Deleting a node
Grammar:
Gets the element to delete, called by the parent element to delete.
RemoveChild (the node to be deleted)

(4) Replacement node
Grammar:
Somenode.replacechild (NewNode, a node);

(5) Attribute node
Gets the value of the text node:
var Divele = document.getElementById ("d1") DivEle.innerTextdivEle.innerHTML
Set the value of the text node:
var Divele = document.getElementById ("d1") divele.innertext= "1" divele.innerhtml= "<p>2</p>"


Attribute operation
var Divele = document.getElementById ("d1");d Ivele.setattribute ("Age", "+") Divele.getattribute ("Age") Divele.removeattribute ("Age")
Your own properties can also be directly. property names to get and set
Imgele.src
Imgele.src= "..."

(6) Get Value action
Grammar:
Elementnode.value

Applies to the following labels:
. Input
. Select
. TextArea
var Iele = document.getElementById ("I1"); Console.log (iele.value); var Sele = document.getElementById ("S1"); Console.log (Sele.value); var tEle = document.getElementById ("T1"); Console.log (Tele.value);
(7) Operation of class
ClassName get all Style class names (strings)
Classlist.remove (CLS) deletes the specified class
Classlist.add (CLS) Add Class
Classlist.contains (CLS) existence returns TRUE, otherwise false
Classlist.toggle (CLS) exists on delete, otherwise added

(8) Specify CSS Actions
Obj.style.backgroundcolor= "Red"
JS Operation CSS Properties of the law:
#1. For CSS properties that do not have a horizontal line, you can use the style directly. Property name. Such as:
Obj.style.margin
Obj.style.width
Obj.style.left
Obj.style.position

#2. For CSS attributes with a horizontal line, change the first letter in the back of the middle line to uppercase. Such as:
Obj.style.marginTop
Obj.style.borderLeftWidth
Obj.style.zIndex
Obj.style.fontFamily

V. Events
1. Common Events
OnClick an event handle that is invoked when a user taps an object.
OnDblClick an event handle that is called when the user double-clicks an object.

The onfocus element gets the focus. Exercise: Input Box
The onblur element loses focus. Scenario: For form validation, when a user leaves an input box, the Representative has already entered it and we can verify it.
The contents of the onchange domain are changed. Scenario: Typically used for form elements that are triggered when the element content is changed. (Select linkage)

OnKeyDown A keyboard key is pressed. Application scenario: When the user presses the ENTER key in the last input box, the form submits.
onkeypress A keyboard key is pressed and released.
OnKeyUp a keyboard key is released.
OnLoad a page or an image to finish loading.
OnMouseDown the mouse button is pressed.
OnMouseMove Mouse is moved.
onMouseOut the mouse to move away from an element.
onmouseover mouse moves over an element.

Onselect occurs when the text in the text box is selected.
OnSubmit the Confirm button is clicked, the object used is the form.

2, the Binding method:
(1) Mode one:
<div id= "D1" onclick= "ChangeColor (this);"  > Dot me </div><script> function ChangeColor (ths) {ths.style.backgroundcolor= "green"; }</script> Note: This is an argument that represents the current element that triggered the event. The ths in the function definition process is a formal parameter.
(2) mode two:
<div id= "D2" > Point I </div><script> var divEle2 = document.getElementById ("D2");  Divele2.onclick=function () {this.innertext= "Hello"; }</script>
3. Example
(1) Search box
<! doctype html>
(2) Select linkage
<! doctype html>



The BOM and Dom of the Web front-end base