第二篇 dom内容操作之value
一、内容操作的三种方式
1、 详情看第一篇 innerText innerHtml 2、 value ==》表单类的标签 input >text passwd textarea 3、 checkbox value checked radio value checked select value 当前选中的项 selectedIndex
第二种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="i1" type="text" value="123"/> <input id="i2" type="password" value="111"/> <textarea id="i3">666</textarea> <script> var l1=document.getElementById("i1"); //获取值 document.write(l1.value); //设置值 l1.value=12; var c1=document.getElementById("i2"); document.write(c1.value); c1.value=12; var d1=document.getElementById("i3"); document.write(d1.value) d1.value=12; </script> </body> </html>
第三种方式 之一 checkbox 的value
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>爱好</h1> <div id="l1"> <ul> <li><input type="checkbox" value="1"/>篮球</li> <li><input type="checkbox" value="2"/>足球</li> <li><input type="checkbox" value="3"/>去秋</li> </ul> </div> <div id="l2"> <ul> <li><input type="checkbox" value="1"/>篮球</li> <li><input type="checkbox" value="2"/>足球</li> <li><input type="checkbox" value="3"/>去秋</li> </ul> </div> <script> var l3=document.getElementById("l1"); var checks=l3.getElementsByTagName("input"); document.write(checks[0],checks[1],checks[2]); document.write(checks[0].value,checks[2].value); //在代码中直接选中 checks[0].checked =true; </script> </body> </html>
第三种方式之一 checkbox的checked
实例：多选和取消以及反选
<input type=”checkbox”/>
<input type=”button” value=””/>
多选：一个按键全部选中
取消：把选中的全部取消
反选：选中的取消，没选中的选中
写表的时候在表的开头和结尾最好要加上表头和身体
<thead></thead>
<tbody></tbody>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input type="button" value="全选" ondblclick="CheckAll();"/> <input type="button" value="取消" ondblclick="CancleAll();"/> <input type="button" value="反选" ondblclick="Reverse();"/> </div> <table> <thead> <tr> <th>序号</th> <th>用户名</th> <th>年龄</th> </tr> </thead> <tbody id="tb"> <tr > <td><input class="c1" type="checkbox"/></td> <td>pyrene</td> <td>19</td> </tr> <tr > <td><input class="c1" type="checkbox"/></td> <td>pyrene</td> <td>19</td> </tr> <tr > <td><input class="c1" type="checkbox"/></td> <td>pyrene</td> <td>19</td> </tr> </tbody> </table> <script> function CheckAll(){ var tb=document.getElementById("tb"); var checks=tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check=checks[i]; current_check.checked=true; } } function CancleAll(){ var tb=document.getElementById("tb"); var checks=tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check=checks[i]; current_check.checked=false; } } function Reverse(){ var tb=document.getElementById("tb"); var checks=tb.getElementsByClassName("c1"); for(var i=0;i<checks.length;i++){ var current_check=checks[i]; if(current_check.checked){ current_check.checked=false; }else{ current_check.checked=true; } } } </script> </body> </html>
第三种方式之二 radio
例子单选框
<input type=”radio”/>
radios[0].checked=true 如果等于false就是不选中 选中值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li><input type="radio" name="g" value="11"/>男</li> <li><input type="radio" name="g" value="22"/>女</li> </ul> <script> var radios=document.getElementsByTagName("input") //获取值 var val=radios[0].value; console.log(val); //选中 radios[1].checked=true; </script> </body> </html>
第三种方式之三、select
实例、下拉框
两个问题
1、这里的value怎么用
默认选中谁在当前页面就在里面加入selected=”selected”
value 当前选中的项
2、checked怎么用
如果不知道value，那么怎么才能指定值呢？
用索引的方式 selectedIndex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="sel"> <option value="11">北京</option> <option value="22" selected="selected">上海</option> </select> <script> var sell=document.getElementById("sel"); document.write(sell.value); //通过设置value来指定一个项,这里本来显示的是上海，但是设置为11之后就显示为北京 sell.value=11; //如果不知道value的值。可以用索引selectIndex的方法来指定一个项 //首先先获取现在的索引 document.write(sell.selectedIndex); //之后指定要选中的项的索引 sell.selectedIndex=1; </script> </body>
