码迷,mamicode.com
首页 > 其他好文 > 详细

DOM表单元素

时间:2018-06-11 01:57:57      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:eset   action   节点   通过   onsubmit   select   hang   cte   remove   

#表单元素
##获取表单元素 form
1)document.forms[0];

2) document.forms[‘id‘];

3) document.forms[‘name‘];

4) document.name的值;
##获取表单字段

    首先拿到表单:let form = document.forms[0];
1) form节点.element[下标];

2)form节点.element[‘id的值‘];

3) form节点.element[‘name的值‘];

4) form节点.name的值;

5)form节点.id的值;

6)form节点.[‘id‘]

7)form节点.[‘name的值‘]

8)form节点.[下标]

***
#特殊属性
1)默认选中:checked(单选,多选);selected(下拉列表)

2)下拉列表多选:multiple写在select的属性

3)只读属性:readonly 让输入框只能看不能修改

4)禁用:disabled
##特殊属性的特点
1. 在html标签上它的属性值对它没有任何影响
2. 在JS中可以通过true和false来改变它是否生效
***
#表单事件
    <form action = ‘‘>
        <input type = ‘text‘ id = ‘content‘>
    </form>
##焦点事件
1)获取焦点

    conten.onfocus
2) 失去焦点(常用)

    content.onblur
##改变事件
1)下拉列表改变事件(单选框,复选框都可以,常用于下拉列表)

    下拉列表节点.onchange
2) 输入框改变事件
    
    content.oninput
##提交事件(button type = "submit",input type = "submit",input type = "image")

    form.onsubmit(该事件只能绑定在form节点上)
##重置事件 (button type = "reset",input type = "reset")

    form.onreset(该事件只能绑定在form节点上)
##普通按钮添加‘提交’和‘重置’功能

    普通按钮节点.onclick = function(){
        form.submit();//表单提交
        form.reset();//表单重置
    }
###下拉列表
1)获取所有option
    
    select节点.options
2)获取选中的option的value值
    
    select节点.value

3)获取选中的option元素(不支持多选,选中多个时只能拿到第一个)
    
    let i = select.selectedIndex;//选中的option下标
    select.options[i];//通过下标得到选中的option
4)获取所有选中的option元素

    select.selectedOption;//获取到一个数组

**创建option**

    let o = new option(‘深圳‘,‘sz‘);

**添加**

    select.options.add(o);

**删除**

    select.options.remove(下标);
    select.options.length = 0;

**修改**

    select.options[下标].value = ‘cd‘;
    select.options[下标].text = ‘成都‘;

DOM表单元素

标签:eset   action   节点   通过   onsubmit   select   hang   cte   remove   

原文地址:https://www.cnblogs.com/namofa/p/9165010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!