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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.