BOM和DOM

最新推荐文章于 2024-09-29 11:29:55 发布
最新推荐文章于 2024-09-29 11:29:55 发布
阅读量65 收藏
点赞数 3
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zero_twoSakura/article/details/129757058
版权

BOM和DOM

js的组成部分

前面学习的部分是ECMAScript部分，都是基础语法部分。基础语法只是规定的代码如何写，并不能实现很多主流的操作，比如跳转页面，获取浏览器的尺寸等操作。再比如让HTML中的元素动起来。

所以需要学习BOM来操作浏览器。学习DOM来操作HTML标签。
在这里插入图片描述

一、BOM

1、BOM介绍

BOM是三个单词的首拼–Browser Object Model，即浏览器对象模型。

所谓对象模型，指的是用对象来描述的一个结构。

BOM意思是通过对象组成的结构来操作浏览器的。

2、浏览器的历史记录

历史记录的操作是window的子对象history。可以操作网页的前进和后退。

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

3、浏览器的地址栏信息

浏览器的地址栏操作，window对象交给了自己的子对象location对象去处理。

console.log(location.hash); // 设置或返回从#开始的url --- 锚点
console.log(location.href); // 设置或返回完整的的url
console.log(location.search); // 设置或返回url中的参数部分

方法：

语法：
	location.assign("要跳转的地址"); # 这个方法是设置要跳转的地址
	location.reload(); # 重新加载本页面
	location.replace() # 使用新地址替换掉旧地址（跳转）

4、浏览器的弹出层

window.alert("恭喜你！");
window.prompt("请输入数字：",1);
window.confirm("你确定要删除吗？")

5、浏览器窗口尺寸

  • window.innerHeight - 浏览器窗口的高度
  • window.innerWidth - 浏览器窗口的宽度
var w = window.innerWidth;
console.log(w);
var h = window.innerHeight;
console.log(h);

说明：

  1. 这两个属性返回的单位是像素
  2. 这两个属性计算的范围包含滚动条的区域

6、浏览器的事件

onload事件：当网页中的所有资源都加在完成之后执行这个事件

window.onload = function(){
	console.log("当网页中所有资源加载完成才打印");
}

使用说明：通常是将script标签放到head标签中的时候使用。因为放在head中默认是获取不到body中的内容的，但是有了这个事件后，就可以了。

onscroll 滚动事件：当网页滚动条的位置发生改变的时候触发这个事件

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

使用说明：浏览器要有滚动条才行。

浏览器窗口改变事件：resize

window.onresize = function(){
    // 当浏览器的窗口大小发生改变的时候触发这个事件
}

7、定时器

延迟执行：

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

使用说明：第一个参数是要执行的函数，第二个参数延迟的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

每间隔一段时间执行：

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

使用说明：第一个参数是要执行的函数，第二个参数是间隔的时间（单位毫秒）。返回一个数字，表示当前页面中第几个定时器。

关闭定时器：

定时器返回的数字，就是用来关闭定时器的

clearTimeout(timerId); // 关闭延迟执行的定时器
clearInterval(timerId); // 关闭间隔执行的定时器

使用说明：其实这两个方法可以混用。

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
// 关闭延迟执行定时器
clearInterval(timerId)

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

8、异步操作

异步和同步的概念

张三叫李四一起去吃饭，张三说他还有作业没做完，让李四先去，李四去吃饭，张三在写作业，这两个人做的事情不一样，但是在同一时间段内，两个人的事情在同时做，这就是异步。

张三叫李四一起去吃饭，张三说他还有作业没做完，让李四等一下，李四就等张三做完作业后两个人才一起去吃饭。这就是同步。

同步意思是同一时间只能做一件事情，多件事情需要排队按照顺序执行。异步就是同一时间可以做多件事情。

我们平常写的代码都是同步代码，定时器我们接触到的第一个异步代码。

js的特点是单线程的，也就是同一时间只能做一件事情，所以js会将异步代码交给浏览器去处理，因为浏览器是多线程的。

js的线程，会先将所有同步代码执行完，与此同时，浏览器也在处理异步代码(例如正在等待时间)，当浏览器中的异步代码到了应该执行的时候了，会将需要执行的异步代码放在一个队列中，进行排队等候；当js线程将所有同步代码执行结束后，会从队列中拿出第一个需要执行的代码去执行，执行过一个以后，再次到队列中拿出第二个需要执行的代码去执行。。。。

