BOM / DOM（上）

• 今天开始我们开始使用 js 去操作浏览器和页面中的 html 元素了

BOM

BOM对象的学习路线：

1. 了解window对象特性
   • 所有的全局变量都放在window对象之中
     • 这个行为是完全有浏览器自主完成的没有我们的任何参与，我们学习的就是这样做之后我们使用数据的时候的注意事项就可以了
   • 所有的全局变量访问都会在前面默认加上window
     • 所有的全局变量访问实际上都是以window.xxx的形式进行访问的
     • 变量访问是默认给所有的变量前面都加上 window. 的
   • 所有的window，都可以默认省略
2. 了解window对象里面的API
   • alert、prompt、confirm、parseInt
3. 了解window对象的子集对象：
   • Location ** ：地址栏对象
   • history : 历史记录对象
   • navigator ：浏览器嗅探对象(了解)
   • screen ：屏幕尺寸信息
   • document ：文档对象

• BOM（Browser Object Model）： 浏览器对象模型
• 其实就是操作浏览器的一些能力
• 我们可以操作哪些内容
  • 获取一些浏览器的相关信息（窗口的大小）
  • 操作浏览器进行页面跳转
  • 获取当前浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 浏览器的信息（浏览器的版本）
  • 让浏览器出现一个弹出框（alert/confirm/prompt）
• BOM 的核心就是 window 对象
• window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

获取浏览器窗口的尺寸

• innerHeight 和 innerWidth

• 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

  var windowHeight = window.innerHeight
  console.log(windowHeight)
  
  var windowWidth = window.innerWidth
  console.log(windowWidth)
  

浏览器的弹出层

• alert 是在浏览器弹出一个提示框

  window.alert('我是一个提示框')
  

  

  • 这个弹出层知识一个提示内容，只有一个确定按钮
  • 点击确定按钮以后，这个提示框就消失了

• confirm 是在浏览器弹出一个询问框

  var boo = window.confirm('我是一个询问框')
  console.log(boo)
  

• 这个弹出层有一个询问信息和两个按钮

• 当你点击确定的时候，就会得到 true

• 当你点击取消的时候，就会得到 false

• prompt 是在浏览器弹出一个输入框

  var str = window.prompt('请输入内容')
  console.log(str)
  

• 这个弹出层有一个输入框和两个按钮
• 当你点击取消的时候，得到的是 null
• 当你点击确定的时候得到的就是你输入的内容

window对象的子集对象：

1. 地址信息:location

• 在 window 中有一个对象叫做 location
• 就是专门用来存储浏览器的地址栏内的信息的

location.href

• 只要我们赋值的路径不是绝对路径，那么我们只改变浏览器之中最后一部分的路径

• location.href 这个属性存储的是浏览器地址栏内 url 地址的信息

  console.log(window.location.href)
  

  • 会把中文编程 url 编码的格式

• location.href 这个属性也可以给他赋值

  window.location.href = './index.html'
  // 这个就会跳转页面到后面你给的那个地址
  

• 什么叫绝对路径：

  • 协议+域名
  • 协议：
    • 本地协议：fill://
    • 网络协议：http,https

• 哈希值：唯一标记

  • 跨页面传值

            btn2.onclick = function(){
                  location.href = "04_详情页.html#id=1"
            }

            btn3.onclick = function(){
                  location.href = "04_详情页.html#id=2"
            }

            // 获取hash值 : 
            //location.hash ; 


            // API  : 
            // - reload() : 刷新页面的; 
            
            // location.reload();
            
            // - replace : 替换路径; 
            // - assigin : 改变路径; 

            // - 不保留当前页面的回退记录; 
            btn4.onclick = function(){
                  location.replace("http://www.baidu.com")
            }
            // - assign 保留当前页面的回退记录; 
            btn5.onclick = function(){
                  location.assign("http://www.baidu.com")
            }

• location 对象的属性

location.reload

• location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理

  window.location.reload()
  

  • 注意： 不要写在全局，不然浏览器就会一直处在刷新状态

浏览器的历史记录

• window 中有一个对象叫做 history
• 是专门用来存储历史记录信息的

history.back

• history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ?? 按钮

  window.history.back()
  

  • 前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forword

• history.forword 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ?? 按钮

  window.history.forward()
  

  • 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

history.go

浏览器的版本信息（了解）

• window 中有一个对象叫做 navigator
• 是专门用来获取浏览器信息的

navigator.userAgent

• navigator.userAgent 是获取的浏览器的整体信息

  console.log(window.navigator.userAgent)// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
  

navigator.appName

• navigator.appName 获取的是浏览器的名称

  console.log(window.navigator.appName)
  

