day41 Js节点操作、监听事件 和Bom

1. 节点操作
    1.1 什么是节点
        根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
        整个文档是一个文档节点  document
        每个 HTML 元素是元素节点
        HTML 元素内的文本是文本节点
        每个 HTML 属性是属性节点
    1.2 节点类型
        通过noteType属性可以获取节点的类型
        document的节点类型---9
             console.log(document.nodeType);//9
        标签的节点类型---1
            var box1 = document.getElementById("box1");
            console.log(box1.nodeType);//1
        属性的节点类型---2，getAttributeNode("属性"):获取元素的属性节点
             var attr1 = box1.getAttributeNode("class");
                console.log(attr1.nodeType);//2
        文本的节点类型---3，元素的第一个子节点就是文本节点
            console.log(box1.firstChild.nodeType);//3
    1.3 节点名称
        通过nodeName可以获取元素的节点名称。
            document的节点名称---#document
            console.log(document.nodeName);//#document
        标签的节点名称---大写的标签名
            console.log(box1.nodeName);//DIV
        属性的节点名称---属性名
            console.log(attr1.nodeName);//class
        文本的节点名称---#text
            console.log(box1.firstChild.nodeName);//#text
    1.4 节点值
        通过nodeValue可以获取元素的节点的值。
        document的节点值---null
             console.log(document.nodeValue);//null
        标签的节点值---null
             console.log(box1.nodeValue);//null
        属性的节点值---属性值
              console.log(attr1.nodeValue);//boxCl
        文本的节点值---文本的内容
            console.log(box1.firstChild.nodeValue);//我是div元素
2. 节点之间的关系
    2.1
        节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。
     父节点--parentNode
    父元素节点--parentElement
    子节点--childNodes：标签节点、文本节点、注释节点   得到的是伪数组
    子元素节点--children :标签节点
    第一个子节点--firstChild:文本
    第一个子元素节点--firstElementChild：第一个标签
     最后一个子节点--lastChild:文本
    最后一个子元素节点--lastElementChild: 最后一个标签
    上一个子节点--previousSibling:文本
    上一个子元素节点--previousElementSibling: 上一个标签
    下一个子节点 --nextSibling:文本
    下一个子元素节点--nextElementSibling: 下一个标签
    总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text
         firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。
    2.2    插入节点
            insertBefore() 方法可在已有的子节点前插入一个新的子节点。
        node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。
            var node=document.getElementById("myList2").lastChild;
            var list=document.getElementById("myList1");
            list.insertBefore(node,list.childNodes[0]);
    2.3 创建元素的三种方法
        1. document.write()
            弊端：只能在body中添加元素
                document.write('<div class="box1">我是div</div>');
        2. innerHtml
            弊端：在同级下只能添加一种元素，多个会覆盖
                  document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";
        3. document.createElement()
            父元素.appendChild(子元素)：给父元素末尾添加子元素
            var pObj = document.createElement("p");
             divObj1.appendChild(pObj);
3. 事件进阶
    3.1 事件三要素
        事件源：是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者，可以这样理解， 当你对某个元素执行动作的时候，
        会触发一系列效果（动画，跳转....），那么这个元素就是事件源。
        事件类型：例如，点击，鼠标划过，按下键盘，获得焦点。
        事件驱动程序：事件驱动程序即执行的结果，例如，当你点击cdsn图标的时候，会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。
        执行事件的步骤：获取元素、绑定事件、书写事件驱动程序
    3.2 监听事件
        绑定监听事件 addEventListener("事件的类型",事件的处理程序)
            box1.addEventListener("click", myFunc)
          function myFunc() {
            this.style.backgroundColor = "blue";
            }
        解绑监听事件removeEventListener("事件的类型",事件的处理程序)
            box1.removeEventListener("click", myFunc);
    3.3 事件对象
            任何事件都有内置对象event，事件对象的兼容性写法为
            var event = event || window.event;
            // 事件的类型
                console.log(event.type);
                // 元素的ID
                console.log(event.target.id);
                // 文本的内容
                console.log(event.target.innerText);
                // 事件的触发点是距离浏览器左侧的横纵坐标
                console.log("横坐标：" + event.clientX + "," + "纵坐标：" + event.clientY);
                console.log("横坐标：" + event.pageX + "," + "纵坐标：" + event.pageY);
                 console.log("我单击header!");
    3.4 事件冒泡
        假设一个元素div，它有一个下级元素p。
        <div>
         <p>元素</p>
        </div>
        这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？
            如何阻止冒泡（存在兼容性）
                e.stopPropagation(); 谷歌和火狐支持,
                window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
4. Bom
    4.1 Bom的顶级对象
            window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name
    4.2 对话框
        alert()
        prompt()
        confirm()
    4.3 加载事件
        onload事件
            onload 事件会在页面或图像加载完成后立即发生。
            onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
    4.4 Location 对象
            常用属性
        // //地址栏上#及后面的内容
        // console.log(window.location.hash);
        // //主机名及端口号
        // console.log(window.location.host);
        // //主机名
        // console.log(window.location.hostname);
        // //文件的路径---相对路径
        // console.log(window.location.pathname);
        // //端口号
        // console.log(window.location.port);
        // //协议
        // console.log(window.location.protocol);
        // //搜索的内容
        // console.log(window.location.search);
    4.5 History对象
        my$("btn1").onclick = function () {
            window.location.href = "15test.html";
            };
            //前进
            my$("btn2").onclick = function () {
            window.history.forward();
            };
            //后退
            my$("btn").onclick = function () {
            window.history.back();
    4.6 Navigator对象
        通过userAgent可以判断用户浏览器的类型
        console.log(window.navigator.userAgent);
        //通过platform可以判断浏览器所在的系统平台类型.
        //console.log(window.navigator.platform);
5. 定时器
    5.1 setInteval()
        setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
        setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
        clearInteval()
        clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
        clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
    5.2    setTimeout()
        方法用于在指定的毫秒数后调用函数或计算表达式。
        提示： 1000 毫秒= 1 秒。
        提示： 如果你只想重复执行可以使用 setInterval() 方法。
        提示： 使用 clearTimeout() 方法来阻止函数的执行。