41-JavaScript-DOM-forms-imgs

最新推荐文章于 2022-08-16 10:34:48 发布

forwardNow

最新推荐文章于 2022-08-16 10:34:48 发布

阅读量828

点赞数

分类专栏：前端文章标签： JavaScript DOM forms imgs

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/17637115

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

参考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 οnclick="deleteRow('0')">delete the first row</button><br/>
<button οnclick="deleteRow('tbDemo.rows.length-1')">delete the last row</button><br/>
<button οnclick="insertRow()">insert row</button><br/>



</body>
</html>