• 08-BOM&DOM概念

    文章目录

    一、BOM的概念和方法

    在这里插入图片描述

    1. js基础语法部分，是ECMAScript部分
    2. 基础语法只是规定代码怎么写，不能实现很多主流的操作，比如跳转页面，获取浏览器的尺寸等操作
      1. BOM操作浏览器，DOM操作HTML标签
    1. BOM的概念
    • Browser Object Model 浏览器对象模型，提供了一套方法操作浏览器
    • BOM中最大的对象叫window，是浏览器窗口对象，包含了很多浏览器的操作

    在这里插入图片描述

    2. 浏览器窗口尺寸

    包含滚动条的大小

    1. window.innerWidth 浏览器窗口的宽度

    2. window.innerHeight 浏览器窗口的高度

    console.log(innerWidth,innerHeight)

    1. 浏览器对象的window都是可以省略的
    2. 获取到浏览器窗口的大小单位是像素，但单位是不显示的
    3. 浏览器窗口尺寸大小只能读取，不能修改

    不含滚动条的大小

    1. document.documentElement.clientWidth 浏览器窗口的宽度
    2. document.documentElement.clientHeight 浏览器窗口的高度

    console.log(document.documentElement.clientWidth,document.documentElement.clientHidth)

    3. 浏览器的地址栏信息

    window下面有个对象location可以查看浏览器的地址栏信息，记录了浏览器地址栏中的相关信息：

    console.log(window.location)

    location下面使用相对应方法：

    1. 打开当前页面会自动跳转到设置的新地址

      window.location.href = '跳转的地址'

      // 条件判断，满足即跳转
