BOM浏览器对象模型、DOM文档对象模型

其他 2021-11-22 02:47:09 阅读次数: 0

BOM浏览器对象模型、DOM文档对象模型

一、BOM浏览器对象模型

BOM —— Browser Object Model 浏览器对象模型
BOM 的顶级对象时 winodw (是一个对象，当你打开一个页面的时候就有一个 window )
你在群居定义的所有变量都在 window 下。

1.浏览器的窗口尺寸

指的是 浏览器 可视窗口的尺寸。
浏览器有可能会出现滚动条
       在一般浏览器，滚动条算浏览器的一部分
       在 MAC 上，是不算的。
innerHeight 和 innerWidth 属性包含滚动条的尺寸

1.1 获取浏览器的高度

innerHeight

console.log(window.innerHeight)
//window 可省略不写
//console.log(innerHeight)

1.2 获取浏览器的宽度

innerWidth

console.log(window.innerWidth)
//window 可省略不写
// console.log(innerWidth)

2.浏览器的弹出层

在 BOM 里面，给我们提供了三个弹出层
三者的共同点：
会阻断程序的继续执行
    因为 JS 是单线程
    如果用户没有点击按钮表示当前弹出层没有结束
直到用户操作以后，才会继续向下执行代码

2-1 alert() 警告框

弹出一段提示文本
只有一个确定按钮
语法： window.alert(‘提示文本’)
返回值： undefined

var res = windoe.alert('画上佳人纱')
console.log(res)

在这里插入图片描述

2-2 confirm() 选择框

弹出一段提示文本
有确定和取消两个按钮
语法： window.confirm(‘提示文本’)
返回值： 布尔值
               当用户点击确定的时候，时 true
               当用户点击取消的时候，就是 false

var res = windwo.confirm('画上佳人纱')
console.log('res')

在这里插入图片描述

2-3 prompt() 输入框

弹出一个提示文本
有一个 input 输入框
有确定和取消按钮
语法： window.prompt(‘提示文本’)
返回值：
               如果用户点击确定，那么就是文本框里面的内容
               如果用户点击取消，那么就是 null

var res = window.prompt('画上佳人纱')
console.log(res)

在这里插入图片描述

3.浏览器的地址栏

3-1 地址栏包含哪些内容

http://www.baidu.com?a=100&b=200#abc
传输协议: http
作用： 前后端交互的方式
域名: www.baidu.com
作用： 找到一台服务器电脑
查询字符串: ?a=100&b=200
不影响你打开这个页面
作用： 打开这个页面的时候携带的信息
哈希(hash): #abc
作用： 锚点定位

3-2 location对象

window 下有一个成员叫做 location 。
location 是一个对象，里面存储着和网页地址栏内容相关的信息。

（1）hash

哈希值
作用： 锚点定位

（2） href

地址栏信息
读： 获取当前地址栏地址
写： 修改当前地址栏地址（跳转页面）

（3） search

查询字符串
作用： 来到该页面的时候携带的一些信息

3-3 reload()方法

语法： window.location.reload()
作用： 重新加载当前页面
相当于按下了浏览器左上角的刷新按钮
注意： 不能写在打开页面就能执行的地方

4.浏览器的历史记录

操作浏览器的前进后退
window 下有一个叫做 history 的成员，是一个对象，里面包含了一些操作历史记录的属性和方法。

4-1 back()

语法： window.history.back()
作用： 回退到上一条历史记录。
前提： 你需要有历史记录，不然没得回退。

4-2 forward()

语法： window.history.forward()
作用： 前进到下一条历史记录。
前提： 你需要回退过以后才可以操作。

4-3 go()

语法： window.history.go(整数)
正整数： 表示前进
0 ： 表示刷新当前页面
负整数： 表示后退

5.浏览器的版本信息

window 下有一个叫做 navigator 的成员，是一个对象，里面存储这浏览器的版本信息。

5-1 userAgent

