javascript - HTML DOM objects common elements

Two, Select: access select elements

　　Properties : .selectedIndex Gets select the currently selected item index

　　　　　.options get all elements return to select option values in an array

　　　　　.options.length get length option will assign it to 0 is equivalent to delete all option

　　　　　.value current value of the selected item (to get the property value value value value if there have value when the option is equivalent to acquiring property innerHTML value)

　　Methods : add () to add the option in select

　　　　　remove (i) delete select the option i the subscript

　　Event : onchange option is triggered when a change event

　　Delete select the last option can be used: select.remove (select.length-1);

Three, option: access option element

　　Create : new Option (text, value) text represents the content value represents the property

　　Properties : .index get the current index option

　　　　　.value

　　　　　.text/.innerHTML

　　Select the option to add a: select.appendChild (new Option (text, value));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
　　//创建一个select
    <select name="sel" id="slct" onchange="onchge(this)">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
    <script type="text/javascript">
        }            the console.log (elem.value);output value corresponding to the value of the option//            the console.log (elem.selectedIndex);
            toggle option output index//onchge (elem) {
            function
　　　　　// given a onchange event
        


        // Get select element by subscript 
        var select = document.getElementById ( "SLCT" );
         // output content select 
        the console.log (select);
         // get all Option 
        the console.log (select.options);
         // Get select the length of 
        the console.log (select.length);
         // equivalent to the length of the way of acquiring 
        the console.log (select.options.length)
         // add an option and select the assignment after 
        select.add ( new new option-( " 444 ",". 4 " ));
     </ Script> 
</ body> 
</ HTML>

Four, table access form elements

　　1. Create a row grouping : table.createTHead ();

　　　　　　　　table.createTBody();

　　　　　　　　table.createTFoot();

　　2. Delete the row grouping : table.deleteTHead ();　　　　　　

　　　　　　　　TBody can not be deleted, and a table can contain multiple tbody

　　　　　　　　table.deleteTFoot();

　　3. Get row grouping: table.tHead ()

　　4. Insert, Delete, Get (line tr)

　　Rows may be inserted in thead, tbody, tfoot in

　　　　.insertRow (i) at an index position i of a row is inserted, if write line is added at the end represents a standard

　　　　.deleteRow (i) delete the row position index i

　　　　.Rows [i] Get Get all rows .Rows index i as the return value of array row

　　5. Insert, Delete, Get (cell td)

　　　　tr.insertCell (i) subscripts a row is inserted into a cell position i, write subscripts indicate if a cell is added at the end

　　　　tr.deleteCell (i) delete a row index of the cell i

　　　　tr.cells [i] Gets subscript tr.cells acquiring all cells for the cell array of the return value of i

　　　　You can not add a table constructed in th tr in this way

　　　　Set the table style by table.style tr.style

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> the Document </ title> 
</ head> 
<body> 
    <Table ID = "TBL"> 
        
    < / table> 
    <Script type = "text / JavaScript"> // Get the table element var table = document.getElementById ( "TBL" );
         // set the width of the table 
        table.style.width = "300px by" // Create row grouping var = thead table.createTHead ();
         // create a row row var TR = thead.insertRow ();
        // to set the line style 
        tr.style.width = "100px"
        
        
        
        
         ;
        tr.style.height = "50px" ; 
        tr.style.backgroundColor = "LightBlue" ;
         // Create four cycles by creating cells 
        for ( var I = 0; I <. 4; I ++ ) {
             var TD = tr.insertCell ();
             // are written content 
            td.innerHTML = I; 
        } 
        // 
 
    </ Script> 
</ body> 
</ HTML>

Five, Form access the form form elements

　　Get Form : document.forms [i / name / id ] can be accessed by index, name attribute value, id for

　　Gets the elements: form.elements [I / name / ID] form.elements obtained form all the elements of the return value is an array

　　　　Direct from.name attribute value element has an element name attribute acquisition

　　Gets the number of elements: form.length

　　Manual submission form : the form.submit () and with the use of ordinary button

　　Event: the onsubmit () automatically triggers before the form is submitted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" id="frm">
        用户名：<input type="text" name="ipt1">
        密码：<input type="password" name="ipt2">
        <input type="button" name="ipt3" value="提交">
    </form>
    <script type="text/javascript">// 获取form元素 通过idvar form = document.forms["frm"];
        IPT1 =varGet the value of a single element by a name attribute//form.elements;
        INPUT =varGet all elements form an array of return value//
        
        
        
        form.ipt1;
         // get a single element by the subscript 
        var IPT2 INPUT = [. 1 ];
         // to submit button binding event 
        form.ipt3.onclick = function () {
             IF (ipt1.value && ipt2.value) {
                 / / manual submission only when the conditions are met before the commit operation is 
                the form.submit (); 
            } 
            
        }

     </ Script> 
</ body> 
</ HTML>

javascript - HTML DOM objects common elements

Guess you like