js的异步操作，是在所有同步代码执行完成以后才执行异步代码

一般情况代码是按顺序执行的，上一行代码执行结束之前，下一行代码一直在等待，这是同步机制

异步代码是等待同步代码都执行完成以后，才运行异步代码。

9、窗口控制

9.1、打开新的窗口

语法：

window.open(url, 窗口名称, 窗口风格)

参数说明：

如果url为空，会打开一个空的标签页；url不为空，就打开目标url页面
窗口名称是一个字符串
窗口风格：
	height：窗口高度，数字，不能小于100
	width：窗口高度，数字，不能小于100
	left：窗口左边距离，数字
	top：窗口上边距离，数字

返回新窗口的window

9.2、关闭窗口

语法：

window.close()
9.3、设置窗口滚动

语法：

window.scrollTo(x, y)

设置卷去的距离。

二、DOM

1、DOM介绍

DOM的全拼是：Document Object Model，叫做文档对象模型。

就是使用对象结构操作html文档。例如，改变标签的背景颜色，让标签移动产生动画。。。。

DOM中的顶级对象是document，言外之意，DOM其实是属于BOM的。

例如：

window.document.write();
window.document.bgColor="red";

2、html基本结构的操作：

  1. document.body :body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
  2. document.documentElement : 可以获取html元素及其所有内容
  3. document.head : 可以直接获取head元素
  4. document.title : 可以直接获取title的文本

3、获取元素

在js中，标签的id名，可以当做是变量，直接就能代表这个标签元素，但是，id名可以随便定义，但是变量名不能随便定义，所以使用id名代表标签是有风险的。所以需要通过方法来获取到标签元素，自己定义给变量，可以避免这种风险。

通过document获取节点

document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
// 上述4种获取标签的方法，除了通过id可以准确获取到元素，别的方法都是只能获取到元素的集合（类数组）

使用css选择器获取元素：

documen.querySelector(css选择器); // 获取到匹配css的第一个元素
documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素

4、内容操作

语法：
	元素.innerHTML # 代表元素中的所有内容（包含标签）
	元素.innerText # 代表元素中的文本内容
	表单元素.value
	# 单标签操作内容其实就是在操作元素的属性

例：

<body>
<div id="box" introduce="区域"><p>我是盒子</p></div>
</body>
<script type="text/javascript">
	document.getElementById("box").innerText = "今天你要嫁给我";
	var text = document.getElementById("box").innerText;
	document.write(text);
	document.getElementById("box").innerHTML = "<a href='http://www.baidu.com'>百度</a>";
	var content = document.getElementById("box").innerHTML;
	console.log(content);

5、样式操作

5.1、设置样式

语法：

元素.style.css属性名 = css属性值; # 给标签设置样式

例：

<body>
<style type="text/css">
	#box{
		width:100px;
		height:100px;
		background:#f00;
	}
</style>
	<input type="button" id="btn" value="走你">
	<div id="box"></div>
</body>
<script type="text/javascript">
	var n = 0;
	document.getElementById("btn").onclick=function(){
		n += 100;
		document.getElementById("box").style.marginLeft = n + "px";
	}
</script>

这样设置的样式都是行内样式。

5.2、获取样式

语法：

window.getComputedStyle(标签)

返回所有样式键值对组成的对象。

6、元素类名

使用元素的className属性可以设置元素的类名，也可以获取类名

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

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

classList类名操作：

添加类名，语法：类名列表.add(类名)

例：

<style>
.box{
    width: 100px;
    height: 100px;
    background-color: #f00;
}
.green{
    background-color:#0f0;
}
.border{
    border:10px solid #00f;
}
</style>
<body>
<button>按钮</button>
<div class="box green"></div>
</body>
<script type="text/javascript">
// 获取标签元素
var box = document.querySelector(".box");
// 获取标签类名列表
var list = box.classList;
console.log(list);
// 获取按钮
var btn = document.querySelector("button");
// 给按钮绑定单击事件
btn.onclick = function(){
    // 给类名列表中添加一个类名
    list.add('border')
}
</script>

删除类名，语法：类名列表.remove(类名)

btn.onclick = function(){

    // 将green从类名列表中删除
    list.remove('green')
    console.log(box.classList)
}

让类名在删除和添加之间切换，语法：类名列表.toggle(类名)

例：

