Html-dom usage of common objects (select/option/form/table)

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)