js对表单内容的操作

不是表单的双标签内容

使用这两个属性： div.innerHTML 和 div.innerText

console.log(document.querySelector('#dv').innerText)

表单标签

使用如下案例：

  <div id="dv">23456</div>
  <form action="">
    <img src="./images/1.jpg" style="width: 320px;"> <br>
    <input type="text" name="username"> <br>
    <input type="radio" name="sex" value="boy"> 男//value值需要手动添加,通常与后面的值一样
    <input type="radio" name="sex" value="girl"> 女 <br>
    <select name="pro">
      <option value="bj">北京</option>
      <option value="sz">深圳</option>
      <option>广州</option>
    </select>
    <br>
    <input type="button" value="提交">//以下js代码都是写在这个按钮点击事件里面
  </form>

1.对单标签内容的操作 例如 img.src 自由属性可以直接用点语法
但建议使用

document.querySelector('img').setAttribute('src','属性值(这里是路径)');

2.对input标签的操作 表单元素.value

document.querySelector('input[type=text]').value='内容'

3.注意input中单选框和复选框(type=checkbox)时，需要我们自己在标签里面写value值,以下用单选框radio举例说明

var rds=document.querySelector('input[type=radio]');  
for(var i=0;i<rds.length-1;i++){
    //如果单选框被选中 checked属性值就为true,未被选中是false
    if(rds[i]=true){
        console.log(rds[i].value)
    }
  }

4.select框里面的值就是被选中的option标签里面的值
如果option里面有value属性，则值就是value的属性值；
如果option里面没有value属性，则值就是option的内容

console.log(document.querySelector('select))
console.log(document.querySelectorAll('option')[0].value)