DOM、BOM

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

一、 DOM

文档对象模型，简称DOM，通过DOM接口可以改变网页的内容、结构和样式

1、获取元素

（1）文档：一个页面为一个文档，DOM中使用document表示
元素：页面中所有标签都是元素，DOM中使用document表示
节点：网页中所有内容都是节点，DOM中使用node表示
（2）获取页面元素
a.根据ID获取：使用getElementById()方法获取元素，返回的是一个元素对象
b.根据标签名获取：

  • 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合，返回的是获取过来的元素对象的集合，以伪数组的形式存储
  • 还可获取某个元素（父元素）内部所有指定标签名的子元素：
    element.getElementsByTagName(‘标签名’);
    父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

c.通过HTML5新增的方法获取：
document.getElementsByClassName(‘类名’);
document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); 返回所有元素对象集合
d.获取body和html元素
body：document.body
html：document.documentElement

2、事件基础

事件是可以被js侦测到的行为（触发–响应机制）
（1）组成：事件由事件源、事件类型、事件处理程序构成

  • 事件源：事件被触发的对象
  • 事件类型：如何触发，如鼠标点击（onclick）鼠标经过 键盘按下
  • 事件处理程序：如通过一个函数赋值的方式完成
<button id="btn">按钮</button>
<script>
   var btn = document.getElementById('btn');  事件源
   btn.onclick = function(){
          alert('内容');
          }

（2）执行事件的步骤
获取事件源，注册事件（绑定事件），添加事件处理程序（采取函数赋值形式）
常见的鼠标事件
请添加图片描述

3、操作元素

可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。
（1）改变元素内容

  • element.innerText = 内容 改变从起始位置到终止位置的内容，但他不识别html标签，同时空格和换行也会去掉
  • element.innerHTML = 内容 改变从起始位置到终止位置的全部内容，识别html标签，同时保留空格和换行
    （2）其他元素属性
    如src、href、id、alt、title
    请添加图片描述
    （3）修改表单属性
    如type、value、checked、selected、disabled
    使用：
input.value = '内容'    改变表单中文字
btn.disabled = true     禁用某个表单

（4）修改样式属性
修改元素的大小、颜色、位置等样式

element.style   行内样式操作
element.className    类名样式操作

如

div.style.backgroundColor = 'purple'
div.className = '类名'

