传智播客168期JavaEE就业班(第四天 dom)

* 课程回顾：
    * js语法
        * js的动态函数和匿名函数
            * js动态函数    Function    new Function();
            * 匿名函数：没有名称的函数，起个名称
                var add = function(){
                
                };
                
        * js中全局变量和局部变量
            * 全部变量：定义<script>标签中的变量，在页面的任意位置上都能拿到。
            * 局部变量：定义在方法内部的变量
            
        * js的对象和API
            * String对象
                * 属性：length长度
                * 方法：
                    * 和HTML相关方法
                        * bold()    粗体
                        * fontcolor()    字体颜色
                        * sup()        上标
                        * sub()        下标
                        
                    * 和java中String类似的方法
                        * charAt()        返回指定位置的字符
                        * indexof()        返回字符的位置
                        * substring(start,stop)    截取字符串
                        * substr(start,length)        截取字符串
                    
            * Array数组
                * 声明数组    
                    * var arr = [22];
                    * var arr = new Array(4或者"abc");
                    
                * 方法：
                    * concat()        链接数组或者元素
                    * pop()            删除最后一个元素，返回
                    * push()        向末尾添加一个元素，返回长度。
                    * sort()        排序
                    
            * Date对象
                * var date = new Date();    当前时间
                * 方法：
                    * toLocaleString()        显示当地日期格式
                    * getFullYear()            获取年份
                    * getMonth()            获取月份(0-11)    +1
                    * getDate()                几号
                    * getDay()                星期几
                    
                    * getTime()                毫秒值
                    * setTime()                根据毫秒值设置时间
                    * Date.parse();            可以字符串，返回是毫秒值
                    
            * Math数学
                * ceil()    上舍入
                * floor()    下舍入
                * round()    四舍五入
                * random()    随机数
                
            * RegExp对象
                * new RegExp("")
                * var reg = /^表达式$/;（记住）
                
                * reg.test(string);（记住）    如果匹配返回true，如果匹配不成功返回false。
                
            * 全局函数
                * eval()        解析字符串，执行js的代码。
                * isNaN()        判断是否是非数字值
                * parseInt()    
                
    * BOM    浏览器对象模型
        * winodw            窗口对象
            * alert()        提示框
            * confirm()        询问框
            * setInterval("run()",3000)        每隔3秒执行run方法，返回唯一的id值
            * setTimeout("run()",3000);        3秒后执行run方法，返回唯一的id值
            
            * 清除定时器
                * clearInterval(id)    
                * clearTimeout(id)
                
            * open("","","")    弹出新的窗口    
            * close()            关闭窗口
        
        * navigator            和浏览器版本相关
            * 属性
        * history            和历史相关
            * back()        上一页
            * forward()        下一页
            * go(1或者-1)    
        * location            和地址相关
            * href=""    获取和设置链接
    
===============================================================================================================================
    
    * DOM    文档对象模型
        * Document    Object    Model
        * 文档：标记型文档    （HTML/XML）
        * 对象：封装属性和行为（方法）
        * 模型：共性特征的体现
        
        * DOM解析HTML
            * 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
                <span id="spanId">文本</span>
                
            * DOM想要操作标记型文档先解析。（解析器）
                * DOM解析HTML（浏览器就可以HTML）
                
            * 浏览器DOM解析HTML？
                
                
        * DOM的三个级别：
            
        * DHTML不是一种编程语言。
            * html        ：封装数据。    <span>展示给用户的数据</span>
            * css        ：设置样式（显示效果）
            * dom        ：操作HTML（解析HTML）
            * js        ：提供逻辑（判断语句，循环语句）
            
            
        * Document：代表整个文档。
            * 方法：
                getElementById("id的值");            通过元素的id的属性获取元素（标签）对象。
                getElementsByName("name属性值");        通过名称获取元素对象的集合（返回数组）
                getElementsByTagName("标签名称");    通过标签名称获取元素对象的集合（返回数组）
                
                * write("文本的内容（html的标签）")        把文本内容写到浏览器上。
                
                * createElement("元素名称");        创建元素对象
                * createTextNode("文本内容")        创建文本对象
                
                * appendChild("子节点")                添加子节点
                
                <span id=""></span>
                
                
        * Element对象
            * 获取元素对象
                * getAttribute("属性名称");    获取属性的值
                * setAttribute("属性名称","属性的值");    设置或者修改属性的值
                * removeAttribute("属性名称");        删除属性
                
            * 获取元素下的所有子节点（*****）
                * ul.getElementsByTagName();
                
                
        * Node：节点对象
            * nodeName        ：节点名称
            * nodeType        ：节点类型
            * nodeValue        ：节点的值
            
            * parentNode    获取父节点（永远是一个元素节点）
            
            IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
            firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
            lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
            nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
            previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
            
            <ul>
                <li>北京</li>
            </ul>    
            
            * 如果通过ul获取北京的子节点，使用是    ul.firstElementChild;    获取北京的子节点（IE9-11 Chrome FireFox）
                * 但是如果IE6-8，需要使用firstChild;    
                
            <span id="spanId">
                文本内容
            </span>    
            
            * 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）
            
            
            * 方法
                * hasChildNodes()        检查是否包含子节点
                * hasAttributes()        检查是否包含属性
                
                * appendChild(node)            父节点调用，在末尾添加子节点
                * insertBefore(new,old)        父节点调用，在指定节点之前添加子节点
                * replaceChild(new,old)        父节点调用，替换节点
                * removeChild(node)            父节点调用,删除节点
                
                * cloneNode(boolean)        不是父节点调用,复制节点
                    * boolean    ：如果是true，复制子节点
                                ：如果是false，不复制子节点，默认是false
                
        
        * innerHTML    ：获取和设置文本内容。
            * innerHTML属性：
                * 获取文本内容
                * 设置文本内容
                
            * 事件：
                onclick        点击事件
                onload        加载事件
                onfocus        获取焦点事件
                onblur        失去焦点事件
                
            
        * 全选/全不选/反选的练习
            <input type="checkbox" />
            * 指定默认值：checked    只要出现在<input type="checkbox" />,对号就勾上了。
            
        
        * 鼠标移动的事件
            onmousemove
            onmouseout            
            onmouseover            
            
        * 鼠标点击事件（*****）
            onclick            单击
            ondblclick        双击
            
        * 加载和卸载
            * onload（*****）        加载
            * onunload        卸载
            
        * 获取焦点和失去焦点（*****）
            * onfocus        获取焦点
            * onblur        失去焦点
            
        * 键盘
            * onkeyup        按下抬起
            
        * 改变事件（*****）
            * onchange
            
            
        * 控制表单的提交（*****）    
            onsubmit
        
            
    * 作业：
        * insertBefore(new,old)        在指定节点之前添加子节点
        * 在上海之前添加子节点