window對象，BOM，window事件,延時器,DOM操做

01.定時器補充

function fn(){
    console.log(1);
}
setInterval("fn()",100);  //定時器調用匿名函數
/*
   function(){} （經常使用）
   fn(); //這個直接就運行了，會使運行結果不正確
   "fn()"
*/

02.window對象

//都是window下面的方法，其中，這三個對話框都有阻塞瀏覽器其餘功能的執行(阻止程序的運行)
alert('dfjjf'); //彈出一個對話框
confirm(); //彈出一個帶有肯定和取消按鈕的對話框，點擊肯定返回true,點擊取消返回false
prompt(); //輸入框對話框，點擊肯定返回輸入的內容，點擊取消返回null
​
//設置窗口大小
open('url','(名稱)','width = 400px,height:500px');
open('http://www.baidu.com','','width=300px,height;500px');
//window.resize(1000,200);在打開的百度的頁面，改變窗口大小
close();  //關閉窗口

03.BOM

1.history對象

history.go()

參數： -1 後退 0 刷新 1前進

history.back(); 後退

history.forward();前進

2.location對象

location.href = 'url' 頁面的跳轉

location.reload(); 頁面的刷新，若是參數爲true，清除緩存

3.navigator對象

navigator.userAgent

pc端："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36"

移動端："Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

簡單測試：
location.href='http://www.baidu.com';   //頁面跳轉(屬性)
location.reload();   //頁面刷新（方法 ）
navigator.userAgent();   //在控制檯輸入以後，pc端打印出"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36"
navigator.userAgent(); //移動端結果："Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

04.window的事件

1.window.onload

window.onload = function(){
 //等待頁面加載完成以後，再執行onload裏面的代碼
}

2.window.onscroll(滾動條事件)

window.onscroll = function(){
    //高頻觸發，滾動條只要滾動，就觸發！！！
}

05.滾動條事件案例

吸頂效果

<style>
        body{
            height:4000px;
       }
    *{
        margin:0;
        padding:0;
   }
    header{
        width:100%;
        height:150px;
        background:red;
   }
    nav{
        width:100%;
        height:40px;
        background: blue;
   }
</style>
<header></header>
<nav id="nav1"></nav>
<script>
    /*
    滾動條滾動，獲取滾動條的高度(存在兼容性)
    document.documentElement.scrollTop;
    document.body.scrollTop;
   */
    onscroll = function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  //兼容性
    if(scrollTop >= 150){
        nav1.style.position = 'fixed';
        nav1.style.top = 0;
   }else{
        nav1.style.position = 'static';  //讓它恢復原樣
   }
 }
</script>

06.延時器

setTimeout(function(){

},1000)

<style>
 width:100%;
 height:100%;
    background:blue;
</style>
<div id="box"></div>
<script>
    var height = 300;
 setTimeout(function(){
        var timer = setInterval(function(){
            //控制box的height值，實時減少box的height
            height -= 10;
            box.style.height = height + 'px';
            //關閉定時器
            if(height <= 0){
                clearInterval(timer);
           }
       },30)
   },0)
</script>

setTimeout(function(){
 console.log(0);
},0);  //設置爲0時，當即打印
console.log(1);
//結果是1 0 因爲異步加載的緣由

07.回到頂部

<style>
    *{
        margin:0;
        padding:0;
 }
 section{
        width:400px;
        height:2000px;
        background:pink;
   }
 p{
        font-size:20px;
        color:black;
   }
 #btn{
    font-size:40px;
  width:50px;
  height:50px;
  display:block;
  position:fixed;
  right:0;bottom:0;
 }
</style>
<section>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
 <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
    <p>春暖花開</p>
</section>
<button id="btn">^</button>
<script>
    function goTop(){
    //速度
    var speed = 100;
    //開啓定時器
    var timer = setInterval(function(){
            //獲取滾動條的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //設置滾動條的高度
            document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed;
            //加速
            speed += 10;
            //清除加速器
            if(scrollTop <= 0){
                clearInterval(timer);
           }
       },30)
 }
 btn.onclick = function(){
        goTop();
   }
</script>

08.進度條

<style>
    *{
    margin:0;
    padding:0
 }
 #box{
  width:800px;
  height:50px;
  background:blue;
 }
    #box1{
    width:0;
  height:50px;
  background:red;
 }
</style>
<div id="box">
    <div id="box1"></div>
</div>
<script>
        var speed = 10;
  var timer = setInterval(function(){
            //offsetWidth 獲取元素的高度的
            box1.style.width = box1.offsetWidth + speed + 'px';
            //清除定時器
            if(box1.offsetWidth >= 800){
                clearInterval(timer);
}
       },10)
</script>

09.DOM

1.dom節點的獲取

document.getElementById(id); //返回對擁有指定id的第一個對象進行訪問

document.getElementsByName(name); //返回帶有指定名稱的節點集合

document.getElementsByTagName(tagname); //返回帶有指定標籤名的對象集合

document.getElementsByClassName(classname); //返回帶有指定class名稱的對象集合（IE8如下不兼容）

2.ES5新增獲取元素

document.querySelector(); (IE8如下不兼容，不包括IE8)

eg:document.querySelector('#id > .box')

document.querySelectorAll() //獲取對應的所有元素，返回僞數組

parentNode 屬性返回某個節點的父節點

3.節點的建立

document.createElement('div'); //元素節點

document.createTextNode('nnnn'); //文本節點

4.添加節點