表示浏览器的版本信息及型号信息

console.log(window.navigator.userAgent)

5-2 appName

所有浏览器都是统一的名字 netscape
IE 高版本浏览器也是 netscape
IE 低版本不是

console.log(window.navigator.appName)

5-3 platform

表示浏览器所在的操作系统

console.log(window.navigator.platform)

6.浏览器的常见事件

6-1 window.onload = function () {}

页面所有资源加载完毕后执行
作用： JS 前置
当你需要把 JS 代码写在 head 标签里面的时候，最好在后面加上一个 window.onload

 	window.onload = function () {
    
    
       console.log('资源加载完毕')
     }

6-2 window.onscroll = function () {}

浏览器滚动条滚动的时候触发
不管横向还是纵向，只要滚动就触发
作用：

  1. 楼层导航
  2. 顶部通知栏和回到顶部按钮的提示
  3. 渐近显示页面
  4. 瀑布流
	window.onscroll = function () {
    
    
       console.log('滚动条再滚动')
     }

6-3 window.onresize = function () {}

浏览器可视窗口改变的时候触发
只要改变就会触发
一般结合 innerWidth 和 innerHeight 来判断屏幕尺寸
移动端： 横屏
响应式布局： 判断窗口大小

	window.onresize = function () {
    
    
      console.log('浏览器可视窗口改变大小了')
    }

7.浏览器卷去的高度和宽度

当页面比窗口宽或者高的时候，会有一部分是随着滚动被隐藏的
我们管 上面隐藏的叫做 卷去的高度
我们管 左边隐藏的叫做 卷去的宽度

7-1 获取卷去的高度

（1）document.documentElement.scrollTop

使用必须要有 DOCTYPE 标签

window.onscroll = function () {
    
    
      console.log('html', document.documentElement.scrollTop)
    }

滚动滚动条的时候，页面的高度被隐藏起来了，打印出来的就是隐藏的高度
在这里插入图片描述

（2）document.body.scrollTop

使用必须没有 DOCTYPE 标签

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

在这里插入图片描述

（3）兼容写法

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

=> || 当作短路表达式使用的  或
    -> 当前面为 true 的时候, 那么就直接返回前面的值
    -> 当前面为 false 的时候, 那么就返回后面的值, 不管后面是不是 false

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

在这里插入图片描述

7-2 获取卷去的宽度

（1）document.documentElement.scrollLeft

使用必须要有 DOCTYPE 标签

window.onscroll = function () {
    
    
	console.log('有 ', document.documentElement.scrollLeft)
}

在这里插入图片描述

（2）document.body.scrollLeft

使用必须没有 DOCTYPE 标签

window.onscroll = function () {
    
    
	console.log('没有 ', document.body.scrollLeft)
}

在这里插入图片描述

（3）兼容写法

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

=> || 当作短路表达式使用的  或
    -> 当前面为 true 的时候, 那么就直接返回前面的值
    -> 当前面为 false 的时候, 那么就返回后面的值, 不管后面是不是 false

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

在这里插入图片描述

8. 短路表达式

8-1 或（ || ）

作用： 可以用 || 运算符分割两个表达式，如果前面的表达式的结果为 true ，那么后面的就不执行； 只有前面为 false 的时候，才会去执行后面的表达式。

当你使用 || 短路表达式赋值的时候：
         前面表达式是 true 的时候，那么就得到前面表达式的结果；
         前面表达式是 false 的时候，那么就得到后面表达式的结果（不管后面表达式的结果是 true ，还是 false）

8-2 且 ( && )

作用： 可以用 && 运算符分割两个表达式，如果前面的表达式的结果为 true ，那么后面的才会执行（如果前面表达式的结果为 false 的时候，后面的表达式就不执行了）。

当你使用 && 短路表达式赋值的时候：
         前面表达式是 true 的时候，那么直接运算后面表达式的结果赋值；
         前面表达式是 false 的时候，那么直接把前面的结果返回。