获取自定义属性：

  • element.属性 只能获得标签自带属性
  • element.getAttribute(‘属性’) 可以获取程序员自己添加的属性，即自定义属性
    设置自定义属性
  • element.setAttribute('属性’，‘值’)
    H5自定义属性
    用data-来命名自定义属性，还新增element.dataset.index或element.dataset[‘index’]来获取自定义属性

4、节点操作

  • 利用父子兄节点关系获取元素
  • 逻辑性强，但是兼容性稍差
  • 一般的，节点至少有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个节点属性，元素节点nodeType为1，属性节点为2，文本节点（包含文字、空格、换行等）为
    1、节点层级
    父子节点
    （1）父级节点
element.parentNode   得到的是离元素最近的父级节点

（2）子节点

parentNode.childNodes
得到所有子节点，包含元素节点、文本节点等

若只想获得元素节点，则需用循环遍历来找出nodeType为1的子节点，一般不使用
通常使用：

parentNode.children
返回子元素节点

返回第一个和最后一个：

parentNode.firstChild  返回第一个子节点（文本、元素）
parentNode.LastChild  返回最后一个子节点
parentNode.firstElementChild  返回第一个子元素节点
parentNode.lastElementChild  返回最后一个子元素节点

通常使用：

parentNode.children[0]
parentNode.children[ol.children.length - 1]

兄弟节点

node.nextSibling 返回当前节点的下一个兄弟节点，包含所有节点
node.previousSibling 上一个兄弟节点

返回兄弟元素节点

node.nextElementSibling 返回下一个兄弟元素节点
node.previousElementSibling 上一个

2、创建并添加节点
动态创建元素节点：

document.createElement('tagName')

添加节点：

node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child,指定元素）
将一个节点添加到父节点的指定子节点前面

3、删除节点

node.removeChild(child)

4、复制节点

node.cloneNode()

如果括号参数为空或false，则只复制标签，不复制内容
如果括号为true，则都复制

高级事件

1、注册事件

给元素添加事件，称为注册事件或绑定事件，注册事件的两种方法为：传统方法和方法监听注册方式
（1）传统注册方式：注册事件的唯一性，同一个元素只能设置一个处理函数
（2）方法监听注册方式：

addEventListener()

同一个元素同一个事件可以注册多个监听器
使用：

eventTarget.addEventListener(type,listener[,useCapture])
  • type：事件类型字符串，如click、mouseover，不带on
  • listener：事件处理函数，事件发生时，会调用该监听函数
  • useCapture：可选参数，布尔值，默认为false

2、删除事件

（1）传统方式：

eventTarget.onclick = null

（2）方法监听注册方式：

eventTarget.removeEventListener(type,listener[,useCapture])

3、DOM事件流

事件流描述的是从页面中接受事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流主要分为3个阶段：捕获阶段、当前目标阶段、冒泡阶段

4、事件对象

事件对象写到侦听函数的小括号里，当形参来看；它只有有了事件才会存在，系统自动创建，不需要传递参数；它是事件的一系列相关数据的集合，跟事件相关的，它有许多属性和方法
由于存在兼容性问题，所以可写为

e = e || window.event

常见属性和方法：
请添加图片描述
target和this的区别：e.target返回的是触发事件的对象（元素），this返回的是绑定事件的对象（元素）
阻止冒泡的两种方法：

  • 标准写法：利用事件对象里面的stopPropagation()方法
  • 非标准（无兼容性问题）：cancelBubble属性，当它等于true是，阻止冒泡

4、事件委托（代理、委派）

原理：不给每个子节点单独设置事件监听器，而是给其父节点设置事件监听器，然后利用冒泡原理影响每个子节点

5、常用鼠标事件对象

请添加图片描述

6、常用键盘事件

请添加图片描述
键盘事件对象中的keyCode属性可以得到相应键的ASCLL码值
keyup和keydown不区分字母大小写
keypress区分大小写

二、BOM

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
请添加图片描述
window对象是浏览器的顶级对象，它是JS访问浏览器窗口的一个接口，它还是一个全局变量，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
1、窗口加载事件

window.onload = function(){}  只能写一次 或
window.addEventListener("load",function(){})  可写多次

当文档内容加载完后再触发这个事件，调用函数

document.addEventListener('DOMContentLoaded',function(){})

当标签加载完毕后，就可触发事件
2、调整窗口大小事件

window.onresize = function(){}
window.addEventListener("resize",function(){})

只要窗口大小发生像素变化，就会触发这个事件
通过window.innerWidth来获取窗口大小
3、定时器

  • 设置定时器
window.setTimeout(调用函数，[延迟的毫秒数]);

该定时器在定时器到期后执行调用函数（window可以省略）
调用函数可以直接写函数，也可以写函数名

window.setInterval(回调函数，[间隔的毫秒数]);

该定时器重复调用一个函数，每隔这个时间，就去调用一次回调函数

  • 停止定时器
window.clearTimeout(timeoutID)

window可以省略，需要给定时器取名字才可以停止

window.clearInterval(intervalID);

4、this
一般情况下this最终指向那个调用它的对象
5、JS执行队列
（1）同步
执行完一个任务后再执行另一个任务
**同步任务：**同步任务都在主线程上执行，形成一个执行栈
（2）异步
在执行一个任务的同时执行其他任务
**异步任务：**通过回调函数实现，添加到任务队列中

  • 普通事件，如click、resize等
  • 资源加载，如load、error等
  • 定时器，包括setInterval、setTimeout等
    执行机制
  • 先执行执行栈中的同步任务
  • 异步任务（回调函数）放入任务队列中
  • 同步任务执行完毕后，系统按照次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行
  • 事件循环：请添加图片描述
    6、location对象
    该属性用于获取或设置窗口的URL，并且可以用于解析URL，该属性返回的是一个对象
    （1）URL
    URL即统一资源定位符，是互联网上标准资源的地址
    语法格式：请添加图片描述
    （2）location属性
    请添加图片描述
    重点为href和search
    （3）location方法
  • location.assign() 可以跳转页面，也可以返回原页面
  • location.replace() 替换当前页面，不能后退页面
  • location.replace() 重新加载页面

7、navigator对象
它包含有关浏览器的信息，有很多属性，最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
使用方法：请添加图片描述
8、history对象
它与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL
相关方法：

  • back() 可以后退功能
  • forward() 前进功能
  • go(参数) 前进后退功能，如果参数为1，则前进一个页面，如果是-1，则后退一个页面
小狮同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript核心之 DOM BOM
技术专家
12-22 398
学完JavaScript基础，我们就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，这里我们会讲解如何获取DOM元素，如何操作DOM 元素
dom bom
liangkaihuaen的博客
08-07 210
1.BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 2.DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 ...
JS DOM BOM学习笔记
Curry_On的博客
11-17 583
JS DOM BOM 学习笔记 本文根据B站pink老师视频整理，供复习参考 持续更新中：
BOM与DOM
weixin_47432345的博客
08-07 5600
DOM 与 BOM 详解
DOM BOM
weixin_30904593的博客
10-26 78
1.Javascript组成 JavaScript的实现包括以下3个部分： 1）核心（ECMAScript）：描述了JS的语法和基本对象。 2）文档对象模型 （DOM）：处理网页内容的方法和接口 3）浏览器对象模型（BOM）：与浏览器交互的方法和接口 ECMAScript扩展知识： ①ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。 ...
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
DOM和BOM
m0_63170206的博客
05-26 341
1.DOM 1.1DOM概述 1.dom是处理可扩展标记语言的标准编程接口，可以改变网页的样式，内容和结构 2.文档：一个页面就是一个文档（document） 3.元素：页面中的所有标签都是元素（element） 4.节点：网页中的所有内容都是节点（标签，属性，文本，注释等）（node） 4.对象：文档，元素，节点都是对象 获取元素 1.id获取 getElementByid() 1.2获取元素 获取元素 <script> // 1.id获取---id是大小写敏感的字符串 // cons
什么是DOM和BOM？
似水流年QC的博客
06-01 1万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
JavaScript之彻底搞懂DOM与BOM及其区别与用法
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
DOM和BOM常用API
m0_61698324的博客
01-17 894
DOM 是指文档对象模型；是为了操作文档出现的 API，可以访问HTML文档的所有元素, document 是其的一个对象； BOM 是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。是为了操作浏览器出现的 API，window 是其的一个对象。
DOM和BOM的使用
01-08
DOM 和 BOM 的使用 DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的...
JS基础知识6（DOM BOM）
weixin_43836308的博客
03-10 377
DOM的操作方法 浏览器的重绘与重排· 前端开发的时候大量的操作dom会引起浏览器重绘(redraw)和重排(reflow) 。 在文档重新加载的时候，浏览器引擎会解析html来生成dom树，之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放...
js dom bom
10-28
JavaScript中的DOM和BOM分别指的是文档对象模型（Document Object Model）和浏览器对象模型（Browser Object Model）。DOM是用来操作HTML和XML文档的API，它将文档解析成一个由节点和对象（包含属性和方法的对象）...
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1062
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
JavaScript代码片段
weixin_66128399的博客
08-26 1917
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
【项目】云备份系统笔记
m0_73713491的博客
08-27 961
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 7820
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1581
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 672
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值