41-JavaScript-DOM-forms-imgs


参考document对象 http://www.w3school.com.cn/htmldom/dom_obj_document.asp

1. forms


    通过 document.form 获得所有的 <form>元素

    参考 Form对象 http://www.w3school.com.cn/htmldom/dom_obj_form.asp

2. imgs


    通过 document.imgs 获得所有的 <img>元素

    参考 Image对象 http://www.w3school.com.cn/htmldom/dom_obj_image.asp

3. links


    通过 document.links 获得所有的 <link>元素

    参考 link对象 http://www.w3school.com.cn/htmldom/dom_obj_link.asp   

4. anchors


    通过 document.anchors 获得所有的 <a>元素

    参考 Anchor对象 http://www.w3school.com.cn/htmldom/dom_obj_anchor.asp 

5. all


    通过 document.all 获得所有的 HTML元素

6. Table对象


 6.1 概念

    HTML文档中每出现一个<table>元素, 都会创建一个Table对象    

 6.2 常用属性

    id
    name
    border
    width
    height
    cellpadding     单元格内边框与内容之间的填充
    cellspace       单元格之间的间隔
    style

 6.3 集合

    rows[]   所有行的集合
    cells[]  指定行中所有的单元格的集合

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">
    
    var tbDemo;

    window.onload = function() {

        tbDemo = document.getElementById("tbDemo");

        tbDemo.border = 1;
        tbDemo.width = 200;
    /*    
        // all rows
        var rows = tbDemo.rows;

        console.info( rows );

        // all cells from a row
        var cells = rows[1].cells;

        console.info( cells );

        for (var i = 0; i < cells.length; i++) {
            console.info( cells[i] );
            console.info( cells[i].innerHTML );
        };
    */    

        for (var i = 0; i < tbDemo.rows.length; i++) {
            // a single row
            var row = tbDemo.rows[i];
            // all cells from a row
            for (var j = 0; j < row.cells.length; j++) {
                console.info( row.cells[j] );
            }

        }

    }


</script>

<style type="text/css">
    
#tbDemo {
    /*border: solid 1px red;*/
}

</style>

</head>
<body>

<table id="tbDemo">
    <tr>
        <td>00</td> <td>01</td> <td>02</td>
    </tr>
    <tr>
        <td>10</td> <td>11</td> <td>12</td>
    </tr>
    <tr>
        <td>20</td> <td>21</td> <td>22</td>
    </tr>
</table>

</body>
</html>



 6.4 常用方法

    deleteRow( index )
    insertRow( index )   插入并返回一个rowObj;

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">
    
    var tbDemo;

    window.onload = function() {

        tbDemo = document.getElementById("tbDemo");

    }

    function deleteRow(indexStr) {
        // console.info( indexStr );
        tbDemo.deleteRow( parseInt( eval(indexStr) ) );
    }

    function insertRow() {
        var trObj = tbDemo.insertRow(1);
        trObj.innerHTML = "<td>" + new Date().getMinutes()+ "</td>" + 
                          "<td>" + new Date().getSeconds()+ "</td>" + 
                          "<td>" + new Date().getMilliseconds()+ "</td>";

    }


</script>
<style type="text/css">
    td {
        border: 1px solid red;
        width: 50px;
    }
</style>

</head>
<body>

<table id="tbDemo">
    <tr>
        <td>00</td> <td>01</td> <td>02</td>
    </tr>
    <tr>
        <td>10</td> <td>11</td> <td>12</td>
    </tr>
    <tr>
        <td>20</td> <td>21</td> <td>22</td>
    </tr>
</table>
<button onclick="deleteRow('0')">delete the first row</button><br/>
<button onclick="deleteRow('tbDemo.rows.length-1')">delete the last row</button><br/>
<button onclick="insertRow()">insert row</button><br/>



</body>
</html>











    



你可能感兴趣的:(JavaScript,dom,Forms,imgs)