DOM表单元素

Posted 2020-11-17 namofa

#表单元素
##获取表单元素 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 = ‘成都‘;