javascript--HTML DOM常用元素对象

二,Select:访问select元素

  属性:.selectedIndex  获取select中当前选中项的下标

     .options  获取select中所有的option元素 返回值为数组

     .options.length  获取option的长度 将其赋值为0 等同于删除所有option

     .value 当前选中项的值(当选项中有value属性时 获得value属性值 若不存在value值则等同于获取innerHTML值)

  方法:add() 在select中添加option

     remove(i) 删除select中下标为i的option

  事件:onchange 选项发生变化时触发的事件

  删除select中最后一个option可以使用:select.remove(select.length-1);

三,option:访问option元素

  创建:new Option(text,value) text表示内容 value表示属性

  属性:.index 获取当前选项下标

     .value

     .text/.innerHTML

  向select中添加一个option: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">
     //给定一个onchange事件 function onchge(elem){ // 切换选项输出下标 console.log(elem.selectedIndex); // 输出对应选项value值 console.log(elem.value); } // 获取select元素 通过下标 var select = document.getElementById("slct"); // 输出select内容 console.log(select); // 获取所有option console.log(select.options); // 获取select的长度 console.log(select.length); // 等同于上一种获取长度的方式 console.log(select.options.length) // 在select后添加一个option 并赋值 select.add(new Option("444","4")); </script> </body> </html>

 

四,table 访问表格元素

  1.创建行分组:table.createTHead();

        table.createTBody();

        table.createTFoot();

  2.删除行分组:table.deleteTHead();      

        TBody无法删除,并且一个table可以包含多个tbody

        table.deleteTFoot();

  3.获取行分组:table.tHead()

  4.插入、删除、获取 (行 tr)

  可以在thead、tbody、tfoot中插入行

    .insertRow(i) 在下标为i的位置插入一行,若不写下标 表示在末尾追加一行

    .deleteRow(i) 删除下标i位置的行

    .rows[i] 获取下标为i的行  获取所有行.rows 返回值为数组

  5.插入、删除、获取 (单元格 td)

    tr.insertCell(i) 在某一行中下标为i的位置插入一个单元格,若不写下标 表示在末尾追加一个单元格

    tr.deleteCell(i) 删除某一行中下标为i的单元格

    tr.cells[i] 获取下标为i的单元格  获取所有单元格 tr.cells 返回值为数组

    通过这种方式构造表格 无法在tr中添加th

    设置表格样式通过table.style tr.style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table id="tbl">
        
    </table>
    <script type="text/javascript">
        // 获取table元素
        var table = document.getElementById("tbl");
        // 设置表格宽度
        table.style.width = "300px"
        // 创建行分组
        var thead = table.createTHead();
        // 创建行row
        var tr = thead.insertRow();
        // 给行设置style
        tr.style.width = "100px";
        tr.style.height = "50px";
        tr.style.backgroundColor = "lightblue";
        // 通过循环创建四个创建单元格
        for (var i = 0; i <4; i++) {
            var td = tr.insertCell();
            // 分别写入内容
            td.innerHTML = i;
        }
        // 

    </script>
</body>
</html>

 

五,Form 访问表单form元素

  获取表单:document.forms[i/name/id] 可以通过下标、name属性值、id进行访问

  获取表单中元素:form.elements[i/name/id]   form.elements 得到表单所有元素 返回值为数组

    元素有name属性时 可直接 from.name属性值获取元素

  获取元素个数:form.length

  手动提交表单form.submit()  和普通button搭配使用

  事件:onsubmit()  表单提交前自动触发

<!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元素 通过id
        var form = document.forms["frm"];
        // 获取表单所有元素 返回值为数组
        var input = form.elements;
        // 获取单个元素 通过name属性值
        var ipt1 = form.ipt1;
        // 获取单个元素 通过下标
        var ipt2 = input[1];
        // 给提交按钮绑定事件
        form.ipt3.onclick = function(){
            if (ipt1.value && ipt2.value) {
                // 手动提交 只有当条件满足是才会执行提交操作
                form.submit();
            }
            
        }

    </script>
</body>
</html>

 

 

    

  

  

  

     

     

    

posted @ 2019-08-25 22:03  你可以这样称呼我  阅读(173)  评论(0编辑  收藏