day04_innerHTML属性

一、.innerHTML属性
不是dom 的组成部分，但是大多数浏览器都支持这个属性。

1. 获取文本
   var sp1 = document.getElementById(“sid”);
   alert(sp1.innerHTML);
2. 向标签里面设置内容（可以是html代码）
   var div1 = document.getElementById(“div1”);
   div1.innerHTML = “AAAAA“;

练习：添加表格到div

    var div1 = document.getElementById("div1");
    div1.innerHTML = "<h>AAAAA</h>";
    var t = "<table border=1px;><tr><td>1111</td><td>1q</td><td>1w</td></tr><tr><td>2222</td><td>2q</td><td>2w</td></tr></table>";
    div1.innerHTML =t; 

案例二：动态显示时间

 1. 得到当前的时间
    //当前时间
    var date = new Date();
    //格式化
    var d1 = date.toLocaleString();
 2. 让页面每一秒获取时间
setInterval("getd1();",1000);
 3. 显示到页面上
var div1 = document.getElementById("times");
    div1.innerHTML = d1;
 4. 代码
function getd1(){
    //当前时间
    var date = new Date();
    //格式化
    var d1 = date.toLocaleString();
    //获取div
    var div1 = document.getElementById("times");
    div1.innerHTML = d1;
    }
    //使用定时器实现每秒写一次
    setInterval("getd1();",1000);

总结：
1. 案例：在末尾添加节点[*]
–创建标签createElement(“”);
–创建文本createTextNode(“”);
–文本添加到标签下appendChild();
2. 元素对象 —获取标签的子标签的唯一方法[*]：getElementByTagName方法

1. Node对象 * 属性 nodeType(值[]123标签，属性，文本) nodeName nodeValue
2. 操作DOM树[*] 父节点：parentNode **appendChild方法 添加到结尾 剪切黏贴效果 **insertBefore(ne w,old) 通过父节点添加 *removeChild() 通过父节点删除
   *replaceChild(new,old节点) 通过父节点替换
3. innerHTML属性
   案例：动态显示时间
   –setInterval定时器
4. 案例：全选练习
   –checked = true;复选框是选中的
5. 案例：下拉列表左右选择
   –select下拉列表里面的属性multiple
   –属性：selected=true;表示option被选中
6. 案例：省市联动
   onchange事件
   案例：动态生成表格

案例三：全选练习
创建一个页面
**复选框和按钮（四个复选框+复选操作-全选和全不选）（三个按钮-全选-全不选-反选）

<input type="checkbox" id="boxid">全选/全不选
<br><br>
<input type="checkbox" name="b">篮球<br>
<input type="checkbox" name="b">羽毛球<br>
<input type="checkbox" name="b">乒乓球<br>
<input type="checkbox" name="b">排球<br>
<br><br>
<input type="button" value="全选" onclick="selAll()">
<input type="button" value="全不选" onclick="selNo()">
<input type="button" value="反选" onclick="selOther()">


<script type="text/javascript">
    //实现全选的操作
    function selAll(){
        /*
         1.获取要操作的复选框
         getElementByName()
         2.返回的是数组
         属性checked判断复选框是否选中
         ***checked = true;//选中
         ***checked = false;//不选中
         遍历数组，得到的是每一个checkbox
         ***每一个checkbox属性checked = true;
         */

//获取要操作的复选框
        var bs = document.getElementsByName("b");
//遍历数组，得到的是每一个checkbox
        for(var i=0;i<bs.length;i++){
            var b1 = bs[i];
            b1.checked = true;
        }
    }

    //实现不选的操作
    function selNo(){
        /*
         1.获取到要操作的复选框
         2.返回的是数组，遍历数组
         3.得到每一个复选框
         4.设置复选框的每一个属性
         */

//得到要操组的复选框
        var bs1 = document.getElementsByName("b");
        for(var j=0;j<bs1.length;j++){
            var b2=bs1[j];
            b2.checked = false;
        }

    }
    function selOther(){
        var bs2 = document.getElementsByName("b");
        for(var q = 0;q<bs2.length;q++){
            var b3 = bs2[q];
            if(b3==true){
                b3.checked = false;
            }else{
                b3.checked = true;
            }
        }
    }

</script>

案例四： 下拉菜单左右选择

    function allToRight() {
        var s2 = document.getElementById("select2");
        var s1 = document.getElementById("select1");
        var ops1 = s1.getElementsByTagName("option");
        for(var j = 0;j<ops1.length;j++){
            var op1 = ops1[j];
            s2.appendChild(op1);
            j--;
        }
    }
    function selToRight() {
        /*
         * 1.获取select里面的option
         *       ---使用getElementsTagName();
         *       ---遍历数组得到每一个option
         *
         * 2.判断是否被选中
         *       ---属性selected判断是否被选中
         *       ---selected = true;表示选中
         *       ---selected = false;表示未选中
         * 3.若被选中，添加到右边
         * 4.得到select2
         * 5.添加选择的部分
         * */
        var select2 = document.getElementById("select2");
        var select1 = document.getElementById("select1");
        var options1 = select1.getElementsByTagName("option");
        for(var i = 0;i<options1.length;i++){
            var option1 = options1[i];
            if(option1.selected == true){
                select2.appendChild(option1);
            }

        }
    }

        }
    }