On the front of the BOM and DOM

The front end of the BOM and DOM

Foreplay

So far, we've learned some simple JavaScript syntax. But these simple syntax, and browser did not have any interaction.

That is, we can not make some some interactive web we often see, we need to continue to learn BOM and DOM knowledge.

JavaScript is divided into ECMAScript, DOM, BOM.

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.

** If the document contains a frame (frame or iframe tag), the browser will create a window object as an HTML document, and create an additional window object for each frame. *

** does not apply to public standard window object, but all browsers support the object. *

All JavaScript global object, functions, and variables are automatically members of the window object.

Global variables are window object's properties. Global function is the window object.

Then talk about the HTML DOM document window is one of the attributes of the object.

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 (to understand)

Browser object, the object can be determined by the browser used by the user, including browser-related information.

navigator.appName // Web browser full name

Details string navigator.appVersion // Web browser vendors and versions

navigator.userAgent // client most of the information

// operating system the browser is running in navigator.platform

screen objects (to understand)

Screen objects, is not commonly used.

Some properties:

• screen.availWidth - available screen width
• screen.availHeight - available screen height

history object (to understand)

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 One Page

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.

Common attributes and methods:

location.href get URL

location.href = "URL" // jump to a specific page

location.reload () to reload the page

Pop-up box

Three can be created in JavaScript message box: alert box, check box, message box.

Alert box

Alert box is often used to ensure that users can get some information.

When the warning box appears, users need to click the OK button in order to proceed.

grammar:

alert ( "Did you see that?");

Confirmation box (to understand)

Check box for the user to verify or receive certain information.

When the confirmation box appears, users need to click OK or Cancel button in order to proceed.

If the user clicks to confirm, the return value is true. If the user clicks Cancel, the returned value is false.

grammar:

confirm ( "Are you sure?")

Prompt box (to understand)

Prompt box is often used to prompt the user to input a value before entering a page.

When the prompt box appears, users need to enter a value, then click OK or Cancel button to continue to manipulate.

If the user clicks to confirm, the return value is entered. If the user clicks Cancel, the returned value is null.

grammar:

prompt ( "Please enter it 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()

grammar:

var t=setTimeout("JS语句",毫秒)

setTimeout () method returns a value. In the above statement, the value is stored in a variable named in t. If you wish to cancel this setTimeout (), you can use this variable name to specify it.

The first parameter setTimeout () is a string containing a JavaScript statement. This statement may be as "alert ( '5 seconds!')", Or a call to a function, such as alertMsg () ".

The second parameter indicates a parameter from the implementation of how many milliseconds from the current (1000 ms is equal to one).

clearTimeout()

grammar:

clearTimeout(setTimeout_variable)

For example :

// perform a corresponding function after a specified time

were hours = setTimeout (function () {alert (123);} 3000)

// set to cancel the setTimeout

clearTimeout(timer);

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.

grammar:

setInterval ( "JS statement", the time interval)

return value

Can be passed to a window.clearInterval () so as to cancel the value of the code is executed periodically.

clearInterval()

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

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

grammar:

clearInterval (setinterval ID value returned)

for example:

// time to time to perform a corresponding function

was h = setInterval (function () {console.log (123);}, 3000)

// set to cancel the setInterval

clearInterval(timer);

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).

HTML DOM model is constructed as an object tree.

HTML DOM tree

DOM standard specifies that each component of an HTML document is a node (node):

• Document node (document object): On behalf of the entire document
• Element node (element object): represents an element (tag)
• Node text (text object): Representative elements (tags) in the text
• Node attribute (attribute objects): represents an attribute element (tag) have properties
• Comments are comment nodes (comment Object)　

JavaScript can create dynamic HTML through DOM:

• JavaScript can change all the HTML elements on the page
• JavaScript can change the properties of all HTML pages
• JavaScript can change all CSS styles page
• JavaScript can react to all events page

Find label

Direct Find

