前端JS之DOM与BOM

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量56 收藏
点赞数
文章标签： 前端 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58200396/article/details/125116326
版权

DOM与BOM

节点类型

  • childNodes

    获取一个元素的所有子节点……

  • 节点类型

    DOM包含了多种节点，我们通常获取的标签，只是节点中的一种：

节点名称nodeType
元素节点1
属性节点2
文本节点3
CDATA节点4
实体引用名称节点5
实体名称节点6
处理指令节点7
注释节点8
文档节点9
文档类型节点10
文档片段节点11
DTD声明节点12

重点理解前三种节点。

每个节点有nodeName属性，文本节点和属性节点的nodeValue属性。

  • 常见的节点获取API

    常用：children parentNode offsetParent

    不常用：firstElementChild / firstChild lastElementChild / lastChild nextElementSibling / nextSibling previousElementSibling / previouSibling

创建、添加、删除节点

  • 创建节点

    createElement 创建一个元素节点；

    createTextNode 创建一个文本节点；

    createDocumentFragment 创建一个文档碎片，先将多个节点整合到这里面再统一添加。

  • 添加节点

    appendChild 元素最后添加一个子节点；

    insertBefore 在元素某个子节点之前添加新子节点，第一个参数为新节点，第二个参数为已存在的子节点。

  • 替换节点

    replaceChild 用新节点替换某个子节点，第一个参数为新节点，第二个参数为已存在的某个子节点。

  • 删除节点

    removeChild 删除元素的某个子节点。

BOM

BOM（Browser Object Model）浏览器对象模型，提供了一些和浏览或窗口相关的操作。我们学过的弹窗、日志、定时器就属于BOM的一部分。

重要事件

  • onresize

    宽口大小发生改变的时候触发。

  • onscroll

    页面滚动的时候触发，也可以用于某个元素节点上。

  • onfocus onblur

    进入页面和离开页面时触发，也可以用于其他能获得焦点的元素节点上。

  • 打开与关闭窗口

    open() close()

重要对象

  • location

    获取/设置 URL相关的属性。

  • history

    操作当前标签页的历史，类似于点击浏览器地址栏左侧的前进和后退按钮。

    history.go(number) – 前进或后退指定的页面数。

    history.back() – 后退一页。

    history.forward() – 前进一页。

  • navigator

    获取浏览器相关的信息。

  • Screen

    获取用户显示屏幕的各种信息。

    .width .height 获取显示器分辨率。

    .availWidth .availHeight 获取除去任务栏的大小。

各种尺寸获取

可视区宽高

  • 窗口宽高

    window.innerWidth window.innerHeight

    包含了滚动条的宽度和浏览器本身的边框宽度（低版本IE不支持）。

  • 内容区宽高

    document.documentElement.clientWidth

    document.documentElement.clientHeight

    不包含滚动条等。

元素的各种宽高

  • client

    clientWidth clientHeight

    宽(高)+padding。

  • offset

    offsetWidth offssetHeight

    宽(高)+padding+border。

  • scroll

    scrollWidth / scrollHeigh

    内容的实际高度，当内容没超出相当于client，当内容超出之后，会得到包括超出内容的实际高度，即使加了超出隐藏，也还是会得到内容所占的实际高度。

元素的各种距离

  • offset

    offsetLeft offsetTop

    获取左边（上边），到定位父级的左边（上边）的距离。

  • getBoundingClientRect

    返回一个对象，包含了元素各边到窗口的距离，返回的结构类似于：{top:100,left:20,bottom:500,right:890}。

滚动距离

  • 页面滚动宽高

    doucment.documentElement.scrollTop

    document.documentElement.scrollLeft

    页面的滚动宽（高）。此属性可以赋值，能让页面滚动到指定的位置。

    设置滚动距离也可以使用window.scrollTo()。

  • 元素滚动宽高

    元素节点.scrollTop 元素节点.scrollLeft

√.案例or作业