btn.onclick = function(){

    // 让green类名在删除和点击之间切换
    list.toggle('green')
}

判断类名列表中是否包含指定类名：类名列表.contains(类名)

例：

console.log(list.contains('green'))

7、属性操作

7.1、标签属性
元素.setAttribute(属性名,属性值) # 设置元素的属性
元素.getAttribute(属性名); # 获取元素属性
元素.removeAttribute(属性名); # 删除元素属性
7.2、对象属性
元素.属性名 = 值;
console.log(元素.属性名);

例：

btn.onclick=function(){
    img.src = '2.jpg';
}
7.3、H5的自定义属性操作

当给标签添加属性以data-XXX开头时，H5提供了一个快速操作属性的api：

标签.dataset.XXX // 获取属性的值

8、页面卷去的距离

语法：

document.documentElement.scrollTop

上面这个语法当html没有文档声明的时候，是获取不到的，彼时，需要用到另外一个语法来获取：

document.body.scollTop

兼容写法 - 不管什么情况下都能获取到：

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

9、短路运算

利用逻辑运算中的&&和||让赋值操作变得更灵活，并带有选择性。

var 变量 = 数据1 && 数据2

当数据1为true，不能决定整个条件的结果，还需要进行到数据2，所以此时会将数据2赋值给变量。

当数据1为false，就已经知道整个条件的结果了，就没有必要进行到数据2了，所以此时会将数据1赋值给变量

var 变量 = 数据1 || 数据2

当数据1为true，就已经能决定整个条件的结果了，就没有必要进行数据2了，此时就将数据1赋值给变量

当数1为false，还不能决定整个条件的结果，需要进行到数据2，此时就会将数据2赋值给变量

案例：

  1. 随机点名
  2. 实时显示当前时间
  3. 全选全不选案例

10、节点操作

DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点。

DOM节点分三种：元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素；标签里面的文本就是文本节点、标签上的属性就是属性节点。

10.1、获取节点

获取所有子标签节点：

父.children

获取到的是一个所有子标签组成的伪数组

获取第一个子标签节点：

父.firstElementChild

获取最后一个子标签节点：

父.lastElementChild

获取父标签节点：

子.parentElement

获取上一个兄弟标签节点：

标签.previouseElementSibling

获取上一个兄弟标签节点：

标签.nextElemenetSibling
10.2、创建标签
document.createElement('标签名字符串')

返回创建好的标签

10.3、插入节点

给父标签追加子标签：

父.appendChild(子标签对象)

将新的子标签插入到某个旧的子标签前面：

父.insertBefore(新的子标签, 旧的子标签)
10.4、替换节点

使用新的子标签替换掉旧的子标签：

父.removeChild(新的子标签, 旧的子标签)
10.5、删除节点

父标签将指定的子标签删除：

父.removeChild(子标签)
10.6、克隆节点

将一个标签复制一份出来：

标签.cloneNode()

返回一个标签对象，这样只能复制一个空的标签，没有内容。

标签.cloneNode(true)

返回一个标签对象，这样可以将标签中的内容也复制出来。

11、获取标签尺寸

包含标签边框的尺寸：

标签.offsetWidth
标签.offsetHeight

不包含边框的尺寸：

标签.clientWidth
标签.clientHeight

返回纯数字。

12、获取元素位置

标签.offsetLeft
标签.offsetTop

获取的是相对于设置过定位的父标签的左边距和上边距离，返回纯数字。

13、获取边框大小

标签.clientTop
标签.clientLeft

获取到的是上边框和左边框的厚度，纯数字。

三、回流和重绘

我们在做案例的时候，通常一个标签要设置很多样式。为了方便我们批量设置样式，可以封装一个批量设置样式的函数：

function setStyle(ele, styleObj) {
    for(var key in styleObj) {
        ele.style[key] = styleObj[key]
    }
}

这个函数在批量设置样式的时候，每遍历一次，设置一次样式，每次设置样式都设置在了行内，这样会造成多次回流，影响页面性能。

1、浏览器渲染过程

浏览器在渲染页面的时候，大致是以下几个步骤：

  1. 解析html生成DOM树，解析css，生成CSSOM树，将DOM树和CSSOM树结合，生成渲染树；
  2. 根据渲染树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系 - 回流
  3. 根据渲染树以及回流得到的节点信息，计算出每个节点在屏幕中的位置 - 重绘
  4. 最后将得到的节点位置信息交给浏览器的图形处理程序，让浏览器中显示页面

