09-JavaScript高级

今日知识

1. Dom(文档对象模型)
2. Bom(浏览器对象模型)
3. 总结

Dom

1. 获取id为div1的元素对象。
    * var result=document.getElementById("div1");
    //获取元素内容
    var x=result.innerHTML;
2. 通过标签名称查找HTML元素
    *  var result=document.getElementByTagName("p");
    * 有多个P标签时，返回的数组形式
3. 通过类名查找Html元素
    * var result=document.getElementByClassName("类名称");
    * 有多个类名称相同标签时，返回的数组形式
4. 改变元素属性：var result=document.getElementById("div1");
    * result.setAttribute("属性名","新的属性值")；
    * 或者 result.属性名="新的属性值";
5. 修改css元素
    * 元素对象.style.属性=新的值；
6. DOM事件
    1. 鼠标事件
        1. onclick 当用户点击某个对象时调用的事件句柄。
        2. ondblclick 当用户双击某个对象时调用的事件句柄。
        3. onmousedown 鼠标按钮被按下。
            * 定义方法时，定义一个形参，接受event对象。
            * event对象中的button属性可以获取那个鼠标被点击了
        4. onmousemove 鼠标被移动。 //和下面类似
        5. onmouseover 鼠标移到某元素之上。
        6.  onmouseout 鼠标从某元素移开。
        7. onmouseup 鼠标按键被松开。
         //tr颜色改变，this代表当前触发的对象
        var tr = document.getElementsByTagName("tr");
       for (var i=0;i<tr.length;i++){
           tr[i].onmouseover = function () {
               this.style.background="#00ff00";
           }
           tr[i].onmouseout = function () {
               this.style.background="#ffffff";
              // alert(22)
           }
       }
    2. 框架和对象事件Object
        onload 一张页面或一幅图像完成加载。
    3. 表单事件
        1. onblur 元素失去焦点
        2. onfocus 元素获得焦点。
        3. onsubmit 确认按钮被点击。 //如果返回false,表单不会被提交
        4. onselect 文本被选中。( <input> 和 <textarea>)
        5. onchange 域的内容被改变。 ( <input>, <select>, 和 <textarea>)
    4. 键盘事件
        1. onkeydown 某个键盘按键被按下。
        2. onkeypress 某个键盘按键被按下并松开。
        3. onkeyup 某个键盘按键被松开。 

    * <p id="p1">
    这是一段文字。。。。。
    </p>
    <button onclick="change()">点我改变文本属性</button>
    <script>
        function change() {
            document.getElementById("p1").innerHTML="click事件触发，调用函数改变该方法";
        }
    </script>
7. DOM节点（动态添加和删除HTML元素）
    *    //获取对象元素
        var p=document.getElementById("div1");
        //获取要移除的对象
        var box=document.getElementById("con");
         var box=document.createElement("div");
        p.removeChild(box);
        //类似剪切到目标节点上
        p.appendChild(box);
        p.parentNode//获取p的父节点对象
        p.childNode//获取p的子节点
        p.childNodes//获取p的所有子节点
    1. 文本节点（没有任何标签修饰）
        * 文本节点的nodeName：永远是#text
        * nodeValue是属性包含的文本
        * nodeType=3
    2. 属性节点（style等等）
        * 文本节点的nodeName：是属性名称
        * nodeValue是属性包含的属性值
        * nodeType=2
    3. 元素节点（各种标签）
        * 文本节点的nodeName：是标签名称
        * nodeValue是不可用
        * nodeType=1
        * 注意：对 firstChild 最普遍的用法是访问某个元素的文本： childNode.firstChild.nodeValue
    4. 文档节点
        * 文本节点的nodeName：永远是#document
        * nodeValue是不可用
        * nodeType=9
* 节点的克隆
    //用克隆的为方法
            var clone=game.cloneNode(true);//那么 会克隆源节点的所有节点
            bj.parentNode.replaceChild(clone,bj);

BOM

1. Window:浏览器窗口对象
    * window是一个全局对象，不需要创建(调用下面方法window可以不写，直接用)
    *   var width=window.innerWidth;
        var heigth=window.innerHeight;
        document.write("浏览器的宽度："+width+",浏览器 的高度"+heigth);
    * window.open("http://ww.baidu.com") - 打开新窗口 ,返回一个新的window对象
    * window.close() - 关闭当前窗口
           * 谁调用我 ，我关谁，可以把新创建的窗口对象用一个变量接收，该变量调用close()方法即可关闭，新打开的页面
    * window.moveTo() - 移动当前窗口
    * window.resizeTo() - 调整当前窗口的尺寸
    * window.confirm("sometext");
        当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
        window.confirm() 方法可以不带上window对象，直接使用confirm()方法。
    * window.prompt("sometext","defaultvalue");
        如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。用一个变量来接收你输入的值。
1.1 定时器
    1. setTimeout() :在指定时间后调用该方法，只调用一
        * 参数：js代码或者方法对象，第二个参数是毫秒值
        clearTimeout(需要定时器的返回值) 取消由 setTimeout() 方法设置的 timeout。
        * 返回值：返回一个唯一标识，用于取消定时器
    2. setInterval():参数和上面一样，按指定时间一直调用
        clearInterval() 取消由 setInterval() 设置的 timeout。
2. Screen:屏幕对象
    1. var width=screen.availWidth();//获取屏幕的可用宽
    2. var height=screen.availHeight();//获取屏幕的可用高
3. Locaton:位置对象
    1. location.href="http://www.cskaoyan.com";//重定向到其他yemian
    2. location.reload();//重新加载当前页面
    3. host 返回一个URL的主机名和端口
    4. hostname 返回URL的主机名
    5. href 返回完整的URL //不赋值的话，可以直接获取当前的url，赋值的话代表将要跳转的地址
4. History:历史记录对象（onclicks属性中用）
    1. back() 加载 history 列表中的前一个 URL
    2. forward() 加载 history 列表中的下一个 URL
    3. go() 加载 history 列表中的某个具体页面
5. Navigator:浏览器对象
    1. appCodeName 返回浏览器的代码名
    2. appName 返回浏览器的名称
    3. appVersion 返回浏览器的平台和版本信息
    4. cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
    5. platform 返回运行浏览器的操作系统平台
    6. userAgent 返回由客户机发送服务器的user-agent 头部的值