敦煌璧画
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从零学前端第九讲：JavaScript的Dom和Bom
IT修真院：初学者转行到互联网的聚集地
10-29 490
修真院Web工程师零基础全能课 本节课内容： JavsScript的Dom和Bom 主讲人沁修 项目经验丰富，擅长H5移动项目、敏捷开发。 直播录屏版 传送门：https://v.qq.com/x/page/q0732gi60q6.html 1、什么是DOM DOM就是文档对象模型，什么是文档对象模型？这就需要好好说说了。 HTML的文档docume...
JS(Dom+Bom).docx
02-19
JS最初由Netscape公司的Brendan Eich设计，现在已经成为Web开发的标准之一，被所有主流浏览器支持。 JavaScript的特点主要包括： 1. 交互性：JS允许网页具有动态交互性，比如用户点击按钮后触发某些动作或改变页面...
JavaScript之彻底搞懂DOM与BOM及其区别与用法
热门推荐
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
JavaScript对象之DOM和BOM
秋雨绵绵
02-23 674
本文简单对JavaScript的BOM对象和DOM对象进行了介绍，以及其中相关方法和用法。
前端之 BOM 和 DOM
fenglepeng的博客
08-13 325
前戏 到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。 JavaScript分为 ECMAScript，DOM，BOM。 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文
前端基础学习——JavaScript之BOM模型与DOM模型
weixin_53919192的博客
07-06 908
本文为大家带来了前端基础学习——JavaScript之BOM模型与DOM模型，希望对你有帮助~~
前端学习开发之【DOM与BOM】
qq_46056318的博客
10-13 917
DOM，文档对象模型，是处理可扩展标记语言的标准编程接口；使JS操作HTML；使html形成dom树，包含文档、元素、节点；获得的dom元素是一个对象；DOM主要是对元素进行创建、增、删、改、查、属性、事件；、；;改：改属性、内容、元素、样式；查：搜索器、节点操作；、、;事件：获取元素、注册、 添加事件处理程序。
前端技术学习第四讲：JavaScript中DOM和BOM
跟着老高学Java
03-27 1655
JavaScript中DOM和BOM 一、DOM和BOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。 BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可
web前端之BOM与DOM
贵有恒，何必三更眠五更起；最无益，只怕一日曝十日寒
06-03 2606
BOM与DOM用来和浏览器之间实现交互。 一、BOM和DOM的解释 BOM（Browser Object Model）：是指浏览器对象模型，它使javascript有能力与浏览器‘对话’。 DOM（Document Object Model）：是指文档对象模型，通过它，可以访问HTML文件的所有元素。 二、BOM 1、window对象 所有浏览器都支持window对象，它表示浏览器窗口...
【前端面试】四、DOM和BOM
weixin_49015558的博客
11-24 242
1. BOM属性对象方法 2. 事件流 3. 事件委托 4. 事件监听 5. mouseover和mouseenter的区别
Javascript之理解BOM和DOM
pakerder的博客
10-13 1014
一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript、DOM、BOM. ECMAScript: ES规定了JS的变成语法和基础核心知识，是所有浏览器厂商都遵守的JS语法工业标准。 DOM: 文档对象模型（Document Object Model），让我们通过DOM提供的接口来操作网页。DOM中，文档表示的就是整个HTML网页文档；对象表示将网页每个部分转换为一个对象；模型为使用模型表示对象间的关系，方便我们获取对象。通过dom，可以访问、
DOM和BOM的使用
01-08
DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的内容和结构。BOM 则是...
h5、css、js、DOM、BOM、jQuery、Ajax
03-23
在IT行业中，前端开发是构建Web应用程序的关键部分，而`h5`、`css`、`js`、`DOM`、`BOM`、`jQuery`和`Ajax`是这个领域中的核心概念和技术。以下是对这些知识点的详细阐述： 1. **HTML5 (h5)** HTML5是超文本标记...
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
10-27
DHTML，全称Dynamic HTML，是一种在...理解并掌握DHTML、JavaScript、DOM、BOM以及Web标准对于现代前端开发至关重要，它们共同构建了丰富的网页交互体验，为开发者提供了强大的工具来创建动态、响应式的网页应用程序。
javascript bom是什么及bom和dom的区别
11-22
BOM与DOM的主要区别在于它们关注的焦点不同： - **BOM**专注于浏览器窗口和相关功能的交互，如窗口操作、导航、浏览器信息等。由于缺乏统一标准，不同浏览器可能对BOM的实现有所差异。 - **DOM**（Document Object ...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 354
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1194
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1684
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 518
【代码】博客前端项目学习day03——框架页。
JavaScript基础：ECMAScript、DOM与BOM解析
JavaScript由ECMAScript（语法和基本对象）、DOM（处理网页内容）和BOM（与浏览器交互）三部分组成，具有解释型、基于对象、弱类型、动态特性的特点。JavaScript可以被其他语言编译成，如C#和Ceylon，以便在浏览器中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值