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);            }        }    }        }    }