JavaScript Basics Section 3

1. Node and type

1) Document node entire HTML document

2) Element node: HTML tag in HTML document

3) Attribute node: An attribute of an element that can be manipulated directly by property

4) Text node: is a child node of an element node whose contents are text

2. Event: Interactive behavior between user and browser

1) The definition of the interactive event 1:onclick: An event occurs when the mouse clicks, as follows

<button id= "BT" Onclick=alert ("Hello") > Hello! </button>

2) The definition of the interactive event 2:ondblclick: event occurs when the mouse double-clicks

<button id= "BT" Ondblclick=alert ("Hello") > Hello! </button>

3) The definition of the interactive event 3:onmousemove: When the mouse moves to a close position, the corresponding event is found

<button id= "BT" Onmousemove=alert ("Hello") > Hello! </button>

The above method is not recommended: coupling is too strong;

3. Get ELEMENT nodes

3.1 Call via Doucument:

1) document.getElementById: The corresponding individual node is obtained according to the ID's attribute as follows:

var Bt=document.gettelementbyid ("id");

2) document.getElementsByTagName: Gets the array with the name of the specified node according to the tag name, the length property of the array object can get the lengths of the array as follows:

var lis= document.getelementsbytagname ("Li"); alert (lis.length); Can be used for lists, etc.

3) Document.getelementsbyname: Gets an array of the specified node names according to the name of the tag, the length property of the array object can get the lengths of the array, for example:

var gendernodes=document.getelementsbyname ("Gender");  alert (gendernodes.length); Can be used for multiple boxes, etc.

4) Other two methods IE is not supported, so it is not recommended to use

5) Body: Gets the Body property, document. Body

6) DocumentElement: corresponding to the HTML root tag, document. DocumentElement

7) All: represents all elements of the page document.all

8) Getelementsbyclassname (): Queries a set of element node objects based on the class attribute value of the element document. Getelementsbyclassname ("class") IE8 and below do not support

9) Queryselector () can be used as a parameter through the CSS selector string; document. Queryselector ("Div.box") IE8 and above are supported, but this method only returns the first one if there are multiple elements that match this condition.

Queryselectorall ("Div.box") for Queryselector () can query all, put into the array

3.2 called through ELEMENT nodes

1) getElementsByTagName () method: Returns the descendant node of the specified label name of the current node in the same way as the document, but with a different scope;

Window.onload=function () {

var Bt=document.getelementbyid ("BT");

Bt.onclick=function () {

var City=document.getelementbyid ("City");

var lis=city.getelementsbytagname ("Li");

for (Var i=0;i<lis.length;i++) {

alert (lis[i].innerhtml);}}}

2) ChildNodes Property: Represents all child nodes of the current node, all nodes including text, such as carriage return after </li>, but IE8 and below do not use the same as the carriage return blank as child nodes

Window.onload=function () {

var Bt=document.getelementbyid ("BT");

Bt.onclick=function () {

var City=document.getelementbyid ("City");

var lis=city.childnodes;

for (Var i=0;i<lis.length;i++) {

alert (lis[i].innerhtml);

}

}

}

3) FirstChild Property: Represents the first child node of the current node;

4) Firstelementchild Property: Represents the first child element of the current node, but does not know this IE8 and the following browser;

5) LastChild Property: Represents the last child node of the current node;

6) Lastelementchild Property: Represents the last child element of the current node, but does not know this IE8 and the following browser

7) Children Property: represents all child elements of the current node, where the element refers to a label, as follows:

Window.onload=function () {

var Bt=document.getelementbyid ("BT");

Bt.onclick=function () {

var City=document.getelementbyid ("City");

var Lis=city.children;

for (Var i=0;i<lis.length;i++) {

alert (lis[i].innerhtml);}}}

8) ParentNode Property: Represents the parent node of the current node; the parent node may have only elements that have no text;

9) PreviousSibling Property: Represents the previous sibling node of the current node and may get blank text

Previouselementsibling Property: Represents the previous sibling element of the current node, IE8 and below do not support

