JS3

1、案例一：在末尾添加节点
    第一步：获取到ul标签
    第二步；创建li标签
        document.createElement("标签名称")方法
    第三步：创建文本
        document.createTextNode("文本内容");
    第四步：把文本添加到li下面
        使用appendChild方法
    第五步：把li添加到ul末尾
        使用appendChild方法
2、元素对象（element对象）
    要操作element对象，首先必须要获取到element
    使用document里面相应的方法获取
    方法
         获取属性里面的值
            getAttribute("属性名称");
        设置属性的值
            setAttribute("class","haha");
        删除属性
            removeAttribute("name");
            不能删除value
    想要获取标签下面的子标签
        使用属性childNodes,但是这个属性兼容性很差
        获取标签下面子标签的唯一有效办法，使用getElementByTagName()方法
3、Node对象属性一
    nodeName
    nodeType
    nodeValue
    使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
    标签节点对应的值
        nodeType： 1
        nodeName： 大写标签名称    比如SPAN
        nodeValue： null
    属性节点对应的值
        nodeType：2
        nodeName：属性名称
        nodeValue：属性的值
    文本节点对应的值
        nodeType：3
        nodeName：#text
        nodeValue：文本内容
4、Node对象的属性二
    <ul id="ulid">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    父节点：
        ul是li的父节点
        parentNode
    子节点：
        li是ul的子节点
        childNodes：得到所有子节点，但是兼容性很差
        firstChild:获取第一个子节点
        lastChild:获取最后一个子节点
    同辈节点
        li直接关系是同辈节点
        nextSibling:返回一个给定节点的下一个兄弟节点
        previousSibling:返回一个给定节点的上一个兄弟节点
5、操作dom树
    appendChild方法
        添加子节点到末尾
        特点：类似于剪切粘贴的效果
    insertBefore(newNode,oldNode)方法
        在某个节点之前插入一个新的节点
        两个参数
            要插入的节点
            在谁之前插入
        1、创建标签
        2、创建文本
        3、把文本添加到标签下面
    removeChild方法：删除节点
        通过父节点删除，不能自己删除自己
    replaceChild方法:替换节点
        不能自己替换自己，通过父节点替换
        两个参数
        第一个参数：新的节点
        第二个参数：旧的节点
    cloneNode(boolean)方法：复制节点
        复制的放到类似剪切板里面
6、innerHTML属性
    这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
    第一个作用：获取文本内容
    第二个作用：向标签里面设置内容（可以是html代码）
        var tab="<table>";
        tab += "/table";
7、案例二：动态显示时间
    得到当前的时间
        var data=new Data();
        var d1=data.setLocaleString();
    需要让页面每一秒获取时间
        setInterval方法   定时器
    显示到页面上
        每一秒向div里面写一次时间
        使用innerHTML属性
8、案例三：全选练习
    使用复选框上面一个属性判断是否选中
        checked属性

    创建一个页面
        复选框和按钮
            四个复选框表示爱好
            还有一个复选框操作 全选和不全选 也有一个事件
        三个按钮，分别有事件
            全选
            全不选
            反选
9、案例四：下拉列表左右选择
    下拉选择框
        <select>
            <option>111</option>
        </select>
10、案例五：省市联动
    创建一个页面，有两个下拉选择框
    在第一个下拉框里面有一个事件：改变事件onchange事件 
11、案例六：动态生成表格