第二篇 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

实例：多选和取消以及反选

多选：一个按键全部选中

取消：把选中的全部取消

反选：选中的取消，没选中的选中

写表的时候在表的开头和结尾最好要加上表头和身体

<!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

例子单选框

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>