JavaScript Learning 5

One, Dom object

1. DOM object: Document Object Model, which is used to provide properties and methods for manipulating HTML documents .

2, the classification of the DOM:

A, core DOM: provides properties and methods for manipulating XML and HTML Documents

B, HTML DOM: It is used to specifically manipulate HTML documents and XHTML documents

C, XML DOM: It is used to specifically manipulate XML documents in the Employment class speaking

D, CSS DOM: It is used to specifically manipulate the style of this property

E, Events Dom: Event Dom

Second, the core DOM

1. Properties of the core DOM

FirstChild first child node

lastchild last child node

ChildNodes List of child nodes even if there's only one child node in it, it's an array , and it's accessed in the same way that the arrays are accessed by subscript.

ParentNode Parent Node

InnerHTML used to set or return the contents of a bilateral tag.

NextSibling next Sibling node

PreviousSibling Previous sibling node

the value of the NodeValue node

name of the NodeName node

2, the core DOM on the operation of tag attributes: adding and deleting

Example: <table width= "></table" >

the Label object to locate the action for . SetAttribute ( property name , property value )

function setAttr () {        // to find the action label object. SetAttribute ();        document.getElementById ("table"). SetAttribute ("width");        document.getElementById ("table"). SetAttribute ("Border", 5);        document.getElementById ("table"). SetAttribute ("BgColor", "#f00");    }

the Label object to locate the action for . getattribute ( attribute name )

function getAttr () {        /// to find the label object for the operation. getattribute (attribute name)        alert (document.getElementById (" Table "). getattribute (" width "));    }

the Label object to locate the action for . removeattribute ( attribute name )

function removeattr () {        /// to find the label object for the operation. RemoveAttribute (property name)        document.getElementById (" Table "). RemoveAttribute (" width ");        document.getElementById ("table"). RemoveAttribute ("border");        document.getElementById ("table"). RemoveAttribute ("BgColor");    }

3, the core DOM of the operation of the label

Create tag: document.createelement (" tag name ")

Append tag: parent Object . AppendChild ( the Label object to append ); append the Label object to the end of the parent object

　　　　　The Parent object . InsertBefore (the label object to append , before which to append ); append the Label object to the front

Remove Tag: Parent Object . RemoveChild ( the Label object to delete )

Third, HTML DOM

document.getElementById ( attribute value of ID ) function: Gets the label object by the attribute value of the ID

document.getElementsByTagName (" tag name ") function: Get object by tag name

Document.getelementsbyname ( the property value of name) Gets the element through the property value of name in the label　　

Four, CSS DOM

CSS DOM It is used to manipulate the style property of the label here style It is also an object

Format:

Assignment Value: the Label object to manipulate . style.css Style Property = "CSS property value"

Value: The label object to manipulate . STYLE.CSS Style Properties

V. Events

1. How events are bound

Inline binding:< Tag Event name ="handler for event"></ label > handler for event is written in in the HTML tag　　　　

Dynamic binding: the Label object to manipulate . Event name = handlers for events The handler for the event is written in the in JS code　　　　

2. List of events

OnClick: When the mouse is clicked

OnDblClick: When the mouse double-clicks

onmouseover: When the mouse is over

onmouseout: When the mouse is away

onfocus: When you get the cursor focus

Onblur: When you lose focus

OnSubmit: This event is bound to the form tag when the form is submitted

onchange: Used for drop-down lists when content changes

JavaScript Learning 5