navigator.appVersion

• navigator.appVersion 获取的是浏览器的版本号

  console.log(window.navigator.appVersion)
  

navigator.platform

• navigator.platform 获取到的是当前计算机的操作系统

  console.log(window.navigator.platform)
  

浏览器的 onload 事件

• 这个不在是对象了，而是一个事件

• 是在页面所有资源加载完毕后执行的

  window.onload = function () {  console.log('页面已经加载完毕')}
  

在 html 页面中把 js 写在 head 里面

在 html 页面中把 js 写在 body 最后面

window对象的事件：

浏览器的 onscroll 事件

• 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发

• 或者鼠标滚轮滚动的时候出发

  window.onscroll = function () {  console.log('浏览器滚动了')}
  

  • 注意：前提是页面的高度要超过浏览器的可是窗口才可以

浏览器滚动的距离

• 浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离
• 思考一个问题？
  • 浏览器真的滚动了吗？
  • 其实我们的浏览器是没有滚动的，是一直在那里
  • 滚动的是什么？是我们的页面
  • 所以说，其实浏览器没有动，只不过是页面向上走了
• 所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
• 所以不是在用 window 对象了，而是使用 document 对象

scrollTop

• 获取的是页面向上滚动的距离

• 一共有两个获取方式

  • document.body.scrollTop
  • document.documentElement.scrollTop

  window.onscroll = function () {  console.log(document.body.scrollTop)  console.log(document.documentElement.scrollTop)}
  

  • 两个都是获取页面向上滚动的距离
  • 区别：
    • IE 浏览器
      • 没有 DOCTYPE 声明的时候，用这两个都行
      • 有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
    • Chrome 和 FireFox
      • 没有 DOCTYPE 声明的时候，用 document.body.scrollTop
      • 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
    • Safari
      • 两个都不用，使用一个单独的方法 window.pageYOffset

scrollLeft

• 获取页面向左滚动的距离

• 也是两个方法

  • document.body.scrollLeft

  • document.documentElementLeft

    window.onscroll = function () {  console.log(document.body.scrollLeft)  console.log(document.documentElement.scrollLeft)}
    

  • 两个之间的区别和之前的 scrollTop 一样

定时器

• 在 js 里面，有两种定时器，倒计时定时器 和 间隔定时器

倒计时定时器

• 倒计时多少时间以后执行函数

• 语法： setTimeout(要执行的函数，多长时间以后执行)

• 会在你设定的时间以后，执行函数

  var timerId = setTimeout(function () {  console.log('我执行了')}, 1000)console.log(timerId) // 1
  

  • 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
  • 所以会在页面打开 1 秒钟以后执行函数
  • 只执行一次，就不在执行了
  • 返回值是，当前这个定时器是页面中的第几个定时器

间隔定时器

• 每间隔多少时间就执行一次函数

• 语法： setInterval(要执行的函数，间隔多少时间)

  var timerId = setInterval(function () {  console.log('我执行了')}, 1000)
  

  • 时间和刚才一样，是按照毫秒进行计算的
  • 每间隔 1 秒钟执行一次函数
  • 只要不关闭，会一直执行
  • 返回值是，当前这个定时器是页面中的第几个定时器

定时器的返回值

• 设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

• 只要有一个定时器，那么就是一个数字

  var timerId = setTimeout(function () {  console.log('倒计时定时器')}, 1000)var timerId2 = setInterval(function () {  console.log('间隔定时器')}, 1000)console.log(timerId) // 1console.log(timerId2) // 2
  

关闭定时器

• 我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器

• 这个 timerId 就是用来关闭定时器的数字

• 我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

  var timerId = setTimeout(function () {  console.log('倒计时定时器')}, 1000)clearTimeout(timerId)
  

  • 关闭以后，定时器就不会在执行了

  var timerId2 = setInterval(function () {  console.log('间隔定时器')}, 1000)coearInterval(timerId2)
  

  • 关闭以后定时器就不会在执行了

• 原则上是

  • clearTimeout 关闭 setTimeout
  • clearInterval 关闭 setInterval

• 但是其实是可以通用的，他们可以混着使用

  var timerId = setTimeout(function () {  console.log('倒计时定时器')}, 1000)// 关闭倒计时定时器clearInterval(timerId)var timerId2 = setInterval(function () {  console.log('间隔定时器')}, 1000)// 关闭间隔定时器clearTimeout(timerId2)
  

DOM（上）

DOM对象的三大操作

样式操作

1. 获取元素样式
   1. offset家族：
      • 宽高偏移
      • 以测量的形式获取元素属性

