style屬性

    <style type="text/css">
        .box{
            position: absolute;
            z-index: 1;/*元素層級(jí),只能在絕對(duì)定位元素上生效*/
        }
    </style>
    <script>
    var  box = document.getElementsByClassName("box")[0];

    //style只能和行內(nèi)樣式進(jìn)行交互，命名規(guī)則是駝峰，值都是字符串
    document.getElementsByTagName("button")[0].onclick = function () {
      box.style.backgroundColor = (box.style.backgroundColor === "red" ? "rebeccapurple" : "red");
    };
    //cssText:字符串形式的樣式,把行內(nèi)樣式按照字符串輸出
    console.log(box.style.cssText);//"width: 100px;background-color: rebeccapurple; height: 100px;"
    //設(shè)置
    box.style.cssText = "width: 100px;background-color: rebeccapurple; height: 100px;"
    </script>

DOM元素的創(chuàng)建方式總結(jié)

第一種創(chuàng)建方式，document.write,可以識(shí)別標(biāo)簽，在script中寫html和css,跟script寫的位置有關(guān)系。script寫哪就創(chuàng)建在哪，不常用，容易覆蓋原來(lái)的頁(yè)面

document.write("<li>我是document.write創(chuàng)建的</li>");

第二種innerHTML,也可以識(shí)別標(biāo)簽,用的比較多，綁定屬性和內(nèi)容比較方便,節(jié)點(diǎn)嵌套創(chuàng)建用它比較方便

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

第三種：利用domAPI創(chuàng)建元素，也是用的比較多的，創(chuàng)建指定數(shù)量的時(shí)候一般用它

  var li4 = document.createElement("li");
  li4.innerHTML = "我是createElement創(chuàng)建出來(lái)的";
  //在父元素的最后添加
  li3.appendChild(li4);
  //指定位置添加
  var li5 = li4.cloneNode(false);
  li5.innerHTML = "我是cloneNode創(chuàng)建出來(lái)的"
  li3.insertBefore(li5,li4);//插入到哪個(gè)元素的前面

window對(duì)象

window是BOM的頂級(jí)對(duì)象，通常情況下可以省略

    window.alert("11");
    window.prompt("111");
    
    //成員變量也是window的屬性
    var  aa = "1";
    console.log(aa === window.aa);

    //自定義函數(shù)也是window的一個(gè)方法
    function aaa() {
      console.log("111");
    }
    window.aaa();

open,close

    //window.open(地址，是否開新窗口，新窗口參數(shù))
    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：屬性控制字符串，在此控制窗口的各種屬性，屬性之間以逗號(hào)隔開。
//        fullscreen= { yes/no/1/0 } 是否全屏，默認(rèn)no
//        channelmode= { yes/no/1/0 } 是否顯示頻道欄，默認(rèn)no
//        toolbar= { yes/no/1/0 } 是否顯示工具條，默認(rèn)no
//        location= { yes/no/1/0 } 是否顯示地址欄，默認(rèn)no
//        directories = { yes/no/1/0 } 是否顯示轉(zhuǎn)向按鈕，默認(rèn)no
//        status= { yes/no/1/0 } 是否顯示窗口狀態(tài)條，默認(rèn)no
//        menubar= { yes/no/1/0 } 是否顯示菜單，默認(rèn)no
//        scrollbars= { yes/no/1/0 } 是否顯示滾動(dòng)條，默認(rèn)yes
//        resizable= { yes/no/1/0 } 是否窗口可調(diào)整大小，默認(rèn)no
//        width=number 窗口寬度（像素單位）
//        height=number 窗口高度（像素單位）
//        top=number 窗口離屏幕頂部距離（像素單位）
//        left=number 窗口離屏幕左邊距離（像素單位）
    }
    //window.close關(guān)閉當(dāng)前頁(yè)面
    a2.onclick = function () {
      window.close();
    }

location

    //location,做頁(yè)面跳轉(zhuǎn)
    var div = document.getElementsByTagName("div")[0];
    div.onclick = function () {
      location.;
    }

//    console.log(location.href    )    //
//    console.log(location.hash    )    //    返回url中#后面的內(nèi)容，包含#
//    console.log(location.host    )    // 主機(jī)名，包括端口
//    console.log(location.hostname)    // 主機(jī)名
//    console.log(location.pathname)    // url中的路徑部分
//    console.log(location.protocol)    // 協(xié)議 一般是http、https
//    console.log(location.search   )     // 查詢字符串

navigator

    //navigator
    console.log(navigator.userAgent);//瀏覽器支持的系統(tǒng)
    console.log(navigator.platform);//系統(tǒng)

history

    //history,歷史記錄管理
    history.go(1);//前進(jìn)   history.forwardo()也是前進(jìn)
    history.go(-1);//后退  history.back()也是回退
    history.go(0);//刷新

定時(shí)器

setInterval,循環(huán)定時(shí)器，周而復(fù)始的執(zhí)行
setTimeout，炸彈定時(shí)器，用完以后立即報(bào)廢，只執(zhí)行一次

定義方法

    var a = 0;
    //定義方法1匿名函數(shù)，一般情況下都用這個(gè)
    setInterval(function () {
      console.log(a++);
    },1000);

    //定義方法2函數(shù)名
    setInterval(aaa,1000);
    function aaa() {
      console.log(1);
    }

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

銷毀定時(shí)器

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

綁定事件的第二種方法

第一種綁定事件的方法，當(dāng)事件被重復(fù)綁定的時(shí)候，會(huì)被覆蓋掉

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

    //onclick事件綁定會(huì)被覆蓋掉
    button.onclick = function () {
      console.log("12345");
    }
    button.onclick = function () {
      console.log("67890");
    }

事件綁定第二種方法:事件監(jiān)聽器,原事件被執(zhí)行的時(shí)候，后面的事件照樣被執(zhí)行，不會(huì)被覆蓋(更適合團(tuán)隊(duì)開發(fā))

    //1.事件源去調(diào)用
    //2.參數(shù)1是不帶on的觸發(fā)事件
    //3.參數(shù)2是事件名(執(zhí)行函數(shù))
    //4.參數(shù)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實(shí)現(xiàn)原理

  /**
     *
     * @param type 事件名
     * @param fn 執(zhí)行函數(shù)
     * @param element 給哪個(gè)元素綁定
     */
    function customAddEventListener(type,fn,element) {

      var str = "on" + type;
      //執(zhí)行方法的時(shí)候就先判斷事件是否被綁定完，然后在去綁定，就能判斷之前的事件是否被綁定過
      var oldEvent = element[str];
      element[str] = function () {
        //不能直接調(diào)用，因?yàn)檫€不知道這個(gè)元素之前還有沒有綁定同樣的事件
        //進(jìn)行判斷，如果有就先把之前的執(zhí)行完再執(zhí)行，如果沒有接直接執(zhí)行
        //如果沒有被定義過事件該事件源的該事件屬性應(yīng)該是null對(duì)應(yīng)的boolean值是false
        //如果已經(jīng)定義過事件該事件源的該事件屬性應(yīng)該是function本身對(duì)應(yīng)的boolean值是true
        if (oldEvent) {
            oldEvent();
        }
        fn();
      };
    }