One) NextSibling property: Represents the next sibling node of the current node and may get blank text

Nextelementsibling Property: Represents the last sibling node of the current node, IE8 and below do not support

innerHTML Properties: Output text content

InnerText properties: Similar to INNERTHML, the difference is that he will remove the label

4. Page Loading Instructions

Onload: Loading the entire page after loading

Binding mode: Image window layer can be, but we often use the window binding: window.onload;

5. Get the attributes and settings of the element

1) to obtain the class, you need to change the corresponding to classname;

<button id= "BT" Name= "Zhang San" class= "class" > Hello! </button>

Window.onload=function () {

var Bt=document.getelementbyid ("BT");

Bt.onclick=function () {

var bt= document.getElementById ("BT");

alert (bt.classname);}}

2) In addition to the above-mentioned special, get Id,name and other property methods are similar to the following

<button id= "BT" Name= "Zhang San" class= "class" > Hello! </button>

Window.onload=function () {

var Bt=document.getelementbyid ("BT");

Bt.onclick=function () {

var bt= document.getElementById ("BT");

alert (bt.name);}}

3) Obtain the text information as follows

<button id= "BT" Name= "Zhang San" class= "class" > Hello! </button>

Window.onload=function () {

var Bt=document.getelementbyid ("BT");

Bt.onclick=function () {

var bt= document.getElementById ("BT");

alert (bt.innerhtml);}

4) The content and object of the setting property are similar;

6.dom Additions and Deletions check

1) createlement () property: Creates an Element node object var div= document. Createlement ("div")

2) createTextNode () property: Create a text node var text=document. createTextNode ("text")

3) AppendChild () property: You can add a child node parent node to a parent node. AppendChild (child node) div. appendchild (text) is loaded by default at the last position

4) InsertBefore () property: Inserts a new node parent node before the specified child node. InsertBefore (New child node, original child node)

5) RemoveChild () Property: Delete child node parent node. removechild (Child node)

6) innerHTML Property: Add Var names=document. getElementById (Names "")

names.innerhtml+= ("<li> Zhang San </li>") are defective because they are new and the improvement methods are as follows

var li=document.createelement ("Li"); Li.innerhtml= "Guangzhou"; City.appendchild (LI);

7) Confirm () Pop-up Box () for pop-up confirmation or cancellation confirm returns a return value that is False if the click confirms true;

7. Cancel the default jump for a webpage: set Renturn at the end of the event function false can also be written in the href attribute in the form of javascript:;

Add a property to a text link

href= "JavaScript";

8. Modify and read CSS styles

Syntax: element. style.width Note that there is a minus sign in the CSS style name is not valid in JS, you need to change this style name to the Hump name law such as Background-color I backgroundcolor, if the style is written! Important then the style will have the highest priority, read the way Box1.style.width

The Style property reads all inline styles that cannot read styles in the style sheet, Currentstyle gets the currently displayed style if no formatting is set then the default value is read only by IE support; not supported by other browsers In other browsers can use getComputedStyle () This method to get the current property of the element, this is the window method, can be used directly, which requires two corresponding parameters, the first, to get the elements of the style, the second is a pseudo-element, generally choose NULL, The method returns an object that encapsulates the style that corresponds to the current element, such as getComputedStyle (box1,null). Width, Currentstyle and getComputedStyle () there is a certain difference, getComputedStyle () does not set width is read auto, while Currentstyle gets the value is currently displayed pixel value, getComputedStyle () does not support IE8 and the following IE browser

Custom General-Purpose:

Function GetStyle (obj,name) {

If (window.getComputedStyle) {

Return getComputedStyle (obj,null) [name];}else{

return Obj.currunstyle "name";}

}alert (GetStyle (box1, "width"))

ClientWidth clientheight These two properties can get the visible width and height of the element, which is the property can only be read and cannot be changed

• Offsetwidth offsetheigth including the entire width and height of the element can only be read and cannot be changed
• Offsetparent gets the current element positioned by the parent element gets the current element the nearest ancestor element can only be read and cannot be changed
• Offsetleft the horizontal offset of the current element relative to the anchor element can only be read and cannot be changed
• offsettop the vertical offset of the current element relative to the positioned element can only be read and cannot be changed

