JS基础DOM二

style属性

    <style type="text/css">
        .box{
            position: absolute;
            z-index: 1;/*元素层级,只能在绝对定位元素上生效*/
        }
    </style>
    <script>
    var  box = document.getElementsByClassName("box")[0];

    //style只能和行内样式进行交互，命名规则是驼峰，值都是字符串
    document.getElementsByTagName("button")[0].onclick = function () {
      box.style.backgroundColor = (box.style.backgroundColor === "red" ? "rebeccapurple" : "red");
    };
    //cssText:字符串形式的样式,把行内样式按照字符串输出
    console.log(box.style.cssText);//"width: 100px;background-color: rebeccapurple; height: 100px;"
    //设置
    box.style.cssText = "width: 100px;background-color: rebeccapurple; height: 100px;"
    </script>

DOM元素的创建方式总结

第一种创建方式，document.write,可以识别标签，在script中写html和css,跟script写的位置有关系。script写哪就创建在哪，不常用，容易覆盖原来的页面

document.write("<li>我是document.write创建的</li>");

第二种innerHTML,也可以识别标签,用的比较多，绑定属性和内容比较方便,节点嵌套创建用它比较方便

  var li3 = document.getElementsByTagName("li")[0];
  li3.innerHTML += "<li>我是innerHTML创建的</li>";

第三种：利用domAPI创建元素，也是用的比较多的，创建指定数量的时候一般用它

  var li4 = document.createElement("li");
  li4.innerHTML = "我是createElement创建出来的";
  //在父元素的最后添加
  li3.appendChild(li4);
  //指定位置添加
  var li5 = li4.cloneNode(false);
  li5.innerHTML = "我是cloneNode创建出来的"
  li3.insertBefore(li5,li4);//插入到哪个元素的前面

window对象

window是BOM的顶级对象，通常情况下可以省略

    window.alert("11");
    window.prompt("111");
    
    //成员变量也是window的属性
    var  aa = "1";
    console.log(aa === window.aa);

    //自定义函数也是window的一个方法
    function aaa() {
      console.log("111");
    }
    window.aaa();

open,close

    //window.open(地址，是否开新窗口，新窗口参数)
    var a1 = document.getElementsByTagName("a")[0];
    var a2 = document.getElementsByTagName("a")[1];
    a1.onclick = function () {
      var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
      window.open("http://www.jd.com","_self",json);

//        featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
//        fullscreen= { yes/no/1/0 } 是否全屏，默认no
//        channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
//        toolbar= { yes/no/1/0 } 是否显示工具条，默认no
//        location= { yes/no/1/0 } 是否显示地址栏，默认no
//        directories = { yes/no/1/0 } 是否显示转向按钮，默认no
//        status= { yes/no/1/0 } 是否显示窗口状态条，默认no
//        menubar= { yes/no/1/0 } 是否显示菜单，默认no
//        scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
//        resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
//        width=number 窗口宽度（像素单位）
//        height=number 窗口高度（像素单位）
//        top=number 窗口离屏幕顶部距离（像素单位）
//        left=number 窗口离屏幕左边距离（像素单位）
    }
    //window.close关闭当前页面
    a2.onclick = function () {
      window.close();
    }

location

    //location,做页面跳转
    var div = document.getElementsByTagName("div")[0];
    div.onclick = function () {
      location.href = "https://www.baidu.com";
    }

//    console.log(location.href    )    //
//    console.log(location.hash    )    //    返回url中#后面的内容，包含#
//    console.log(location.host    )    // 主机名，包括端口
//    console.log(location.hostname)    // 主机名
//    console.log(location.pathname)    // url中的路径部分
//    console.log(location.protocol)    // 协议 一般是http、https
//    console.log(location.search   )     // 查询字符串

navigator

    //navigator
    console.log(navigator.userAgent);//浏览器支持的系统
    console.log(navigator.platform);//系统

history

    //history,历史记录管理
    history.go(1);//前进   history.forwardo()也是前进
    history.go(-1);//后退  history.back()也是回退
    history.go(0);//刷新

定时器

setInterval,循环定时器，周而复始的执行
setTimeout，炸弹定时器，用完以后立即报废，只执行一次

定义方法

    var a = 0;
    //定义方法1匿名函数，一般情况下都用这个
    setInterval(function () {
      console.log(a++);
    },1000);

    //定义方法2函数名
    setInterval(aaa,1000);
    function aaa() {
      console.log(1);
    }

    //定义方法3
    setInterval("sss(111)",1000);
    function sss(ssss) {
      console.log(ssss);
    }

销毁定时器

    //setInterval的返回值就是定时器的名字
    var num = 1;
    var timer = null;
    time = setInterval(function () {
      console.log(num++);
      if (num > 10) {
        clearInterval(timer);
      }
    },500);

绑定事件的第二种方法

第一种绑定事件的方法，当事件被重复绑定的时候，会被覆盖掉

    var  button = document.getElementsByTagName("button")[0];

    //onclick事件绑定会被覆盖掉
    button.onclick = function () {
      console.log("12345");
    }
    button.onclick = function () {
      console.log("67890");
    }

事件绑定第二种方法:事件监听器,原事件被执行的时候，后面的事件照样被执行，不会被覆盖(更适合团队开发)

    //1.事件源去调用
    //2.参数1是不带on的触发事件
    //3.参数2是事件名(执行函数)
    //4.参数3是事件名(捕获或者冒泡)

    button.addEventListener("click",fn1);
    button.addEventListener("click",fn2);
    button.addEventListener("click",fn3);
    function fn1() {
      console.log("12345");
    }
    function fn2()  {
      console.log("67890");
    }
    function fn3()  {
      console.log("123456789");
    }

addEventListener实现原理

  /**
     *
     * @param type 事件名
     * @param fn 执行函数
     * @param element 给哪个元素绑定
     */
    function customAddEventListener(type,fn,element) {

      var str = "on" + type;
      //执行方法的时候就先判断事件是否被绑定完，然后在去绑定，就能判断之前的事件是否被绑定过
      var oldEvent = element[str];
      element[str] = function () {
        //不能直接调用，因为还不知道这个元素之前还有没有绑定同样的事件
        //进行判断，如果有就先把之前的执行完再执行，如果没有接直接执行
        //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
        //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
        if (oldEvent) {
            oldEvent();
        }
        fn();
      };
    }