二、DOM文档对象模型

DOM —— Document Object Model 文档对象模型
DOM 是一个以树状结构存在的内容
在这里插入图片描述

DOM 的顶级是 document 表示当前文档
因为我们 PC 端的文档是插入到浏览器里面运行的，所以在 PC 端，document 上面还有一个window
注意： window 下面有一个 document

1.获取DOM元素

通过 JS 获取到页面中的元素

1-1 非常规标签

（1）html

语法： document.documentElement

	var html = document.documentElement
    console.log(html)

在这里插入图片描述

（2）head

语法： document.head

	var head = document.head
    console.log(head)

在这里插入图片描述

（3）body

语法： document.body

	var body = document.body
    console.log(body)

在这里插入图片描述

1-2 常规标签

下面例子 body 标签里面的代码

<body>

  <li>1</li>
  <li class="active">2</li>
  <li class="active" id="abc">3</li>
  <li class="active aaa">4</li>

  <button id="btn">按钮</button>

  <p id="a">外面</p>

  <div id="box">
    <p id="a">里面</p>
  </div>

  <ul>
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
    <li class="box">5</li>
    <li class="box">6</li>
    <li class="box">7</li>
    <li class="box">8</li>
    <li class="box">9</li>
    <li class="box">10</li>
  </ul>

  <input type="text" name="username">
  <input type="text" name="username">
  <div name="username">123</div>

</body>

（1）getElementById()

语法： 查找范围.getElementById(‘id名称’)
查找范围： document 或者一个 元素
返回值：
             如果有这个 id 匹配的元素，就是这个元素
             如果没有这个 id 匹配的元素，就是 null

	var btn = document.getElementById('btn')
    console.log(btn)

在这里插入图片描述

（2）getElementsByTagName()

语法： 查找范围.getElementsByTagName(‘标签名’)
返回值： 是一个 伪数组 （数组常用方法用不了）
             如果有这个标签名匹配的元素，有多少获取多少
             如果没有这个标签匹配的元素，返回一个空的伪数组

    var box = document.getElementsByTagName('p')
    console.log(box)
    // 你想准确的拿到某一个元素, 要么遍历, 要么使用 [索引]
	// var div = document.getElementsByTagName('div')[0]
	//console.log(div)
	// 在 div 范围下通过标签名查找多个叫做 p 的元素
	// var p2 = div.getElementsByTagName('p')
	//console.log(p2)

在这里插入图片描述

（3）getElementsByClassName()

语法： 查找范围.getElementsByClassName(‘类名’)
返回值： 是一个 伪数组
             如果有这个类名匹配的元素，有多少获取多少
             如果没有这个类名匹配的元素，返回一个空的伪数组

    var box = document.getElementsByClassName('box')
    console.log(box)

在这里插入图片描述

（4）getElementsByName()

语法： 查找范围.getElementsByName(‘元素name属性的值’)
返回值： 是一个 伪数组
             如果有元素的 name 属性的值匹配，有多少获取多少
             如果没有元素的 name 属性的值匹配，那么就是空的为数组

    var inp = document.getElementsByName('username')
    console.log(inp)

在这里插入图片描述

（5）querySelector()

语法： 查找范围.querySelector(‘选择器’)
选择器： 能在 CSS 里面写的选择器，这里都可以写
返回值：
             如果找到选择器匹配的元素，返回第一个找到的内容
             如果没有选择器匹配的元素，返回 null
特点： IE 低版本不支持

    var box = document.querySelector('ul > li:nth-child(2)')
    console.log(box)

在这里插入图片描述

（6）querySelectorAll()

语法： 查找范围.querySelectorAll(‘选择器’)
选择器： 能在 CSS 里面写的选择器，这里都可以写
返回值：
             如果找到选择器匹配的元素，有多少获取多少
             如果没有选择器匹配的元素，返回一个空的伪数组
