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>