obtaining a tag ID according document.getElementById

The class attribute acquisition document.getElementsByClassName

document.getElementsByTagName get label collection under the label name

note:

DOM operations related to the JS code should be placed in which position the document.

Indirect Find

parent tag element parentElement

children all sub-labels

The first sub-element tag firstElementChild

lastElementChild last child element tag

nextElementSibling next sibling element tag

Brothers label elements on a previousElementSibling

2 | 3 node operation

Creating nodes

grammar:

createElement (name tag)

Example:

var divEle = document.createElement("div");

Add Nodes

grammar:

Append a child node (a child node as the last)

somenode.appendChild(newnode)；

The added nodes placed in front of a node.

somenode.insertBefore (newnode, 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"); d1Ele.appendChild(imgEle);

Delete node:

grammar:

Gets the element you want to delete, delete the method by calling the parent element.

somenode.removeChild (node ​​to be removed)

Replace node:

grammar:

somenode.replaceChild (newnode, a node);

Attribute nodes

Gets the value of the text node:

var divEle = document.getElementById("d1")

divEle.innerText

divEle.innerHTML

The text value of the node:

var divEle = document.getElementById("d1")

divEle.innerText="1"

divEle.innerHTML="<p>2</p>"

attribute operation

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18")

divEle.getAttribute("age")

divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置

imgEle.src

imgEle.src="..."

Gets the value of the operation

grammar:

elementNode.value

For the following tags:

• .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);

 

class action

className get all the style class name (string)
classList.remove (CLS) to delete the specified class classList.add (cls) Add Class
classList.contains (cls) Returns true existence, otherwise it returns false
classList.toggle (CLS) exist, remove, otherwise, add

Specifies the CSS operation

obj.style.backgroundColor="red"

JS CSS property law operation:

1. For the CSS property not used directly in the horizontal line of the general style. Attribute name. Such as:

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2. CSS properties contained in the horizontal line, the first letter capitalized later horizontal line can be replaced. Such as:

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

event

One of the new features of HTML 4.0 is the ability to make HTML browser event triggers the action (action), like starting a JavaScript when a user clicks on an HTML element. The following is a list of attributes that can be inserted into the HTML tags to define event actions.

Common events

Click event handler called when an object when the user onclick.

ondblclick when the event handler called when the user double-clicks an object.

onfocus element receives the focus. // Exercise: input box

onblur element loses focus. Scenario: for form validation, when the user leaves an input box, enter the representative has finished, we can verify it.

Onchange field content is changed. Scenario: commonly used form element, the element is triggered when the content is changed (select linkage).

onkeydown a keyboard key is pressed. Scenarios: when the user presses the Enter key at the end of an input box, form submission.

onkeypress of a keyboard key is pressed and released.

onkeyup a keyboard key is released.

onload a page or an image has finished loading.

onmousedown mouse button is pressed.

onmousemove mouse is moved.

onmouseout mouse is moved off an element.

onmouseover mouse over an element.

onselect occurs when the text in the text box is selected.

onsubmit confirmation button is clicked, the object using a form.

Binding way:

method one:

<div id="d1" onclick="changeColor(this);">点我</div>

<script>

function changeColor(ths) {

　　 ths.style.backgroundColor="green";

}

</script>

note:

this is an argument that is the current element that triggered the event.

Function definition during ths as parameter.

Second way:

<div id="d2">点我</div>

<script>

　　 var divEle2 = document.getElementById("d2");

　　 divEle2.onclick=function () {

　　　　 this.innerText="呵呵";

　　　}

</script>

 

Examples of events:

Timer

Search Box Example

select Linkage

2|5window.onload

When we bind events to elements on the page, you must wait until the document is loaded. Because we can not give binding element of a non-existent event.

window.onload event fires when the document load process ended. At this point, all objects in the document are located in the DOM, and all images, scripts, links, and sub-frames have finished loading.

Note: () function exists to cover the phenomenon .onload