JS-表单元素操作

//获得表单的方式有3种

//1 利用表单在文档中的索引或表单的name属性来引用表单

    let formList = document.forms;
    //获得表单的集合

    let formObj =formList[1];
    let formObj = formList[‘表单name名称‘];
    // 通过表单的索引来说的表单对象 或者 表单的name属性来引用表单


//2 利用表单的id属性来引用表单

    let formObj = document.getElementById("表单id值");

//3 使用document.表单名来引用表单（最常用的）    

    let formObj = document.表单name属性值;

//获得表单域的方式的方式有三种

//1  利用表单域在表单域集合中的索引或表单域的name属性来引用表单域

    let formObj =document.表单name属性值;
    //获得表单对象

    let elsList =   formObj.elements
    //获得表单域（表单元素）集合
    
    let ele = elsList[1];
    let ele = elsList[表单元素name属性值]
    //通过元素在表单中的位置(只算表单元素，从0开始) 或者 表单的name属性值
    
//2  利用表单域的id属性来引用表单域
    
    let selectObj = document.getElementById(‘表单域中id属性的值‘);

//3  使用表单.表单域名来引用表单域 (推荐)

    let selectObj = document.表单的name属性.表单域元素的name属性;
    // 如果name的值相同  则 返回一个元素的数组，例如复选框

//操作单选框和复选框 主要是 操作他们的 checked 属性
    
    let checkboxList = document.querySelectorAll("input[type=‘checkbox‘]");
    //获得复选框对象集合

    //查看选中的元素
    for(let checkboxObj of checkboxList){
        if(checkboxObj.checked){
        //查看复选框的状态是否被选中，单选框的查看方式相同
            console.log("被选中"); 
        }
    }
    
    //设置全选
    for(let checkboxObj of checkboxList){
        checkboxObj.checked = true;
        //通过使checked为true 来达到选中的效果
    }

//下拉菜单 select 

//1 单选的下拉菜单
    <select name="" id="select">
            <option value=""></option>
    </select>
//2 多选的下拉菜单,添加multiple属性
    <select name="" id="selects" multiple>
            <option value=""></option>
    </select>


//获得下拉菜单对象
    let selectObj = document.querySelector("#select");
    //单选下拉
    let selectsObj= document.querySelector("#selects");
    //多选下拉
    
// 通过options 属性来获得该下拉菜单的选中对象集合(数组)
    let  optionList = selectObj.options;
    //单选下拉的option集合
    let  optionsList = selectsObj.options;
    //多选下拉的option集合

//单选下拉菜单 一般和 change事件一起使用
    selectObj.onchange=()=>{ 
        let index = selectObj.selectedIndex;
        //获得选中选项卡的下标
    }
    
    
//下拉框中的option是否被选择 selected     
    let optionsList = selectsObj.options;
    for(let optionObj of optionsList ){
        if(optionObj.selected){
            //optionObj.selected  如果被选中则返回true  每选择返回false  
        }
   }