JavaScript Learning Notes Grooming (DOM object)

Dom--document (HTML XML) object Modle,Document Object (Dom core object), the Document object is part of the Window object and can beWindow.document property to access it, the Document object allows us to from the script the HTML page of theaccess to all elements1. Properties

title--Returns or sets the title of the current document

url--returns the URL of the current document

bgcolor--setting the background color of a document

Fgcolor setting the foreground color of a document (setting text color)

2. Methods

getElementById (idname)--Returns a reference to the (first) object with the specified ID

getElementsByTagName (tagname)--Returns a collection of objects with the specified tag name

Getelementsbyname (name)--Returns a collection of objects with the specified name

Getelementsbyname (name) is incompatible and is primarily applicable to forms.

IE (6-8): If the object's standard properties contain name, it can be used correctly. Otherwise it can not be used, return 0.

FF: This method can be used in any situation.

Getelementsbyclassname ()--Returns a collection of objects with the specified class name

//Getelementsbyclassname, compatible with processing ie6-8functionWclassname (className) {if(document.getelementsbyclassname) {returnDocument.getelementsbyclassname (className); }Else{        vartag= document.getelementsbytagname ("*"); varlengths=tag.length; vardivs=[];  for(vari=0; i<lengths; i++) {            if(tag[i].classname==className)        {Divs.push (Tag[i])}} returndivs; }}    

3. Object collection

all--collection of all elements (with compatibility issues)

forms--returns a reference to all form objects in the document

anchors--returns a reference to all anchor objects in the document (a link)

images--returns a reference to all the image objects in the document

links--returns references to all area and link objects in the document

actions on the contents, properties, styles of a Document object

I. Contents of operation

innerhtml--used to set or get the contents of the object's start and tags (identify HTML tags)

innertext--used to set or get object start and content within tags (IE)

textcontent--used to set or get object start and content within tags (FF)

outerhtml--used to set or get the contents of the start and tag including this object (identify HTML tags)

outertext--used to set or get the contents of the start and tag including this object

Second, Operation Properties

Object. property = value (set, GET, add property (property value))

GetAttribute ("property") gets the value of the given property

SetAttribute ("Property", "value") setting or adding properties

Three, the Operation style

Object. Style. property = value (set, GET, add property)

If the attribute is "-" linked, the "-" is removed and the first letter of the following word is capitalized

Form Object Operationsfirst, get the form reference

1. Access by direct positioning method

document.getElementById ();

Document.getelementsbyname ();

document.getElementsByTagName ();

<form name= "MyForm" id= "Form1" action= "" method= "post" ></form>document.getElementById (' Form1 ') );d ocument.getelementsbyname (' MyForm ') [0];d ocument.getelementsbytagname (' form ') [0];

2. Get a reference by collection

document.forms[Subscript]

document.forms["Name"]

Document.forms.name

<form name= "MyForm" id= "Form1" action= "method=" POST "></form>document.forms[0]; document.forms[' MyForm '];d ocument.forms.name;

3. Get directly by name (for forms only ) if the element under the form has the same name name, the element under it is called

Document.name

<form name= "MyForm" id= "Form1" action= "method=" POST "></form>Document.myform;

second, get the form reference

1. Direct Access

document.getElementById ();
Document.getelementsbyname ();
document.getElementsByTagName ();

<input type= "text" name= "name" id= "Idname" value= "Zhangsan" >document.getElementById (' idname '); Document.getelementsbyname (' name ') [0];d ocument.getelementsbytagname (' input ') [0];

2. Get through the collection

The form object. Elements----Get a collection of all the elements inside the form
The form object. elements[Subscript]
The form object. elements["Name"]
The form object. Elements.name

<form name= "Names" id= "Form1" action= "" method= "post" ><input type= "text" name= "name" id= "Idname" value= " Zhangsan "></form>document.getElementById (' Form1 '). Elements[0];d ocument.getelementsbyname (' names '). elements[' name '];d ocument.getelementsbytagname (' form ') [0].elements.name;

3. Directly in the form of name

Form object. Name

<form name= "Names" id= "Form1" action= "" method= "post" ><input type= "text" name= "name" id= "Idname" value= " Zhangsan "></form>document.getElementById (' Form1 '). Name;

properties and methods of form elements

1. Get the value of a FORM element

The form element object. Value---Get or set values

<input type= "text" name= "name" id= "Idname" value= "Zhangsan" >var a=document.getelementbyid (' Idname ' ); A.value;a.value= ' Chen '

2. Properties

Disabled---Gets or sets whether the form control disables true false

Form---a reference to a form that contains this element

3. Methods

Blur () Loses focus

Focus () get focused

************************************

<input type= "Text" >

Value---Sets or gets the values of the text field

// Click to clear the default value<input type= "text" value= "search" onfocus= "if (this.value== ' search ') this.value= '" onblur= " this.value=this.value== '? ' Search ': This.value ' >

<input type= "Radio" >

Checked---Returns or sets the selected state of the radio. Checked (true), unchecked (false)

Value---Gets the selected value, you must first determine the selected state.

<input type= "checkbox" >

Checked--- Returns or sets the selected state of the button. Checked (true), unchecked (false)

Value--- to get the selected value, you must first determine the selected state

<select><option></option></select>

Selected--- Returns or sets the selected state of the radio. Checked (true), unchecked (false)

SelectedIndex--- set or return the index number that is selected in the drop-down box

<textarea></textarea>

Value is obtained in the text area

onkeyup button to leave

ONKEYDOWM Press the button

Events

OnSubmit---Events that are triggered when a form is submitted
onblur---when the input box loses focus
onfocus---When the input box gets focus
onchange---drop-down box value change

Form submission

Form object. Submit ()

JavaScript Learning Notes Grooming (DOM objects)