ScrollHeight the height of the scrolling element can only be read and cannot be changed

ScrollWidth gets scrolling width can only be read and cannot be written

ScrollLeft get the relative distance of the horizontal scroll bar scrolling

ScrollTop get the distance of the vertical scroll bar scrolling

ClientWidth equals the width of the setting minus the distance of the scrollbar

9. Bubbling

Most events are passed up most of the bubbling is useful

If you do not want bubbling can be canceled by the object corresponding to the bubbling cancelbubble

Event bubbling can reduce the binding of events and can reduce the number of bindings

Event Events

Target indicates the object being triggered

• Onscroll: triggered when scroll bar is scrolled

Event object:

KeyCode the corresponding code to get the key

Onkeydown a button press will trigger continuously

Onkeyup each time release does not trigger continuously

Onmousedown do not release when the mouse is pressed

Onmouseup trigger when Mouse is released

Onmousemove: Triggers when the mouse moves

Clientx The x-coordinate of the mouse when the mouse is triggered

Clienty the y-coordinate of the mouse when it starts

OnMouseWheel the mouse wheel when scrolling triggers incompatible dommousescroll in Firefox to bind events

Firefox needs to be addeventlistener by the appropriate bindings

If (!event) {event=window.event}

function (event) {var x=window.event.clientx};

IE8 does not pass data directly, but is saved in window

One. Bind bindings

Use an object. event = form of a function binding response function

He can only bind an event for one element at a time.

AddEventListener () This method can also be used for element binding functions

Event-triggered string do not on

The callback function is called when the time is triggered

Whether to capture the triggering time again requires a Boolean value that generally passes false

Bt.addeventlistener ("click", Function () {

},false)

Bt.addeventlistener ("click", Function () {

},false)

The first bound execution, after the binding after the execution, the equivalent of a collection in Java, add the corresponding element in the collection IE8 and the following does not support

In IE8 and below you can use attachevent to solve this problem using the same thing, where the events need to be on

The difference is that after binding executes first

Bom

1) BOM Object Window Navigator location

2) window The entire browser is also a global variable in the Web page

3) Navigator represents the current browser information through the object can obtain the corresponding information can be used to identify the browser useragent browser information ActiveXObject only in IE there is a Boolean into Fasle, you can take advantage of the inclusion of a property

4) Location represents the current address bar information can also operate the browser page settings can be redirected to the Web page (you can also use a relative path) Reload Refresh the page assign is also redirected page, refresh the page has a cache, you can also set the clear cache If you pass a true in the reload method, empty the cache, replace replaces, you can also replace the jump page with a new page, the replace jump cannot be rolled back, and replace does not generate a fallback record

5) History Browser can obtain the history of the Operation browser through this object, for privacy reasons, the object can not get the specific history can only manipulate the browser forward or backward, and the operation only when the second access is valid where the length property can get the current number of accesses Back () Jump to the next page forward () jump to the following page go () can jump to the specified page 1 to indicate a forward Jump 1 page 2 is a forward jump two pages-1 is to jump back one page-2 is to jump back two pages

6) screen can get information about the display

13. Timers

SetInterval: Timed call can call a function to a Java-like sleep every time

Parameter callback function the time unit of each callback is milliseconds

Clearinterval (timed object) Shutdown timer is called once per click we can only close the last timer to turn off a timer before opening a timer

Settimeout: Deferred call, other similar setinterval delay calls will only be performed once this is the difference between setinterval

Operation of Class 14

1) ClassName Modified value

2) Add the attribute value AddClass (OBJ,CN) to a class to add an object of class attribute obj to add the element of class, CN to add the value of class

3) Hasclass (OBJ,CN) to determine if there is no CN in obj This class has to return True no return false

4) removeclass (OBJ,CN) Delete the specified class attribute

5) Tagclass (OBJ,CN) Delete the corresponding class without adding it

JavaScript Basics Section 3