js 四 windows对象

1 window 对象
    1 window对象的属性
        window对象的属性，又都是对象类型的
        1 screen 对象
            访问screen 对象
            et:
                console.log(window.screen)
                console.log(screen)
            获取屏幕尺寸信息：
                1 width/height:获取屏幕的宽高
                 availWidth.availHeight 获取屏幕实际可用宽高 
                    实际可用宽高是屏幕宽高减去任务栏的高度/宽度，不同的操作系统，
                    任务栏高度不同：xp-40px;win7-30px;
                2 history 对象
                    作用：包含当前窗口访问过的所有url
                    属性和方法：
                        1 属性：
                            lenth: 当前窗口访问过的url数量
                        2 方法：
                            1 back():相当于后退按钮
                            2 forward () 相当于刷新按钮
                            3 go() 相当于跳转，可正可负，正值前进，负值后退
                3 location 对象
                    1 作用：localtion对象保存的是当前窗口地址栏的信息，也是当前页面的URL
                    2 属性：
                        href: 可以获取当前窗口正浏览页面的URL，如果给href属性赋值，相当于页面跳转
                                在当前窗口中实现内容重定向
                    3 方法：
                        reload(param):重载页面，相当于刷新操作
                        参数：
                            可选，默认为false，表示从缓存中加载，可设置为true，表示从服务器端重新请求，加载页面

                4 navigator 对象
                    作用：保存浏览器相关的信息