var box = document.getElementById("box");offsetLeft , offsetTop , offsetHeight , offsetWidth ; // 测得的宽高为怪异盒子模型的宽高计算方式，并不是直接设定的宽高console.log( box.offsetWidth );console.log( box.offsetHeight );

2. ? offset参照物：从当前元素开始逐层向父级进行查找， 如果有带有position属性的元素，那么就以这个元素为参照，如果查找到了body依旧没有找到参照物，那么我们就以body为参照物;

• offset注意事项：
  • offset家族只能取值，不能赋值
  • offset家族取值的性能都比较弱
  • 尽量避免重复使用offset测量元素的属性值

3. getComputedStyle 工具 ：取出样式表中的数据

   var box = document.getElementById("box");var box_style = getComputedStyle(box);// 获取当前元素样式表里面的数据; console.log(box_style.left);console.log(box_style.margin);console.log(box_style.marginLeft);
   

4. DOM对象操作样式：只能在行内去style里面操作,有两种方式进行取值和赋值

   1. dom.style.属性名 = 属性值
   2. dom.style.cssText = "行内样式属性"

   box.style.width = "300px";box.style.height = "400px";// - style.属性名 = 属性值 这样的行内样式添加方式样式是累加的; // - style.cssText = 行内样式 ; 是对样式进行覆盖; box.style.cssText = "background-color:orange";box.style.cssText = "";
   

属性操作

1. 万金油API：set设置、get获取、remove删除

   // attribute 属性; var box = document.getElementById("box");box.setAttribute("data-id", "hello");var res = box.getAttribute("id")var res2 = box.getAttribute("data-id")console.log(res, res2);// box.removeAttribute("data-id");// - 点击按钮的时候给 box 添加 active类名 , 再次点击删除active类名; var btn = document.getElementById("btn");btn.onclick = function() {    if (box.getAttribute("class") === "active") {        box.removeAttribute("class");    } else {        box.setAttribute("class", "active");    }}
   

2. 操作类名的时候我们有一套更先进的API：

   dom.classList：

   • toggle：

     • 通俗：如果存在类名就删除，如果不存在就添加

     • 官方：方法从列表中删除一个给定的标记 并返回 false 。 如果标记 不存在，则添加并且函数返回 true。

       // box.classList.toggle : 如果存在类名就删除，如果不存在就添加; // 方法一：btn.onclick = function() {    box.classList.toggle("active");}// 方法二：btn.onclick = function() {    if (box.getAttribute("class").indexOf("active") === -1) {        box.classList.add("active");    } else {        box.classList.remove("active");    }}
       

   • add：

   • remove：

3. 属性简写：

   • dom.属性名：取值;

   • dom.属性名 = 属性值：赋值

   • // 取出class名的时候需要使用属性 className; console.log(box.className);box.className = "active";// 所有元素 : // id , src , href // document 有title属性可以简写; document.title = "hello world"
     

内容操作

1. 内容操作：innerHTML 、innerText 、value（修改表单里面的值）2. 取值：innerHTML会取出完整结构；innerText只会取出内部文本内容3. 赋值：innerHTML 赋值的时候会把符合html规则的字符串解析成标签；innerText 赋值的时候会把> 和 < 进行转义 , 转义之后进行赋值

// - 取值 :var box = document.getElementById("box");// 取值 : innerHTML 会取出完整结构; console.log(box.innerHTML);// innerText 只会取出内部文本内容; console.log(box.innerText);// - 赋值 : // - 赋值都是替换行为; // - innerHTML 赋值的时候会把符合html规则的字符串解析成标签; box.innerHTML = "你好";// - innerText 赋值的时候会把> 和 < 进行转义 , 转义之后进行赋值; // > > < <box.innerText = "你好";btn.onclick = function() {    console.log(ipt.value);}console.log(ipt.value);

dom对象的增删改查

1. 创建元素：

   1. var div = document.createElement("div");div.innerHTML = "hello world";
      

   2. 创建一个dom对象，把dom对象放到页面之中浏览器就会创建一个与其相对应的标签

      属性	作用
      appendChild	把dom对象放入到目标元素的最末端
      childNode	用来选中元素子集中的所有内容包括文字
      replaceChild	replaceChild(新元素，被替换的元素)
      insertBefore	insertBefore(新元素，被插入的元素)

      3. 注意：如果页面之中已经存在的元素被appendChild 了，那么他会在原来的位置删除之后放入新的位置4. 删除元素：

      // dom.remove();var btn2 = document.getElementById("btn2");btn2.onclick = function(){target.remove();}
      

      5. 元素克隆：把一个元素原模原样的克隆一份

      var btn3 = document.getElementById("btn3");btn3.onclick = function(){    var clone_box = box.cloneNode( true );    target.appendChild( clone_box )}
      