2、回流

回流：英文叫reflow，指的是当渲染树中的节点信息发生了大小、边距等问题，需要重新计算各节点和css具体的大小和位置。

例：在css中对一个div修饰的样式中，修饰了宽度、高度等样式，浏览器需要重新计算标签大小，这个计算的过程，就是回流的过程。

容易造成回流的操作：

  • 布局流相关操作

    • 盒模型的相关操作会触发重新布局
    • 定位相关操作会触发重新布局
    • 浮动相关操作会触发重新布局

  • 节点操作

    改变节点的结构或其中的文本结构会触发重新布局。

    对标签进行下面这些属性或方法操作的时候，会强行回流：

    • offsetTop
    • offsetLeft
    • offsetWidth
    • offsetHeight
    • scrollTop
    • scrollLeft
    • scrollWidth
    • scrollHeight
    • clientTop
    • clientLeft
    • clientWidth
    • clientHeight
    • getComputedStyle

  • css

    • width
    • height
    • padding
    • border
    • margin
    • position
    • top
    • left
    • bottom
    • right
    • float
    • clear
    • text-align
    • vertical-align
    • line-height
    • font-weight
    • font-size
    • font-family
    • overflow
    • white-space

3、重绘

重绘：英文叫repaint，当节点的部分属性发生变化，但不影响布局，只需要重新计算节点在屏幕中的绝对位置并渲染的过程，就叫重绘。比如：改变元素的背景颜色、字体颜色等操作会造成重绘。

回流的过程在重绘的过程前面，所以回流一定会重绘，但重绘不一定会引起回流。

容易造成重绘操作的css：

  • color
  • border-style
  • border-radius
  • text-decoration
  • box-shadow
  • outline
  • background

4、优化

不管是回流还是重绘，都会对浏览器的渲染造成影响，所以我们在项目中，尽量避免回流。

4.1、合并样式修改

减少造成回流的次数，如果要给一个节点操作多个css属性，而每一个都会造成回流的话，尽量将多次操作合并成一个，例：

var oDiv = document.querySelector('.box');
oDiv.style.padding = '5px';
oDiv.style.border = '1px solid #000';
oDiv.style.margin = '5px';

操作div的3个css属性，分别是padding、border、margin，此时就可以考虑将多次操作合并为一次。

方法1：使用style的cssText

oDiv.style.cssText = 'padding:5px; border:1px solid #000; margin:5px;';

方法二：将这几个样式定义给一个类名，然后给标签添加类名：

<style>
    .pbm{
        padding:5px; 
        border:1px solid #000; 
        margin:5px;
    }
</style>
<script>
    var oDiv = document.querySelector('.box');
    oDiv.classList.add('pbm');
</script>
4.2、批量操作DOM

当对DOM有多次操作的时候，需要使用一些特殊处理减少触发回流，其实就是对DOM的多次操作，在脱离标准流后，对元素进行的多次操作，不会触发回流，等操作完成后，再将元素放回标准流。

例：

var data = [
    {
        id:1,
        name:"商品1",
    },
    {
        id:2,
        name:"商品1",
    },
    {
        id:3,
        name:"商品1",
    },
    {
        id:4,
        name:"商品1",
    },
    // 假设后面还有很多
];
var oUl = document.querySelector("ul");
for(var i=0;i<data.length;i++){
    var oLi = document.createElement("li");
    oLi.innerText = data[i].name;
    oUl.appendChild(oLi);
}

这样每次给ul中新增一个li的操作，每次都会触发回流。

方法1：方法一：隐藏ul后，给ul添加节点，添加完成后再将ul显示

oUl.style.display = 'none';
for(var i=0;i<data.length;i++){
    var oLi = document.createElement("li");
    oLi.innerText = data[i].name;
    oUl.appendChild(oLi);
}
oUl.style.display = 'block';

此时，在隐藏ul和显示ul的时候，触发了两次回流，给ul添加每个li的时候没有触发回流。

方法二：创建文档碎片，将所有li先放在文档碎片中，等都放进去以后，再将文档碎片放在ul中

var fragment = document.createDocumentFragment();
for(var i=0;i<data.length;i++){
    var oLi = document.createElement("li");
    oLi.innerText = data[i].name;
    fragment.appendChild(oLi);
}
oUl.appendChild(fragment);

