JavaScript BOM/DOM

2022-10-11 本文已影响0人 t遇见

一、BOM
（1）认识BOM
BOM：浏览器对象模型
JavaScript代码中访问和操作浏览器的各种信息的一系列特殊对象，包含了浏览器窗口对象、地址信息对象、历史访问对象、版本信息对象、网页文档对象

窗口对象：可以操作浏览器弹窗、获取/设置浏览器尺寸、获取/设置浏览器位置等等
地址对象：可以操作浏览器访问url地址，实现根据地址切换不同页面
历史对象：可以操作浏览器访问历史记录
版本对象：可以获取浏览器和当前运行浏览器的操作系统信息
文档对象：DOM对象，描述了当前浏览器打开的网页文档
（2）常见BOM对象
常见BOM对象：
窗口对象：window
- alert() / confirm() / prompt() / 其他bom对象...
地址对象：location || window.location
- href：地址url信息
历史对象：history
- back()后退
- forward()前进
- go()访问某个记录
版本信息对象：navigator
- appName：浏览器内核名称
- appVersion：浏览器版本信息
- userAgent：浏览器相关信息，一般和版本信息相同
文档对象：document
- 文档对象，当前浏览器打开的网页文档
屏幕对象：screen
- 当前计算机屏幕信息
  （3）重要属性/事件
window.innerHeight / window.innerWidth : 窗口尺寸
window.onload / window.onresize / window.onscroll ：事件操作
location.href：访问地址
history.back() / forward() / go()：访问历史记录
navigator.appName / appVersion / userAgent浏览器版本信息
（4）案例：吸顶菜单

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0; padding: 0; box-sizing: border-box;}
    #nav{width: 100%;height: 50px; background:orangered; color: white;font-size: 22px; text-align:center; line-height: 50px;}
  </style>
  <script>
    // 网页加载事件：代码写在body的前面，保障标签加载完成后执行代码
    window.onload = function() {
      // 获取导航条
      var _nav = document.getElementById("nav")
      // 滚动条事件
      window.onscroll = function() {
        // 获取滚动条高度
        var top = document.body.scrollTop || document.documentElement.scrollTop
        console.log(top, "滚动条")
        // 判断滚动条位置，并设置菜单样式
        if(top >= 500) {
          _nav.style.position = "fixed"
          _nav.style.left = 0
          _nav.style.top = 0
        } else {
          _nav.style.position = "relative"
        }
      }
    }
  </script>
</head>
  <body>
    <div id="nav">页面顶部菜单</div>
    <div>内容0001</div>
    <div>内容0002</div>
    <div>..</div>
  </body>
</html>

（5）案例：回到顶部

<script>
    // 网页加载事件：代码写在body的前面，保障标签加载完成后执行代码
    window.onload = function() {
      // 获取导航条
      var _nav = document.getElementById("nav")
      // 获取回到顶部
      var _backTop = document.getElementById("back-top")
      // 滚动条事件
      window.onscroll = function() {
        // 获取滚动条高度
        var top = document.body.scrollTop || document.documentElement.scrollTop
        console.log(top, "滚动条")
        // 判断滚动条位置，并设置菜单样式
        if(top >= 500) {
          _nav.style.position = "fixed"
          _nav.style.left = 0
          _nav.style.top = 0
          // 显示回到顶部
          _backTop.style.display = "block"
        } else {
          _nav.style.position = "relative"
          _backTop.style.display = "none"
        }
      }
      _backTop.onclick = function() {
        // 设置滚动条高度0
        var timer = setInterval(function() {
          var top = document.documentElement.scrollTop
          if(top > 0) {
            document.documentElement.scrollTop -= 200
          } else {
            // 已经回到顶部，清除计时器
            clearInterval(timer)
          }
        }, 10)
      }
    }
  </script>
</head>

二、DOM
（1）认识DOM
DOM：文档对象模型
JavaScript语法上提供的可以用于对网页文档进行标签查询、创建/修改/删除标签、操作标签属性、操作标签样式、操作标签内容的一系列函数！
（2）查询DOM对象
网页文档对象的操作，首先通过代码查询标签对象——DOM对象
① 基础查询函数

函数	描述
`document.getElementById(idVal)`	根据`id`属性值查询单个`DOM`对象
`document.getElementsByClassName(cVal)`	根据`class`属性查询多个`DOM`对象
`document.getElementsByTagName(tVal)`	根据标签名称查询多个`DOM`对象
`document.getElementsByName(nVal)`	根据`name`属性查询多个`DOM`对象
`document.querySelector(selector)`	根据`css选择器`查询第一个匹配的对象
`document.querySelectorAll(selector)`	根据`css选择器`查询多个匹配的对象

② 查询其他标签

函数	描述
`domObj.getElementById()/querySelecto()..`	查询某个标签中包含的标签对象

`domObj.parentElement`	获取父标签对象
`domObj.parentNode`	获取父节点对象

`domObj.children`	获取子标签对象
`domObj.childNodes`	获取子节点对象(包含文本节点)

`domObj.previousElementSibling`	获取上一个兄弟标签节点
`domObj.previousSibling`	获取上一个节点(包含文本节点)
`domObj.nextElementSibling`	获取下一个兄弟标签节点
`domObj.nextSibling`	获取下一个节点（包含文本节点）

`document.forms`	查询网页中的所有表单

（3）标签对象操作
DOM操作中我们已经可以查询对应的节点：需要对节点进行增加、修改和删除的操作

函数	描述
`document.createElement()`	创建标签节点
`document.createTextElement()`	创建文本节点
`document.appendChild()`	末尾追加一个子节点
`document.insertBefore()`	指定标签前面增加一个节点
`document.removeElement()`	删除一个指定节点
`document.replaceElement()`	替换/修改一个指定节点

（4）标签属性操作

函数	描述
`obj.id = val`	设置`id`属性
`obj.className = val`	设置`class`属性
`obj.setAttribute(属性名称, 变量值)`	给标签对象设置`属性名称="属性值"`的属性
`obj.getAttribute(属性名称)`	获取标签对象的`属性名称`对应的属性值
`obj.removeAttribute(属性名称)`	删除标签上`属性名称`对应的属性

（5）标签样式操作
行内样式：设置和获取

代码	描述
`obj.style.样式名称`	获取指定标签的行内样式
`obj.style.样式名称 = 值`	给指定标签设置/添加行内样式

外联样式：非行内样式，一般操作过程中主要用于获取操作，代码中设置样式推荐/指定使用行内样式

代码	适用浏览器	描述
`obj.currentStyle.样式名称`	`IE`	获取样式
`getComputedStyle(obj).样式名称`	非`IE`	获取样式

当前标签对象的特殊属性

属性	描述
`obj.offsetHeight`	高度
`obj.offsetWidth`	宽度
`obj.offsetLeft`	离窗口左侧的距离
`obj.offsetTop`	离窗口顶部的距

（6）标签内容操作

代码	描述
`obj.innerText`	获取或者设置文本内容
`obj.innerHTML`	获取或者设置标签文本内容
`obj.textContent`	获取或者设置文本内容，等价`innerText`
`obj.createTextNode()`	创建文本节点，标准`DOM`操作，一般不推荐使用

JavaScript BOM/DOM

猜你喜欢

热点阅读