• DOM（Document Object Model）： 文档对象模型
• 其实就是操作 html 中的标签的一些能力
• 我们可以操作哪些内容
  • 获取一个元素
  • 移除一个元素
  • 创建一个元素
  • 向页面里面添加一个元素
  • 给元素绑定一些事件
  • 获取元素的属性
  • 给元素添加一些 css 样式
  • ...
• DOM 的核心对象就是 docuemnt 对象
• document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
• DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
• dom.style.属性名 = 属性值的方式可以给元素添加行内样式

获取一个元素

• 通过 js 代码来获取页面中的标签
• 获取到以后我们就可以操作这些标签了

getElementById

• getElementById 是通过标签的 id 名称来获取标签的

• 因为在一个页面中 id 是唯一的，所以获取到的就是一个元素

  • 获取到的就是页面中的那个 id 为 box 的 div 标签

getElementsByClassName

• getElementsByClassName 是用过标签的 class 名称来获取标签的

• 因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素

• 哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

  • 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是伪数组
  • 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个 div，需要用索引来获取

getElementsByTagName

• getElementsByTagName 是用过标签的 标签 名称来获取标签的

• 因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素

• 哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

  • 和 getElementsByClassName 一样，获取到的是一个长得很像数组的元素
  • 必须要用索引才能得到准确的 DOM 元素

querySelector

• querySelector 是按照选择器的方式来获取元素

• 也就是说，按照我们写 css 的时候的选择器来获取

• 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素

  console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
  

querySelectorAll

• querySelectorAll 是按照选择器的方式来获取元素

• 这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

  console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
  

  • 获取到的是一组数据，也是需要用索引来获取到准确的每一个 DOM 元素

操作属性

• 通过我们各种获取元素的方式获取到页面中的标签以后
• 我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

innerHTML

• 获取元素内部的 HTML 结构

    
      
        hello    
    
    
  

• 设置元素的内容

  • 设置完以后，页面中的 div 元素里面就会嵌套一个 p 元素

innerText

• 获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）

    
      
        hello    
    
    
  

• 可以设置元素内部的文本

  • 设置完毕以后，会把

    hello

    当作一个文本出现在 div 元素里面，而不会把 p 解析成标签

getAttribute

• 获取元素的某个属性（包括自定义属性）

setAttribute

• 给元素设置一个属性（包括自定义属性），如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

removeAttribute

• 直接移除元素的某个属性

style

• 专门用来给元素添加 css 样式的

• 添加的都是行内样式

  • 页面中的 div 就会变成一个宽高都是100，背景颜色是粉色

className

• 专门用来操作元素的 类名的

• 也可以设置元素的类名，不过是全覆盖式的操作

  • 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

• 如果先保留原先的类名，可以选择多类名使用

文档碎片

• 元素的容器
• 在内存之中的容器
• 放入页面之中不会产生多余的结构

案例

返回置顶

var goback = document.getElementById("goback");        // 回到顶部功能        window.onscroll = function() {            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;            console.log(scrollTop);            // 这两个数据都是作为 和阈值的计算条件来使用的;             // - 显示元素的阈值为scrollTop > 200             if (scrollTop > 300) {                // 让元素显示 :                 // 元素.style.属性名 = 属性;                 // - 表示给元素添加行内样式;                 goback.style.display = "block";            } else {                goback.style.display = "none";            }        }        goback.onclick = function() {            document.body.scrollTop = 0;            document.documentElement.scrollTop = 0;        }

创建动态表格

// 在页面上根据数据，动态创建表格        var arr = [{            name: 'Jack',            age: 18,            gender: '男'        }, {            name: 'Rose',            age: 20,            gender: '女'        }, {            name: 'Top',            age: 22,            gender: '男'        }];        var table = document.querySelector("tbody");        for (var i = 0; i < arr.length; i++) {            var tr = document.createElement("tr");            table.appendChild(tr);            for (var k in arr[i]) {                var td = document.createElement("td");                td.innerHTML = arr[i][k];                tr.appendChild(td);            }            var td = document.createElement("td");            td.innerHTML = "删除";            tr.appendChild(td);        }        // 添加删除操作        var dels = document.querySelectorAll("a");        dels.forEach(function(ele, index) {                ele.onclick = function() {                    table.removeChild(ele.parentNode.parentNode);                }            })            // for (var i = 0; i < dels.length; i++) {            //     dels[i].onclick = function() {            //         table.removeChild(this.parentNode.parentNode);            //     }