2 DOM(document对象)
    1 DOM: 文档对象模型，核心是document对象，封装了所有的HTML元素，及操作HTML元素的属性和方法
    2 节点对象：
        网页在加载的过程中，会自动封装文档中的所有的内容，生成一颗DOM树，包含HTML标签，文本，注释，每个标签，
        标签内容，标签属性,注释内容都对应称为节点
        1 节点分类：
            1 元素节点 - 网页中的每个标签都是元素节点
            2 属性节点 - 每个标签中的标签属性都是属性节点
            3 文本节点 - 标签中的文本内容就是文本节点
            4 注释节点 - 文档中每段注释，都对应成一个节点
            5 文档节点 - 整个HTML文档 document
        2 节点操作：
            1 获取节点
            2 读取节点内容
            3 创建节点
            4 修改节点
            5 删除节点
        3 获取元素节点
            1 根据标签名获取元素节点：
                document.getElementsByTagName('p');标签名
                参数：标签名
                返回值：节点列表类数组结构，可以通过下标访问
            2 根据标签的class属性值，获取元素节点
                document.getElementsByClassName('c1');类名
                参数：class 属性值
                返回值：节点列表，可以通过下标来访问
            3 根据标签的name属性值获取元素节点
                document.getElementsByName('uname');表单name
                参数：name属性值
                返回值：节点列表
            4 根据标签的ID属性值获取具体的节点对象
                document.getElementById('box'); id名
                参数：id属性值
                返回值：具体的节点对象
            元素节点常用属性：
                1 innerHTML :用来设置或读取元素节点的内容
                    赋值时，可识别HTML标签
                2 innerText :设置或读取元素节点的标签内容，
                    赋值时，不能识别HTML标签、
                3 value : 用来设置或读取表单元素的值
            使用注意：
                根据代码从上到下的执行顺序，获取元素节点的操作，需在body加载完毕之后执行。注意代码书写顺序
        4 获取或设置元素节点的属性：
            标签属性在Js中视为元素节点对象的属性
            1 获取标签属性
                方法：getAttribute('attrName');
                参数：指定属性的值
            2 设置标签属性
                方法：setAttribute('attrName','value');
                参数：属性名与对应的属性值
                如果需要设置多个类名的话，需要在属性之间用空格隔开
                h1.setAttribute('class','c1 c2')
            3 移除设置的属性
                方法：tag.removeAttribute('class')
                        var h1 = document.getElementsByTagName('h1')[0];
                        h1.setAttribute('id','d1')
                        h1.removeAttribute('class')
            4 使用点语法访问对象属性
                1 设置属性值：
                    elem.id = '';         // 设置id属性值
                    elem.className = ''; // 设置class属性值
                    注意：class 是JS关键字，不能直接使用
                2 获取属性值
                    console.log(elem.id)
                3 移除属性：
                    elem.id = ""; //空字符串
                    elem.id = null;
        5 操作元素样式
            1 可以通过属性id,class对应选择器， 为元素添加样式
                et
                    elem.setAttribute('clas','');
                    elem.className ='';
            2 访问节点对象的style属性，操作元素行内样式
                et:
                    <h1 style="color:red;font-size:20px;">
                使用：
                    通过元素节点访问style属性，style本身也是对象，由属性和值组成
                    操作样式，实际是访问style对象的属性，为其赋值
                注意：
                    1 一个单词构成的css属性，可以直接访问
                    2 css属性名中出现的多个单词，使用'-'连接时，在js中一律改成驼峰标识
                    et:
                        elem.style.fontSize ='20px';
                    3 属性值以字符串形式赋值
                        elem.style.color='red';
        6 读取节点类型信息：
            1 查看节点类型
                属性：nodeType
                取值：
                    1 当前为元素节点
                    2 当前为属性节点
                    3 当前为文本节点
                    8 当前是注释节点
                    9 当前是文档节点
            2 获取节点名称
                属性：nodeName
                取值：
                    元素 / 属性节点  返回元素名/属性名
                    文本节点         返回#text
                    注释节点         返回#coment
                    文档节点         返回#document
        7 节点对象的层次属性：
            1 parentNode
                获取当前节点对象的父节点
            2 childNdes
                表示获取当前节点下所有的子节点，返回子节点数组。
                包含文本节点。（换行也会被视为一个文本节点）
            3 children
                获取子节点
            4 nextSibling
                获取下一个兄弟节点
            5 nextElementSibling
                获取下一个兄弟元素节点
            6 previousSibling
                获取前一个兄弟节点
            7 previousElementSibling
                获取前一个元素兄弟节点
            8 atrributes
                用来获取当前元素节点所有属性节点的集合
        8 动态操作网页
            1 在网页中插入元素
                1 创建元素节点
                    var div = document.createElement('div');
                    参数：标签名
                    返回值：创建好的元素节点
                    为元素添加文本内容：
                        1 div.innerHTML/innerText
                        2 创建文本节点
                            document.createTextNode('');
                            参数：文本内容
                            返回值：文本节点
                2 添加节点
                    不管是在网页中追加子节点，还是为元素节点添加文本节点，所有的添加操作都由父元素执行
                    语法：
                        父节点.appendchild(childNode)
                        默认在父元素的末尾添加子节点
                    只有body对象可以使用 document.body 得到元素对象
                    et:
                        <body>
                        <script type="text/javascript">
                            var body = document.body;
                            var h1= document.createElement('h1');
                            h1.innerHTML='一级标题';
                            body.appendChild(h1);
                        </script>
                        </body>
                    注意：
                        文本节点是元素节点的子节点
                3 在指定位置插入元素节点
                    只有父节点能执行插入，删除操作
                    语法：
                        parentNode.insertBefore(newElem,oldElem);
                        表示在oldElem之前插入newElem
                4 删除节点：
                    语法：
                        parentNode.removeChild(elem)
                        在父节点中删除指定的子节点
    3 事件：
        1 事件是由用户行为激发的操作
        2 事件处理函数
            1 鼠标事件 ：
                onclick        单击
                ondblclick    双击
                onmouseover    鼠标移入元素
                onmouseout    鼠标移出元素
                onmousemove 鼠标在元素内移动
            2. 加载完毕后执行
                onload    元素或文档加载完毕之后触发
　　　　　　　　　　　　最常用的就是 window.onload 
            3 状态改变事件
                常用于表单元素    
                onfocus     表单元素获取到焦点时触发
                onblur        失去焦点时触发
                onchange    元素内容发生改变并且元素失去焦点时触发
                oninput        实时监听输入，只要输入内容发生变化，都会触发
                onsubmit     当表单被提交时触发
　　　　　　　　　　　　　　当用户点击提交按钮时自动触发，用来验证表单是否可以提交给服务器，允许返回布尔值，表示数据是否可以提交发送　　
            4 键盘事件
                onkeydown    键盘按键按下触发
                onkeyup        键盘按键抬起触发
                onkeypress    键盘被按压触发
        3 事件绑定方式
            将事件处理函数绑定到元素节点上，由用户对元素节点的不同操作，触发相应的事件
            1 内联方式
                在标签中通过属性方式绑定事件
                <button onclick="alert('单击')">点击</button>
            2 JS 动态绑定事件
                div.onclick = function(){
                //事件触发后要执行的操作
                };
            3 W3C 标准事件监听
                div.addEventListener('click',function(){});
                function clickEvent(){
                }
                div.addEventListener('click',clickEvent)