文档碎片就是一个虚拟的DOM节点。对文档碎片操作不会造成回流。

方法三：将ul拷贝一份，将所有li放在拷贝中，等都放进去以后，使用拷贝替换掉ul

var newUL = oUl.cloneNode(true);
for(var i=0;i<data.length;i++){
    var oLi = document.createElement("li");
    oLi.innerText = data[i].name;
    newUL.appendChild(oLi);
}
oUl.parentElement.replaceChild(newUl, oUl);
4.3、避免多次触发布局

如下回到顶部的操作：

goBack.onclick = function(){
    setInterval(function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        t += 10;
        document.documentElement.scrollTop = document.body.scrollTop = t;
    },20)
}

每隔20毫秒都会重新获取滚动过的距离，每次都会触发回流，代码优化如下：

goBack.onclick = function(){
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    setInterval(function(){
        t += 10;
        document.documentElement.scrollTop = document.body.scrollTop = t;
    },20)
}

只获取一次，每次都让数字递增，避免每次都获取滚动过的距离。

对于页面中比较复杂的动画，尽量将元素设置为绝对定位，操作元素的定位属性，这样只有这一个元素会回流，如果不是定位的话，容易引起其父元素以及子元素的回流。

4.4、修改批量设置样式函数
function setStyle(ele, styleObj) {
    var cssText = ''
    for(var key in styleObj) {
        var cssProp = key
        for(var a = 0; a < cssProp.length; a++) {
            var charCode = cssProp.charCodeAt(a)
            if(charCode >= 65 && charCode <= 90) {
                cssProp = cssProp.slice(0, a) + '-' + cssProp[a].toLowerCase() + cssProp.slice(a+1)
            }
        }
        cssText += cssProp + ':' + styleObj[key] + ';'
    }
    ele.style.cssText = cssText
}

``

每隔20毫秒都会重新获取滚动过的距离，每次都会触发回流，代码优化如下：

goBack.onclick = function(){
    var t = document.documentElement.scrollTop || document.body.scrollTop;
    setInterval(function(){
        t += 10;
        document.documentElement.scrollTop = document.body.scrollTop = t;
    },20)
}

只获取一次，每次都让数字递增，避免每次都获取滚动过的距离。

对于页面中比较复杂的动画，尽量将元素设置为绝对定位，操作元素的定位属性，这样只有这一个元素会回流，如果不是定位的话，容易引起其父元素以及子元素的回流。