特点： IE 低版本不支持

    var box = document.querySelectorAll('ul > li:nth-child(odd)')
    console.log(box)

在这里插入图片描述

2.操作元素属性

元素的属性
id / class / style / src / type / name / href / border / … ——叫做原生属性
style 是属性名, 这个属性的作用就是给元素设置内联样式
index / abc / aaa / … ——自定义属性
不是标签原生自带的属性, 是我们自己随便书写的一个属性
data-xxx 开头的属性——我们都叫做 H5 自定义属性

2-1 原生属性

原生属性 是一个 读写属性
语法： 元素.属性名
读： 元素.属性名——获取元素该属性的值
写： 元素.属性名 = ‘值’——设置该元素的该属性的值
注意： class 除外，操作 类名 使用 元素.className

<body>
  <div data-a="100" abc="123"></div>
  <input type="text">
  <img src="" alt=""
</body>

    var div = document.querySelector('div')
    var inp = document.querySelector('input')
    // 给 div 设置一个 id 属性
    div.id = 'box'
    // 读取 div 身上的 id 属性
    console.log(div.id)
    console.log(div)
    // 给 input 设置一下 type 属性
    inp.type = 'password'

给 div 设置一个 id 属性
在这里插入图片描述
读取 div 身上的 id 属性
在这里插入图片描述
给 input 设置一下 type 属性
在这里插入图片描述

2-2 自定义属性

不能直接点语法操作

（1）setAttribute(‘属性名’, ‘属性值’)

给元素标签上设置属性

    var div = document.querySelector('div')
    var inp = document.querySelector('input')
    // 设置自定义属性
    div.setAttribute('index', 100)
    div.setAttribute('id', 'box')

设置自定义属性
在这里插入图片描述

（2）getAttribute(‘属性名’)

获取元素上的属性的值

    // 获取自定义属性
    var str = div.getAttribute('index')
    console.log(str)

在这里插入图片描述

（3）removeAttribute(‘属性名’)

删除元素上的属性

    // 删除自定义属性
    div.removeAttribute('abc')

在这里插入图片描述

（4）三种方法的特点

可以操作自定义属性，也可以操作原生属性；
不管你设置什么数据类型，当你再次从标签上拿到的时候，都是字符串。

2-3 H5 自定义属性

每一个元素身上有一个属性叫做 dataset
里面包含了所有 H5 自定义属性
    key 是除了 data- 以外的内容
    value 就是这个属性的值

操作 H5 的自定义属性

直接在 dataset 里面进行操作就可以
获取： 元素.dataset.名字
    名字： 标签上写 data-a， 使用 a
设置： 元素.dataset.名字 = ‘值’
    名字： 如果你在这里写 a ，那么映射在标签上就是 data-a

    // 获取元素标签上的 data-a 属性
    var str = div.dataset.a
    console.log(str)

在这里插入图片描述

    // 设置元素标签上的 data-hello 属性, 设置值为 world
    div.dataset.hello = 'world'

在这里插入图片描述

    // 删除元素标签上的 data-hello 属性
    // 直接删除 dataset 对象中的 hello 成员
    delete div.dataset.hello

在这里插入图片描述

3.操作元素类名

3-1 按照原生属操作

设置类名： 元素.className = ‘你想设置的类名’

修改类名： 元素.className = ‘新值’

追加类名： 元素.className = 元素.className + ‘新类名’
注意： 新类名前面要有一个 空格

删除类名： 获取类名

  • 截取字符串
  • 按照空格切开，循环遍历，找到一个你想删除的删除掉
  • 再写一遍
<style>
    div {
    
    
      width: 100%;
      height: 50px;
      /* background-color: skyblue; */
      /* display: none; */
      position: absolute;
      top: -50px;
      left: 0;
      background-color: skyblue;
      transition: top .5s linear;
    }

    div.box {
    
    
      /* background-color: pink; */
      /* display: block; */
      top: 0;
    }

    button {
    
    
      margin-top: 100px;
    }
  </style>

