关于javascript:JS中的DOM和BOM

52次阅读

共计 8258 个字符，预计需要花费 21 分钟才能阅读完成。

  • 明天开始咱们开始应用 js 去操作浏览器和页面中的 html 元素了

BOM

  • 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 中有一个对象叫做 location
  • 就是专门用来存储浏览器的地址栏内的信息的

location.href

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

    console.log(window.location.href)
    • 会把中文编程 url 编码的格局

  • location.href 这个属性也能够给他赋值

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

location.reload

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

    window.location.reload()
    • 留神：不要写在全局，不然浏览器就会始终处在刷新状态

浏览器的历史记录

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

history.back

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

    window.history.back()
    • 前提是你要有上一条记录，不然就是始终在这个页面，也不会回退

history.forword

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

    window.history.forward()
    • 前提是你要之前有过回退操作，不然的话你当初就是最初一个页面，没有下一个

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

  • 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>
  <head>
    <meta charset="UTF-8" />
    <script>
      // 这个代码执行的时候，body 还没有加载
      // 这个时候咱们就获取不到 body 中的那个 div
      
      // 就须要应用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载结束当前在执行
        // 那么这个时候页面的 DOM 元素都曾经加载了，咱们就能够获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

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

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
        // 这个代码执行的时候，body 曾经加载结束了
      // 在这里就能够获取到 div，写不写 window.onload 就无所谓了
      
      window.onload = function () {
        // 这个函数会在页面加载结束当前在执行
        // 那么这个时候页面的 DOM 元素都曾经加载了，咱们就能够获取 div 了
      }
    </script>
  </body>
</html>

浏览器的 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) // 1
console.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（Document Object Model）：文档对象模型
  • 其实就是操作 html 中的标签的一些能力

  • 咱们能够操作哪些内容

    • 获取一个元素
    • 移除一个元素
    • 创立一个元素
    • 向页面外面增加一个元素
    • 给元素绑定一些事件
    • 获取元素的属性
    • 给元素增加一些 css 款式
    • …
  • DOM 的外围对象就是 docuemnt 对象
  • document 对象是浏览器内置的一个对象，外面存储着专门用来操作元素的各种办法
  • DOM：页面中的标签，咱们通过 js 获取到当前，就把这个对象叫做 DOM 对象

获取一个元素

  • 通过 js 代码来获取页面中的标签
  • 获取到当前咱们就能够操作这些标签了

getElementById

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

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

    <body>
  <div id="box"></div>
  <script>
      var box = document.getElementById('box')
      console.log(box) // <div></div>
  </script>
</body>
    • 获取到的就是页面中的那个 id 为 box 的 div 标签

getElementsByClassName

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

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

    <body>
  <div calss="box"></div>
  <script>
      var box = document.getElementsByClassName('box')
      console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
    • 获取到的是一组元素，是一个长得和数组一样的数据结构，然而不是数组，是伪数组
    • 这个一组数据也是依照索引排列的，所以咱们想要精确的拿到这个 div，须要用索引来获取

getElementsByTagName

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

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

    <body>
  <div></div>
  <script>
      var box = document.getElementsByTagName('div')
      console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
    • 和 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 构造

    <body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerHTML)
        /*
            
      <p>
        <span>hello</span>
      </p>
        
        */
  </script>
</body>

  • 设置元素的内容

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.innerHTML = '<p>hello</p>'
  </script>
</body>
    • 设置完当前，页面中的 div 元素外面就会嵌套一个 p 元素

innerText

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

    <body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerText) // hello
  </script>
</body>

  • 能够设置元素外部的文本

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.innerText = '<p>hello</p>'
  </script>
</body>
    • 设置结束当前，会把 <p>hello</p> 当作一个文本呈现在 div 元素外面，而不会把 p 解析成标签

getAttribute

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

    <body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div')
       console.log(div.getAttribute('a')) // 100
    console.log(div.getAttribute('class')) // box
  </script>
</body>

setAttribute

  • 给元素设置一个属性（包含自定义属性）

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.setAttribute('a', 100)
    div.setAttribute('class', 'box')
    console.log(div) // <div a="100" class="box"></div>
  </script>
</body>

removeAttribute

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

    <body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div')
       div.removeAttribute('class')
    console.log(div) // <div a="100"></div>
  </script>
</body>

style

  • 专门用来给元素增加 css 款式的

  • 增加的都是行内款式

    <body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div) 
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>
    • 页面中的 div 就会变成一个宽高都是 100，背景色彩是粉色

className

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

    <body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
       console.log(div.className) // box
  </script>
</body>

  • 也能够设置元素的类名，不过是全笼罩式的操作

    <body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
       div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>
    • 在设置的时候，不论之前有没有类名，都会全副被设置的值笼罩

正文完
javascript
发表至： javascript
2021-08-19
 0
小程序中生成二维码和条形码
关于javascript:如何理解JavaScript中的对象
关于javascript:JS语言特性下
关于javascript:CSS变量用法及与js交互