父節點.appendChild(須要添加的節點)

5.節點克隆

cloneNode() 若是參數爲true，克隆包括子節點

6.刪除節點

父節點.removeChild(子節點)

節點.remove();

7.檢測節點類型

節點一共分爲3種類型：

元素節點：<span></span>

屬性節點：<span id ="xxx"></span>

文本節點：djgkf

nodeType屬性:檢測節點的類型

元素類型 節點類型

元素element 1

屬性attr 2

文本text 3

註釋comments 8

文檔document 9

簡單測試：
<section id="box">
    <div>kkkk</div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
</section>
<div id="box"></div>
<input type="text" name="userName">
<input type="text" name="userName">
<input type="text" name="userName">
<section class="wrap"></section>
<script>
    var oBox = document.getElementById('box');
 console.log(oBox);
 
 var dwrap = document.getElementsByTagName('section');
console.log(dwrap);
 
 var obj = document.getElementsByClassName('wrap');
console.log(obj);
​
 var userName = document.getElementsByName('userName');
console.log(userName);
​
 var obj = document.querySelector('input');
console.log(obj);  //獲取一個input
​
 var obj = document.querySelectorAll('input');
console.log(obj);  //獲取全部的input
​
 var obj = document.querySelector('#box');
console.log(obj.parentNode); //獲取節點的父節點
​
 var dwrap = document.getElementsTagName('*');
console.log(dwrap);  //獲取頁面全部
 
 var createDiv = document.createElement('div');
console.log('createDiv');  //建立元素節點
​
 var createTxt = document.createTextNode('nnn');
console.log(createText);  //建立文本節點
​
 //添加節點
 var oBox = document.getElementById('box'); //首先獲取父節點
 var createDiv = document.createElement('div'); //建立新節點
oBox.appendChild(createDiv);//將建立的新節點添加到父節點裏面
​
 //節點克隆
 var oBox = document.getElementById('box');
 var newBox = oBox.cloneNode(true);
 document.body.appendChild(newBox);
​
 //刪除節點
 var oBox = document.getElementById('box');
 var aDiv = oBox.querySelectorAll('div');
 console.log(aDiv);  //父節點下子節點的節點集合
 oBox.removeChild(aDiv[1]); //刪除下標爲1的節點
 aDiv[0].remove(); //remove誰調用，就刪誰
​
 //節點的集合，給每一個節點操做，必須遍歷
 for(var i = 0 ; i < aDiv.length ; i++){
        console.log(aDiv[i]);
        console.log(aDiv[i].nodeType); //節點的類型爲1，代表是元素
}
</script>

10.childNodes

childNodes 包括元素節點也包括文本節點

children 只能獲取元素節點

檢測節點的類型：nodeType

節點的過濾：若是節點類型爲3（文本節點），直接remove（）；

簡單測試：
<section>
 <div>1<div>
   <div>2<div>
   <div>3<div>（8個div）
</section>
var aDiv = document.getElementById('box').childNodes;//NodeList(17) [text, div, text, div, text, div, text, div, text, div, text, div, text, div, text, div, text](回車形成的text文本節點)
var adIV = document.getElementById('box').children;//HTMLCollection(8) [div, div, div, div, div, div, div, div]
for(var i = 0 ; i <aDiv.length ; i++){
   if(aDiv[i].nodeType ==3){
       aDiv[i].remove();
   }
}
console.log(aDiv);

做業(根據用戶輸入的數值打印表格)

根據用戶輸入的數值打印表格
要求：每一行的最後有一個按鈕，點擊按鈕以後，刪除整行
 單元格內輸入1-100隨機數，每一個表格的背景顏色隨機
<style>
       *{
        margin:0;
        padding:0;
   }
 td{
        width:50px;
        height;50px;
        border:1px solid red;
        text-align:center;
   }
 tr button{
        width:100px;
        height:50px;
        text-align:center;
        font-size:16px;
        font-weigth:bold;
   }   
</style>
<label>輸入的行數</label>
<input type="text" id="txt1">
<label>輸入的列數</label>
<input type="text" id="txt2">
<button>打印</button>
<script src="../myApi.js"></script>
<script>
    var
  oTxt1 = document.getElementById('txt1');
  oTxt2 = document.getElementById('txt2');
  obtn = document.querySelector('#btn');
 obtn.onclick = function(){
        //獲取文本框的value的值
        var
        rows = oTxt1.value,
            cols = oTxt2.value;
        //建立table標籤
        var createTable = document.createElement('table');
        //根據用戶輸入的行數和列數，建立tr td
        //建立tr
        for(var i = 0 ; i < rows ; i++){
            var createTr = document.createElement('tr');
            //建立td
            for(var j = 0 ; j < cols ; j++){
                var createTd = document.createElement('td');
                //給td添加隨機數
                createTd.innerHTML = randomNum(1,100);
                //給td添加隨機背景色
                createTd.style.background = randomColor();
                //把td放在tr裏面
                createTr.appendChild(createTd);
           }
            //每一行建立一個按鈕
            var createBtn =document.createElement('button');
            createBtn.innerHTML = '刪除本行';
            createBtn.onclick = function(){
                //刪除本行，this指向的是單擊的按鈕
                this.parentNode.remove();
           }
            //把按鈕添加到行
            createTr.appendChild(createBtn);
            //把tr添加到table
        createTable.appendChild(createTr);
       }
        //把table放在body裏面
  document.body.appendChild(createTable);
   }
</script>