var age = Number(prompt("输入年龄"))
if(age>=18){
    //跳转页面
    location.href='test1.html'
}
else{
    alert("异常")
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    2. 参数可选，当前页面会一直处于加载状态中（不要写在全局中）

      window.location.reload(true)

    3. 查询地址中的携带参数

      window.location.search

      <body>
    <form action="">
        <p>name: <input type="text" name="name">p>
        <input type="submit">
    form>
body>
<script>
console.log(location.search)
script>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
    4. 浏览器历史记录

    history.back() 返回到上一个页面，相当于浏览器的后退按钮

    history.forward() 前进到下一个页面（下一个页面必须是点击以后的页面），相当于浏览器的前进按钮

    history.go(数值) 正负数都可以（前进和后退的页面数量）

    5. 浏览器版本信息

    浏览器的名称、版本等信息，关于浏览器的信息，window下面的对象navigator记录

    console.log(navigator.appCodeName)//返回浏览器的代码名
console.log(navigator.appName)//返回浏览器的名称
console.log(navigator.appVersion)//返回浏览器的平台和版本信息
console.log(navigator.cookieEnabled)//返回指明浏览器是否启用cookie的布尔值
console.log(navigator.platform)//返回浏览器的操作系统平台
console.log(navigator.userAgent)//返回由客户机发送服务器的user-agent头部的值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    6. 浏览器弹窗方法
    1. alert("警告弹窗")
    2. confirm("提示弹窗")
    3. prompt("输入弹窗")
    7. 浏览器事件

    1. onload 当页面中所有内容加载完成之后再去执行

      window.onload = function(){
    console.log("页面加载结束后出现")
}

      • 1
      • 2
      • 3

    2. onscroll 浏览器滚动条发生滚动的时候会触发事件

      var a = 1
window.onscroll = function(){
    console.log('a是'+ a++)
}

      • 1
      • 2
      • 3
      • 4

    3. onresize 浏览器窗口变化的时候触发事件

      var b = 1
window.onresize = function(){
    console.log('b是'+ b++)
}

      • 1
      • 2
      • 3
      • 4
    8. 浏览器滚动条方法

    1. window.scrollTo(x,y) 跳转到坐标位置

      function scrollWindow(){
    window.scrollTo(0,200);
}
scrollWindow()//可以给按钮进行绑定，点击跳转到相应的坐标位置

      • 1
      • 2
      • 3
      • 4

    2. document.documentElement.scrollTop 距离顶部的距离

    3. document.documentElement.scrollLeft 距离左侧的距离

      window.onscroll = function(){
    var _top = document.documentElement.scrollTop
    var _left = document.documentElement.scrollLeft
    console.log('距离顶部的间距是'+_top,'距离左侧的间距是'+_left)
}

      • 1
      • 2
      • 3
      • 4
      • 5

    4. 需要注意获取滚动条间距是否有兼容问题

      document.documentElement.scrollTop || document.body

      document.documentElement.scrollLeft || document.body.scrollLeft

    案例：电商页面的顶部悬浮和回到顶部

    9. 浏览器对象方法

    1. window.open() 打开

      function _open(){
    window.open("http:www.baidu.com")
}
_open() // 绑定给按钮执行

      • 1
      • 2
      • 3
      • 4

    2. window.close() 关闭

      function _open(){
    myWindow = window.open("http:www.baidu.com")
}
function _close(){
    myWindow.close();
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      <input type="button" value="打开窗口" onclick="_open()">
<input type="button" value="关闭窗口" onclick="_close()">

      • 1
      • 2

    二、DOM的概念和元素获取

    DOM：Document Object Model，文档对象模型。主要用于操作html文档。例如，改变标签的背景颜色，让标签移动产生动画。

    DOM元素的获取：通过一些方法获取到DOM结构，输出到控制台中就是当前标签，可以对当前标签做一些绑定事件

    1. 通过id名直接获取到元素（最简单但有问题，不建议使用）

    控制台输出出现[Object Object]表示当前数据格式有问题

    <div id="box">盒子div>
<script>console.log(box) //div结构script>

    • 1
    • 2
    2. 通过document获取节点
    <div class="box">1div>
<div id="box">2div>
<div name="box">3div>
<div>4div>
<div>5div>
<div>6div>
<div>7div>
<div>8div>
<div>9div>
<div>10div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    1. 根据标签中的id属性进行获取：document.getElementById('id的名字')

      var div1 = document.getElementById("box")
console.log(div1[0])

      • 1
      • 2

    2. 根据标签中的类名进行获取：document.getElementsByClassName('class的名字')

      var div2 = document.getElementsByClassName("box")
console.log(di2[0]) //获取到的是集合

      • 1
      • 2

    3. 根据标签名称进行获取：document.getElementsByTagName('标签名称')

      var div3 = document.getElementsByTagName("div")
console.log(div3[0]) //获取到的是集合

      • 1
      • 2

    4. 根据标签中的name属性进行获取：document.getElementsByName('name名字')

      var div4 = document.getElementsByName('box')
console.log(div4)

      • 1
      • 2

    只有id的是getElement，获取到的不是集合，其他的都是getElements。因为id唯一。

    3. 使用css选择器获取元素

    低版本浏览器中不可以使用这个方法

    获取到匹配css的第一个元素 document.querySelector('css选择器')

    document.querySelector('.box')
var _div = document.querySelector('div:nth-child(1)')
console.log(_div)
var _p = document.querySelector('p:nth-of-type(2)')
console.log(_p)

    • 1
    • 2
    • 3
    • 4
    • 5

    获取到匹配css的所有元素document.querySelectorAll('css选择器')

  • 相关阅读:
    HTML5期末大作业 HTML+CSS+JavaScript美食坊美食购物主题(15页)
    C语言指针面试题——第二弹
    从一个APP启动另一个APP的activity的方式
    web前端-javascript-运算符的优先级(如果遇到的优先级不清楚的,可以使用()来改变优先级)
    UEC++ 接口
    大文件分断上传后端
    Talend 用Jave 处理数据转换
    小白学流程引擎-FLowable(一) —FLowable是什么
    Redis4 缓存淘汰策略及事务实现乐观锁
    人机交互复习总结5
  • 原文地址：https://blog.csdn.net/qq_41570386/article/details/127699710