<body>
  <button>按钮</button
  <div class="a b c d e f g h i j">我是 div 标签</div>
</body>

    // 0. 获取元素
    var div = document.querySelector('div')
    // 1. 原生属性方式操作类名
    // 1-1. 设置类名
    div.className = 'box'

    // 1-2. 修改类名
    div.className = 'box2'

    // 1-3. 追加类名
    div.className += ' abc'

在这里插入图片描述

3-2 H5 标准提供的 API

元素身上有一个叫做 classList 的属性，里面包含了所有元素身上设置的类名。这个 classList 提供了一系列方法来操作

（1） add()

语法： 元素.classList.add(‘你要添加的类名’)

（2） remove()

语法： 元素.classList.remove(‘你要移除的类名’)

（3） toggle()

语法： 元素.classList.toggle(‘你要切换的类名’)
            当元素有这个类名的时候， 就是删除
            当元素没有这个类名的时候， 就是添加

	// 获取元素
    var div = document.querySelector('div')
	// 添加类名
    div.classList.add('box')
    
    //删除类名
    div.classList.remove('h')
    
    // 求换类名
    var btn = document.querySelector('button')
    btn.onclick = function () {
    
    
    	// 执行这句代码的时候, 如果 div 没有 box 类名, 就添加
		// 执行这句代码的时候, 如果 div 有 box 类名, 就删除
     	div.classList.toggle('box')
    }

在这里插入图片描述

4.操作元素文本内容

4-1 innerHTML

读写属性
读： 获取元素内部的所有内容
        文本 + 标签 全部内容
        语法： 元素.innerHTML
        以字符串的形式返回
写： 设置元素内部的超文本内容
        语法： 元素.innerHTML = ‘你要设置的内容’
        当你的字符串里面出现 html 结构的时候，会自动解析

<body>
	<div>
		hello world
		<p>你好 世界</p>
		hello world
	</div>
</body>

    // 获取元素
    var div = document.querySelector('div')
    var inp = document.querySelector('input')
    // 获取元素的超文本内容
    var str = div.innerHTML
    console.log(str)
    console.log(typeof str)
    // 设置元素的超文本内容
    div.innerHTML = '<span>我是新来的内容</span>'

获取元素的超文本内容
在这里插入图片描述
设置元素的超文本内容（ 覆盖式的写入 ）
标签会自动解析
在这里插入图片描述

4-2 innerText

读写属性
操作元素的 文本内容
读： 获取元素内部的所有文本内容
        包括子元素所有后代元素里面的文本内容
        标签内容不获取（只获取文本内容）
        语法： 元素.innerText
写： 设置元素内部的文本内容
        完全覆盖式的写入
        语法： 元素.innerText = ‘你要设置的内容’
        当你的字符串里面出现 html 结构的时候，不会 自动解析

    // 获取元素
    var div = document.querySelector('div')
    var inp = document.querySelector('input')
    // 获取元素的文本内容
    var str = div.innerText
    console.log(str)
    // 设置元素的文本内容
    div.innerText = '<span>我是新来的内容</span>'

获取元素的文本内容
在这里插入图片描述
设置元素的文本内容 （ 覆盖式的写入 ）
标签不会自动解析 ，会当作文本的一部分
在这里插入图片描述

4-3 value

读写属性
操作表单元素的 value 属性
读： 获取表单元素的 value 属性
        语法： 元素.value
写： 设置表单元素的 value 属性
        语法： 元素value = ‘你要设置的内容’

    // 获取元素
    var div = document.querySelector('div')
    var inp = document.querySelector('input')
    // 设置元素的 value 值
    inp.value = '你好 世界'
    // 获取元素的 value 值
    var str = inp.value
    console.log(str)

设置元素的 value 值
在这里插入图片描述
获取元素的 value 值
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_48937489/article/details/121425928
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022