zoukankan      html  css  js  c++  java
  • HTML-DOM常用对象的用法(select/option/form/table)

      HTML DOM 常用对象: 它对常用HTML元素操作的简化。

    Select对象

          它代表页面上的一个select元素,常用属性有:

    select.value ——当前选中项的value ,没有value,就返回选中项的内容。
    select.options ——保存select下所有option元素对象,相当于: select.getElementsByTagName("option");
    select.options.length ——保存select下option的个数,清空select下所有option使用 select.options.length=0;
    select.length 等效于select.options.length
    清空select下所有option有: select.length=0;和 select.innerHTML="";
    select.selectedIndex ——当前选中项的下标;
    事件: onchange ——当选中项发生改变时
    方法: select.add(option) 向select中添加一个option
            相当于: select.appendChild(option)但这种方法不支持文档片段;
    select.remove(i) 移除select中i位置的一个option
    Option对象     

          代表页面上的一个option元素。

    创建一个option对象: var opt=new Option(text,value)——它代表创建一个option对象,同时设置opt的内容为text,设置opt的值为value;

    相当于: var opt=document.createElement("option");
               opt.innerHTML=text;
               opt.value=value;
    属性:  .text 代替.innerHTML
             .index 表示当前option在select下的下标位置

    form对象

        代表页面上一个表单元素、

        获取表单元素: var form=document.forms[i/id]

        属性: form.elements 保存了表单中所有表单元素的数组,包括: input select textarea button

                form.elements.length 获得表单中表单元素的个数
                form.length => form.elements.length
        方法: form.submit(); 用于手动提交表单
        事件: form.onsubmit 以任何方式提交表单之前自动触发,常用于在提交之前,验证所有表单元素的内容;

        表单元素: 
               获取表单元素三种方法: var elem=form.elements[i/id/name];
               简写: 如果表单元素有name属性: form.name
               方法: elem.focus() 让elem获得焦点
                       elem.blur() 让elem失去焦点

    Table对象

          代表网页中一个table元素

        管着行分组:
             添加行分组: var 行分组=table.createTHead|TBody|TFoot();
             强调: 即创建,同时又将行分组添加到table
            删除行分组: table.deleteTHead|TFoot()
            获取行分组: table.tHead|tFoot;table.tBodies[i]
            行分组: THead TBody TFoot
       管着行:
            添加行: var tr=行分组.insertRow(i)
            在行分组中i位置插入一个新行
            强调: 中间插入行,原i位置的行向后顺移
           固定套路: 1. 末尾追加一个新行: 行分组.insertRow()
        开头插入: 行分组.insertRow(0)
          删除行: 行分组.deleteRow(i)
          删除行分组中第i行
          强调: i是当前行在行分组内的相对下标位置
          获取行: 行分组.rows

        行: tr
            管着td:
             添加td: var td=tr.insertCell(i);
            省略i表示右侧末尾追加
            insertCell不支持添加th,只能添加td
            删除td: tr.deleteCell(i);
            获取td: tr.cells

       删除行: 
            tr上都有一个属性: tr.rowIndex 行在整个表的绝对下标
           问题:行分组,无法使用tr.rowIndex删除行。
           解决: table.deleteRow(tr.rowIndex)
           总结: 今后,删除行都用table.deleteRow(tr.rowIndex)

    Image对象

         代表页面上一个img元素
         创建: var img=new Image();

  • 相关阅读:
    常用模块
    递归函数
    内置函数与匿名函数
    Mac控制台相关操作
    Maven相关知识记录
    @Import底层实现原理
    spring循环依赖
    springcloud注册中心对比
    分布式事务
    Drools使用注意事项
  • 原文地址:https://www.cnblogs.com/ydaimee/p/6749126.html
Copyright © 2011-2022 走看看