获取表单元素以及自定义属性/JS三

75 阅读 0 评论 50 点赞

我是靠谱客的博主专一老鼠，最近开发中收集的这篇文章主要介绍获取表单元素以及自定义属性/JS三，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

获取表单元素

昵称：<input type="text" required name="username"> required 可以让用户必须填写这个

var form = document.form1; 可以获取整个表单

ops[2].innerText = '成都' .innerText可以修改文本内容 .innerHtml可以修改html内容

代码示例如下：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      form {
          width: 500px;
      }
        input,select{
            display: block;
        }
    </style>
</head>
<body>
<!--表单-->

<form action="" method="get"  name="form1">
    <fieldset>
    <legend>学生信息</legend>
    昵称：  <!--required  可以让用户必须填写这个-->
    <input type="text" required name="username">
    密码:
    <input type="password" required  name="password" >
    邮箱:
    <input type="email" >
    <select name="city" id="">
        <option value="0" >北京</option>
        <option value="1"  >上海</option>
        <option value="2"  selected>成都</option>
        <option value="3"  >广东</option>
        <option value="4"  >南京</option>
    </select>
    爱好:
    <input type="checkbox" style="display:inline-block" name="hobby" checked > 运动
    <input type="checkbox" style="display:inline-block" name="hobby" > 唱歌
    <input type="submit" id="sub">
    </fieldset>
</form>
<script>
    /*表单元素通过name名字获取
    * 获取表单元素的值 对象.value
    * */
    var form = document.form1;//整个表单
    /*表单的下拉列表里的选项 form.selectname.options获取所有下拉选项*/
    console.log(form)
    // console.log(form.password.value)
    // console.log(form.city.options)
    var ops = form.city.options //数组
    ops[2].innerText = '成都'
    ops[2].value = '4'
    console.log(ops[2])
    /*提交事件*/
     document.getElementById('sub').onclick= function(){
    }
    var count = 0;
    var chk = form.hobby
     for(var i =0;i<chk.length ; i++ ){
         if(!chk[i].checked){
               //不被选中的有几个
             console.log(chk[i])
         }
     }
</script>

</body>

自定义属性

自定义属性作用：保存数据
js可以来操作自定义属性
设置：document.setAttribute('属性名','属性值')
获取：document.getAttribute('属性名','属性值') 返回字符串
移除：document.removeAttribute('属性名','属性值') 返回字符串

代码示例如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div a="1">元素1</div>
<div a="2">元素2</div>
<div a="3">元素3</div>
<div a="4">元素4</div>
<script src="获取元素.js"></script>
<script>
    var divs=my$All('div');
    for (var i=0;i<divs.length;i++){
        divs[i].setAttribute('index',i)
        console.log(div[i].getAttribute('index'))

        // if (i===2){
        //     div[i].remove()
        // }
    }

</script>


</body>