4.4、修改批量设置样式函数
function setStyle(ele, styleObj) {
    var cssText = ''
    for(var key in styleObj) {
        var cssProp = key
        for(var a = 0; a < cssProp.length; a++) {
            var charCode = cssProp.charCodeAt(a)
            if(charCode >= 65 && charCode <= 90) {
                cssProp = cssProp.slice(0, a) + '-' + cssProp[a].toLowerCase() + cssProp.slice(a+1)
            }
        }
        cssText += cssProp + ':' + styleObj[key] + ';'
    }
    ele.style.cssText = cssText
}
Jay的随身听
关注
BOM和DOM详解
weixin_44074543的博客
05-06 3795
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象，而非 js 对象； DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。 BOM 主要处理浏览器
html中的bom和dom,前端之BOM和DOM
weixin_36278817的博客
06-15 565
一. BOM和DOMJavaScript分为ECMAScript, BOM, DOM.BOM( Browser Object Model )是指浏览器对象模型, 它使JavaScript有能力与浏览器进行交互.DOM( Document Object Model )是指文档对象模型, 通过它,可以访问HTML文档的所有元素.二. window对象所有浏览器都支持window对象. 它表示浏览器窗口...
JS中BOM和DOM详解
weixin_64922330的博客
07-20 877
介绍了JS中的BOM和DOM元素
BOM 和 DOM
rush_peng的博客
05-16 178
文章目录一.BOM1.1代表性的对象1.2常用的方法setInterval二.DOM 一.BOM 即浏览器对象模型，比如浏览器上的前进按钮，后退 ，比如地址栏等 1.1代表性的对象 window 对象 location 对象 screen 屏幕 history 历史模型 1.2常用的方法 window： 1. alert() 2. confirm(); // 确定还是取消 3. prompt(); // 能输入内容 4. setInterval(); // windows 对象 5. setTim
BOM 和 DOM 的关系
宋宋的博客
03-31 376
JS是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
Javascript之理解BOM和DOM
pakerder的博客
10-13 1061
一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript、DOM、BOM. ECMAScript: ES规定了JS的变成语法和基础核心知识，是所有浏览器厂商都遵守的JS语法工业标准。 DOM: 文档对象模型（Document Object Model），让我们通过DOM提供的接口来操作网页。DOM中，文档表示的就是整个HTML网页文档；对象表示将网页每个部分转换为一个对象；模型为使用模型表示对象间的关系，方便我们获取对象。通过dom，可以访问、
html中的bom和dom,BOM与DOM的区别
weixin_39681486的博客
06-15 790
总结：【BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。 DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。 BOM的内容不多，主要还是DOM。 由于DOM的操作对象是文档(Document)，所以dom和浏览器没有直接关系。一般情况下：BOM是由navigator、history、scre...
BOM 和DOM
chenchw的博客
12-25 439
1、BOM browser Object Model 浏览器对象模型 BOM 可以完成浏览器的操作，前进后退等。顶级对象是window BOM是包含DOM的。 2、DOM document Object Model 文档对象模型 通过DOM 可以完成网页中的元素的增改删，让网页产生动态效果。DOM的顶级对象是document。 ...
BOM和DOM有什么区别和联系
weixin_45342302的博客
12-29 1116
而 DOM 是文档对象模型的缩写，它代表了以层次结构组织的 HTML 或 XML 文档，并提供了一组用于访问和操作文档内容的接口。通过 BOM，开发者可以获取和操作浏览器的一些属性和方法，例如打开新窗口、改变浏览器的位置和尺寸、操作浏览器历史记录等。对象：表示当前窗口或标签页中加载的文档。它提供了许多方法和属性，用于访问和操作文档内容，例如获取和修改元素、添加和删除节点、修改文档的标题等。BOM 是浏览器对象模型的缩写，它提供了一组用于操作浏览器窗口、浏览器历史记录、浏览器的位置等浏览器相关对象的接口。
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
javascript学习笔记（三）BOM和DOM详解
01-19
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 ...
第 5 章 BOM 和DOM.pptx
01-25
第 5 章 BOM 和 DOM 本章节主要讲解了浏览器对象模型（BOM）和文档对象模型（DOM），并对 JavaScript 中的事件、存储机制和 DOM 操作进行了详细的讲解。 BOM 概述： 浏览器对象模型（BOM）是指浏览器的对象模型，...
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成，具体指出了BOM（浏览器对象模型）和DOM（文档对象模型）。这两个模型是实现JavaScript功能的重要组成部分，而ECMAScript则是JavaScript的核心规范。 BOM主要涉及window对象...
如何搭建Vue脚手架
w6437286的博客
09-26 463
本文主要讲解如何搭建vue脚手架。
vue上传预览CAD文件
只会写bug
09-24 625
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 993
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1069
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
跨境电商系统基本功能和特点​
最新发布
商城 / Java 商城 -首选 商城 开源 电商 商城 源码 商城
09-29 274
综上所述，跨境电商系统通过其全面的功能和特点，为全球用户提供了便捷、高效、安全的跨境购物体验。随着技术的不断进步和市场的不断发展，跨境电商系统将继续优化和完善，以适应新的挑战和机遇。
BOM和DOM分别代表什么？
07-25
BOM和DOM是在Web开发中经常提到的两个重要的概念。 BOM代表浏览器对象模型（Browser Object Model），它提供了与浏览器窗口进行交互的对象和方法。BOM提供了一组对象，用于控制浏览器的行为和属性，例如操作浏览器历史记录、控制浏览器窗口大小、跳转到不同的URL等。常见的BOM对象包括window、location、history、navigator等。 DOM代表文档对象模型（Document Object Model），它是对HTML或XML文档的逻辑结构的表达。DOM将文档中的每个元素、属性、文本等都表示为对象，通过DOM可以对文档进行增删改查的操作。DOM提供了一组标准的接口和方法，开发者可以使用这些接口和方法来操作HTML或XML文档的结构和内容。通过DOM，可以动态地改变网页的内容、样式和结构。常见的DOM对象包括document、element、attribute等。 总结来说，BOM提供了与浏览器窗口交互的对象和方法，而DOM提供了对HTML或XML文档结构的表达和操作的接口和方法。它们是Web开发中重要的两个概念，用于控制和操作网页的各个方面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值