day07原生js BOM和 DOM

        前端分为三部分： HTML、CSS、JS
        JS也分三部分： BOM、DOM、ECMAScript
        BOM: Browser Object Model 浏览器对象模型 简单来说就是window这个对象
            可以通过window来操控浏览器
                window.setInterval()
                window.location  浏览器的地址栏
                window.history   浏览器的历史记录
                window.navigator 浏览器的相关引导信息
                window.localStorage 浏览器的本地存储
                window.document  浏览器的文档对象 因为它用的比较多 所以单独把它的概念独立出来 成为了"DOM"
                ...
        DOM: Document Object Model 文档对象模型 简单来说就是document这个对象
            可以通过document对象来操控文档
                获取元素
                设置属性
                创建元素
                更改元素位置
                ...
        ECMAScript: JS的核心语法部分
            一句话: 代码该怎么写 都由ECMAScript决定
                如何定义变量
                如果书写表达式
                如何定义数组
                如何定义对象
                如何定义函数
                这门语言中有多少数据类型
                如何判定数据类型
                ...

/* location */
// window.location 这个对象是window的属性 可以不打点直接用
// 它里面包含着许多的当前网页的网址相关的信息
// console.log(location);
// location.href 它是当前的浏览器整个网址 也叫做URL
// 它可以读取 可以修改 当它发生变化时 浏览器的地址栏就真的发生了变化
// location.reload() 该方法用于刷新当前页面

    /* history */
    // window.history是用于管理浏览器的历史记录的 它有三个方法
    // 1 forward() 前进
    // 2 back() 后退
    // 3 go() 跳转 参数是数字 如果为正数 表示前进几次 如果为负数 表示后退几次 如果为0表示刷新当前页面


    /* navigator */
    // 它是浏览器的一些信息存储对象
    // console.log(navigator.userAgent)

**

setInterval, setTimeout 和 clearInterval, clearTimeout

// 我们的JS的线程是一个单线程 也就是在执行代码的时候永远是只有一个线程在进行代码的执行
// 可是有一些任务是需要耗时的操作的 此时就存在一个问题 线程到底等待该任务执行完毕还是不等待
// JS肯定不会在这里等待该任务的执行结束 如果等待就叫做阻塞线程
// 但是如果不等待就又有一个问题，假设在执行完毕任务之后，还需要让我们的线程执行一些代码 可是线程没等在这里
// 所以执行不到 怎么办？ 此时就必须要有一种机制： 事件队列

    // setInterval 是一个定时器功能 能够按照时间间隔进行代码的执行  执行多次
    // console.log("1快递员：快递到了，放下了，走了")
    // console.log("2客户：1秒种之后你回来，帮我寄送另一个快递")
    // setInterval(function() {
    //     console.log("3快递员：回来了");
    // }, 1000);
    // console.log("4快递员：第二个快递到了放下了 走了");
    // console.log("5快递员：第三个快递到了放下了 走了");
    // console.log("6快递员：第四个快递到了放下了 走了");





    // setTimeout 是一个定时器功能 能够按照时间间隔进行代码的执行 执行一次
    // console.log("1快递员：快递到了，放下了，走了")
    // console.log("2客户：1秒种之后你回来，帮我寄送另一个快递")
    // setTimeout(function() {
    //     console.log("3快递员：回来了");
    // }, 1000);
    // console.log("4快递员：第二个快递到了放下了 走了");
    // console.log("5快递员：第三个快递到了放下了 走了");
    // console.log("6快递员：第四个快递到了放下了 走了");

    
    // 清除定时器 clearInterval
    // 清除延时器 clearTimeout
    // 注：这两个方法可以通用 
    // var timer = setInterval(function() {
    //     console.log(111);
    // }, 100);

    // var timer1 = setInterval(function() {
    //     console.log(222);
    // }, 200);

    // 当setInterval这个函数执行的时候 不会立即执行里面的代码 而是等时间到才执行第一次
    // setInterval函数的作用：将第一个参数这个函数交给了浏览器 让浏览器开始计时 浏览器会返回一个"句柄" 可以理解为这个定时器的编号 
    // 当我们清除的时候就使用这个编号进行清除 
    // clearInterval(timer);
    // clearInterval(timer1);

**
1 getElementById 根据ID获取元素
// 该方法接受的是字符串 返回根据该字符串作为id寻找到的元素 只找到第一个 返回的是单个元素 如果根据字符串找不到对应的元素 则返回null
// var box = document.getElementById(“box”);
// var box1 = document.getElementById(“box1”); // null

2 getElementsByTagName 根据标签名获取元素集合 集合里面的才是元素
// var lis = document.getElementsByTagName(“li”);

3 getElementsByName 根据name属性值 获取元素集合 集合里面的才是元素 注:该方法不兼容
// var username = document.getElementsByName(“username”)[0];
// console.log(username);
4. getElementsByClassName 根据类名获取元素集合 集合里面的才是元素 注:该方法不兼容
// var a = document.getElementsByClassName(“a”)[0];
// console.log(a);

5. querySelector 根据选择器找到一个元素
   // var box = document.querySelector("#box");
   // var box = document.querySelector(".b");

6. querySelectorAll 根据选择器找到一个元素集合
   // var divs = document.querySelectorAll(".a");
   // console.log(divs);

// // 获取body 快速获取body的方式 document.body
// console.log(document.body);
// // 获取html 快速获取html的方式 document.documentElement
// console.log(document.documentElement);
// // 获取head 快速获取head的方式 document.head
// console.log(document.head);
// // 获取title 快速获取title的方式 document.title (获取的是文本而不是元素)
// console.log(document.title);

    // 获取h1的内部文本
    // var h1 = document.getElementsByTagName("h1")[0];

    // 获取h1的内部文本
    // console.log(h1.innerHTML);
    // console.log(h1.innerText);


    // 设置内部的文本
    // h1.innerHTML += "<i>我是后来的</i>";
    // h1.innerText += "nihao";