HTML DOM Common object: It simplifies the operation of common HTML elements.
Select Object
It represents a SELECT element on the page, and the common attributes are:
Select.value -The value of the currently selected item, without value, returns the contents of the selected item.
select.options -Saves all option element objects under Select, equivalent to: select.getelementsbytagname ("option");
select.options.length -Save the number of select option and clear all option under Select Using Select.options.length=0;
select.length equivalent to Select.options.length
Clear All option under Select: select.length=0; and select.innerhtml= "";
Select.selectedindex -Subscript of the currently selected item;
Event: onchange--When the item in the election has changed
Method: Select.add (option) to add an option to select
Equivalent to: select.appendchild (option) But this method does not support document fragments;
Select.remove (i) remove an option from the I position in select
Option Object
represents an OPTION element on the page .
Create an Option object: var opt=new option (text,value)--it represents the creation of an option object, while setting the content of opt as text, setting the value of opt to values;
Equivalent to: Var opt=document.createelement ("option");
Opt.innerhtml=text;
Opt.value=value;
Properties:. Text instead of. InnerHTML
. Index indicates the current option's subscript position under Select
Form Object
Represents the previous form element on the page,
Get table cell element : var form=document.forms[i/id]
Properties: form.elements holds an array of all the form elements in the form, including: Input Select TextArea button
form.elements.length Get the number of form elements in a form
form.length = form.elements.length
Method: Form.submit (); For manual submission of forms
Event: Form.onsubmit is automatically triggered before the form is submitted in any way, and is often used to validate the contents of all form elements before committing;
Form elements:
Get table cell element three methods : Var elem=form.elements[i/id/name];
Shorthand: If the table cell has the name attribute: Form.name
Method: elem.focus () let Elem get focus
Elem.blur () let Elem lose focus
Table Object
represents a TABLE element in a Web page
line grouping :
add row grouping: var row grouping =table.createthead| tbody| TFoot ();
emphasize: Create while adding row groupings to table
Delete Row group: table.deletethead| TFoot ()
get row group: Table.thead|tfoot;table.tbodies[i]
line grouping: THead TBody TFoot
Pipe line :
Add line: var tr= row grouping. InsertRow (i)
inserting a new line in the I position in a row group
emphasis: middle insert row, line at original I position backward
&NB SP; fixed routine: 1. Append a new row at the end: Row grouping. InsertRow ()
begins with : Row grouping. InsertRow (0)
Delete rows: Row grouping. DeleteRow (i)
Delete Row Group I
Emphasize: I is the relative subscript position of the current row within the row group
& nbsp Get rows: Row grouping. Rows
Line: TR
In the control of TD:
Add Td:var Td=tr.insertcell (i);
Omit I means append to right end
Insertcell does not support adding th, can only add TD
Delete Td:tr.deleteCell (i);
Get Td:tr.cells
To delete a row:
There is an attribute on the TR: the absolute subscript of the Tr.rowindex row across the entire table
Problem: Rows are grouped and rows cannot be deleted using Tr.rowindex.
Solution: Table.deleterow (Tr.rowindex)
Summary: In the future, delete rows are used Table.deleterow (Tr.rowindex)
Image Object
Represents the previous IMG element on the page
Create: Var img=new Image ();
Html-dom usage of common objects (select/option/form/table)