js-dom+bom(2)

已于 2022-10-09 09:28:20 修改
阅读量98 收藏
点赞数
文章标签： javascript 前端 html
于 2022-09-14 16:52:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41950754/article/details/126768745
版权

文章目录

dom

文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

Document

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是 DOM 树 (en-US)。

节点

常见节点

1.元素节点 就是我们一个完整的标签 包括里面的属性啊内容啊
2.文本节点 就是纯文字部分
3.属性节点 比如class=‘box’
4.注释节点
5.换行节点 但是换行节点我们一般归类到文本节点里面

节点关系
  • 父节点parentNode
  • 子节点 childNodes
  • 第一个子节点 firstChild
  • 最后一个子节点 lastChild
  • 前一个兄弟节点 previousSibling
  • 后一个兄弟节点 nextSibling
元素节点关系
  • 父元素 parentElement
  • 子元素 children
  • 第一个子元素 firstElemtnChild
  • 最后一个子元素 lastElementChild
  • 上一个兄弟元素 previousElementSibling
  • 下一个兄弟节点 nextElementSibling
获取元素的方法

通过JS获取DOM元素的5种方法：

  • 根据id名获取元素：getElementById;
  • 根据标签名获取元素： getElementsByTagName，返回一个数组；
  • 根据类名获取元素：getElementsByClassName，返回一个数组；
  • 根据name属性值获取元素：getElementsByName，返回一个数组；
  • 根据选择器获取元素：
    querySelector：获取一个元素，推荐使用 用法类似写css；
    querySelectorAll：返回一个元素数组。
判断节点类型 nodeType

对于节点类型来说 给的是数字 每一个数字对应的类型不一样

  • 8 是注释节点
  • 3 是文本节点
  • 1 元素节点
    其他类型可以查看MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
nodeName 获取节点的名字，tagName 获取元素的标签的名字
innerHTML 和 innerText
  • innerHTML会识别html标签
  • innerText不会识别 会原封不动的展示出来
Node.textContent
  • Node 接口的 textContent 属性表示一个节点及其后代的文本内容。
  • 与 innerText 的区别

不要被 Node.textContent 和 HTMLElement.innerText 的区别搞混了。虽然名字看起来很相似，但有重要的不同之处：

textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 只展示给人看的元素。
textContent 会返回节点中的每一个元素。相反，innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，
此外，由于 innerText 受 CSS 样式的影响，它会触发回流（ reflow ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）
与 textContent 不同的是，在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。

outerHTML属性

element DOM 接口的outerHTML属性获取描述元素（包括其后代）的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。

hidden

hidden属性是控制 元素是否显示(不占位置)

    btn.onclick=function(){
        // 当我原本值为true的时候 我点击要变成false
        // 当我原本值为false的时候 我点击 要变成true
        // if(div.hidden == false){
        //     div.hidden=true
        // }else{
        //     div.hidden=false
        // }
        // 经典代码
        div.hidden = !div.hidden
    }

  隐藏元素的另一种方式
  div.style.display='none'
nodeValue是节点值

对于注释节点来说 拿到的是注释的内容
对于文本节点来说拿到的就是文本的内容
对于非input元素节点来说 是Null

给节点绑定时间

事件源
时间类型
监听器

  • 方法一
    btn.οnclick=function(){
    具体操作}
  • 方法二
    btn.addEventListener(‘click’,function () {
    具体操作
    })
创建节点
// 创建元素节点 createElement
// 创建文本节点 createTextNode
// 创建注释节点 createComment 
// 创建属性节点 createAttribute
挂载节点
// node.append(要插入的元素)  在node的末尾插入节点或者字符串(作为最后一个子元素插入)
// bodyEle.append(div)

// node.prepend(要插入的元素) 在node的开头插入节点或者字符串(作为第一个子元素插入)
// bodyEle.prepend(div)

// node.before(要插入的元素) 在node的前面插入元素(作为兄弟元素插入)
// uls.before(div)

// node.after(要插入的元素) 在node的后面插入元素(作为兄弟元素插入)
// uls.after(div)

// node.replaceWith(要替换的元素) 将node替换成新的元素
删除和替换节点
// removeChild 父元素.removeChild(子元素) 移除子元素
// 这里的父元素和子元素 都得是dom对象

// remove()  元素.remove() 移除自己

// replaceChild  父元素.replaceChild(新元素,旧的要被替换的子元素)
// 用新元素把旧的元素替换掉

// 元素.cloneNode(布尔值) 整体的值是克隆好的元素 这里面的布尔值 如果是true表示深克隆 否则是浅克隆
// 深克隆就是连同子节点一起克隆 浅克隆就是只有标签
属性节点

标准（自带的如class（className）、name等）
非标准（自定义）

属性节点操作

  • attribute方式操作属性节点
    通过方法来操作，常用的方法有如下几个
    getAttribute 获取
    setAttribute 设置
    hasAttribute 查找
    removeAttribute 移除
    可以操作标准属性节点(固有的)和非标准属性节点(自定义的)

  • property方式操作属性节点
    通过打点调用的方式 节点.属性名
    只能操作标准属性节点

  • h5 自定义属性（以data-开头）
    可以直接打点调用
    如

  <div  data-id="0"></div>
  获取 div.dataset.id
className和classlList
  • className属性值是一个字符串 相当于直接把class里面的所有内容都拿了过来
    • 通过className修改样式的时候,就是把类名完全替换掉
  • classList属性值是一个数组 相当于把class中每一个元素都放到了数组中作为元素
    • classList.add（）增加
    • classList.remove（）移除
    • classList.contains （）检测是否包含
    • classList.toggle（）有就移除，没有就添加
通过style修改样式

注意后面属性有-号，改写成小驼峰命名法

元素.style.属性=''
div.style.backgroundColor='red'
getComputedStyle属性
  • 对于内联样式 你可以通过style.的形式 可以拿到
    • var p=document.getElementsByTagName(‘p’)[0];
  • 对于css文件中的或者style标签里面的 你拿不到
    • 可以通过getComputedStyle拿到全局样式
    • 全局的样式 是只读的 不能进行修改

js操作盒子模型

请添加图片描述
请添加图片描述

client系列: width, height, top, left

clientWidth/clientHeight: 获取盒子或页面可视区域的宽高
clientTop:获取盒子的上边框的大小
clientLeft:获取盒子的左边框的大小
offset系列: width, height, top, left, parent

offset系列: width, height, top, left, parent

offsetWidth/offsetHeight: 获取盒子或页面可视区域的宽高+border
offsetTop:获取一个定位元素相对于参考点的上面的距离
offsetLeft:获取一个定位元素相对于参考点的左面的距离
offsetParent:获取一个定位元素的参考点
scroll系列: width, height, top, left

scroll系列: width, height, top, left

scrollWidth/scrollHeight:获取盒子或页面真实内容的宽度
scrollTop:获取页面或盒子向上卷去的高度
scrollLeft:获取页面或盒子向左卷去的宽度 基本上用不到
需要记的三个常用高度：

总结

获取一张网页可视区的高度：document.body.clientHeight
获取一张网页真实的高度：document.body.scrollHeight
获取一张网页卷去的高度：document.body.scrollTop

事件处理

**手动调用事件

  • xx.click()（addEventListener）//此方法不能调用dom2，change事件

  • xx.dispatchEvent(new Event(‘change’))

  • xx.onclick();（onclick）

事件类型

事件 + 事件的反馈 = 前端交互（前端的核心）

鼠标事件：

请添加图片描述

键盘事件：

请添加图片描述
事件的执行顺序是 onkeydown、onkeypress、onkeyup

加载事件：
  • load 加载 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源 事件源是window
  • unload 加载 退出页面 此事件不好捕获到 也没有什么用
  • DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像 img 和样式表之类的外部资源可能尚未加载 完成。

## 表单事件：

请添加图片描述

  • focus: 获取焦点
  • blur: 失去焦点
  • change: 改变输入框中的内容，并失去焦点时触发
  • input：内部发生变化，立即触发，不等到失去焦点
  • submit: 当点击了提交按钮，会触发submit事件
  • reset: 当点击了重置按钮，会触发reset事件
其它事件：
  • resize: 改变了浏览器窗口大小时，会触发resize事件
  • scroll: 页面滚动时，会触发scroll事件

事件的绑定和解绑

HTML级别的事件绑定

可以在HTML开始标签上，去绑定事件，这种绑定基本不用

DOM0事件绑定
 btn.onclick = function(){}
  • DOM0事件绑定，就是给DOM元素的onxxxx属性赋值，是基于属性赋值的操作
  • 基于属性赋值 如果重复绑定多次，后面的会覆盖前面的
  • dom0级别的事件绑定优先级是高于HTML级别的事件绑定的
DOM2的事件绑定

DOM2的事件绑定是基于事件池的，不是基于属性赋值的，所以可以多次绑定，不会覆盖掉

btn.addEventListener("click",function(){}
事件解绑
  • DOM0的解绑
 this.onclick = null; // DOM0的解绑
  • DOM2的事件解绑
btn.removeEventListener("click", fn)
事件冒泡和事件捕获
  • 冒泡：从内到外
  • 捕获：从外到内
  • addEventListener第3个参数为 true 表示捕获阶段触发，false表示冒泡阶段触发，默认值为false`
  • 阻止

  e.stopPropagation()

事件对象

常见的属性：
  • type：事件的类型；
  • target：当前事件发生的元素；
  • currentTarget：当前处理事件的元素；
  • eventPhase：事件所处的阶段；
  • offsetX、offsetY：事件发生在元素内的位置；
  • clientX、clientY：事件发生在客户端内的位置；
  • pageX、pageY：事件发生在客户端相对于document的位置；
  • screenX、screenY：事件发生相对于屏幕的位置；
常见的方法：
  • preventDefault：取消事件的默认行为；
  • stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；

事件委托

事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 – 事件委托模式（也是一种设计模式）

  • 当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；
  • 可以通过event.target获取到当前监听的元素；

BOM

BOM：浏览器对象模型（Browser Object Model）

BOM主要包括一下的对象模型

  • window：包括全局属性、方法，控制浏览器窗口相关的属性、方法
  • location：浏览器连接到的对象的位置（URL）
  • history：操作浏览器的历史
  • navigator：用户代理（浏览器）的状态和标识（很少用到）
  • screen：屏幕窗口信息（很少用到）
    请添加图片描述

window

window对象在浏览器中可以从两个视角来看待
  • 视角一：全局对象 GO
  • 视角二：浏览器窗口对象, 提供了对浏览器操作的相关的API
window对象的作用
  • 第一：包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）
  • 第二：包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）
  • 第三：包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）
  • 第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法
  • MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

location对象

location对象用于表示window上当前链接到的URL信息

常见的属性有哪些
  • href: 当前window对应的超链接URL, 整个URL；
  • protocol: 当前的协议；
  • host: 主机地址；
  • hostname: 主机地址(不带端口)；
  • port: 端口；
  • pathname: 路径；
  • search: 查询字符串；
  • hash: 哈希值；
    请添加图片描述
常见的方法有哪些
  • assign：赋值一个新的URL，并且跳转到该URL中
  • replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）
  • reload：重新加载页面，可以传入一个Boolean类型
URLSearchParams介绍
  • URLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串
  • 可以将一个字符串转化成URLSearchParams类型
  • 也可以将一个URLSearchParams类型转成字符串
  • 中文会使用encodeURIComponent和decodeURIComponent进行编码和解码
URLSearchParams常见的方法

history对象

history对象允许我们访问浏览器曾经的会话历史记录

常见属性
  • length：会话中的记录条数
  • state：当前保留的状态值
常用方法
  • back()：返回上一页，等价于history.go(-1)；
  • forward()：前进下一页，等价于history.go(1)；
  • go()：加载历史中的某一页；
  • pushState()：打开一个指定的地址；
  • replaceState()：打开一个新的地址，并且使用replace；

navigator对象(了解)

请添加图片描述

screen对象(了解)

  • screen主要记录的是浏览器窗口外面的客户端显示器的信息
  • 比如屏幕的逻辑像素 screen.width、screen.height
    请添加图片描述
Modevol
关注
JavaScript-DOM和BOM详解
主营前端方向，技术栈是vue
12-30 1268
DOM和BOM(DOM((简介,事件(onclick单击事件、onload事件),BOM(简介，分类，语法( Navigator 当前浏览器、Histry 向前或向后翻页、Location 地址栏的信息))
javascript-DOM&BOM
JavaZwb的博客
09-19 1062
`DOM` 是 `JavaScript` 操作网页的接口，全称为“文档对象模型”（`Document Object Model`）。它的作用是将网页转为一个 `JavaScript` 对象，从而可以通过脚本对网页元素进行操作，浏览器会根据 `DOM` 模型，将结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（`DOM Tree`）；而BOM指的是浏览器提供了各种接口，让 JavaScript 脚本可以控制浏览器的各种功能
js的Bom操作
weixin_54327001的博客
06-02 680
◼ BOM：浏览器对象模型（Browser Object Model） 简称 BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象； 比如navigator、location、history等对象；◼ JavaScript有一个非常重要的运行环境就是浏览器 而且浏览器本身又作为一个应用程序需要对其本身进行操作； 所以通常浏览器会有对应的对象模型（BOM，Browser Object Model）；
Web APIs+DOM+BOM
DYHHH06的博客
04-20 1752
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
JS基础知识DOM+BOM
m0_59550122的博客
03-19 1578
js BOM DOM部分基础知识学习笔记（1）
前端学习笔记 | WebAPIs（DOM+BOM）
m0_53522458的博客
03-13 1117
DOM操作、事件监听、事件流、事件委托、元素尺寸与位置、日期对象、节点操作、M端事件、window对象、本地存储、数组map和join方法、正则表达式
JavaScript = ECMAscript+DOM+BOM
一直专注于互联网
03-04 482
JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象。DOM 描述了处理网页内容的方法和接口。BOM 描述了与浏览器进行交互的方法和接口。  ECMAScript简单地说，ECMAScript 描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。ECMAScript只是制定了标准，定义了脚本语言的所有属性、方法和对象，并没有涉及脚本语言的具体实现。其他...
JavaScript---BOM和DOM
weixin_65440201的博客
07-30 643
1.DOM简单学习：为了满足案例要求 1.1操作Element对象： 1.2事件简单学习 案例1：电灯开关 2.BOM 2.1概念：Browser Object Model 浏览器对象模型 2.2组成： 2.3Window：窗口对象 2.3.1创建 2.3.2方法 2.3.3属性： 2.3.4特点 案例：轮播图 2.4Location：地址栏对象 2.4.1创建(获取)： 2.4.2方法： 2.4.3属性 2.5History：历史记录对象 2.5.1创建(获取)： 2
js模块（es+dom+bom）
weixin_43847807的博客
10-22 1221
js模块JS基础定时器js函数获取节点DOMBOM JS基础 定时器 setTimeout(函数,时间) ：延迟定时器—设置函数延迟时间 setInterval（函数，时间） ：间隔定时器—间隔一定时间调用一次函数 clearTimeOut(定时器名称) :清除延迟定时器 clearInterval(定时器名称) ：清除间隔定时器 定时器可以互相嵌套 延时定时器最小时间为4ms，间隔定时器最小时间为16.7ms 间隔定时器：使用时，记得清除上一次定时器。因为会叠加 动画针与定时器的区别：动画帧
1.9JavaScript(DOM+BOM)
m0_62039416的博客
06-28 50
js笔记
JS(Dom+Bom).docx
02-19
JavaScript，简称JS，是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，尤其在客户端渲染方面占据重要地位。它基于对象和事件驱动，这意味着你可以直接利用内置的对象进行操作，并通过事件来触发程序的执行。...
W3SChool离线手册+jsdom+bom
12-16
【标题】"W3School离线手册+jsdom+bom" 涵盖了Web开发中的基础和进阶知识，主要包括HTML、CSS和JavaScript的相关内容，同时提到了jsdom库以及浏览器对象模型（BOM）的概念。这个压缩包很可能是为开发者提供一个离线...
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成，具体指出了BOM（浏览器对象模型）和DOM（文档对象模型）。这两个模型是实现JavaScript功能的重要组成部分，而ECMAScript则是JavaScript的核心规范。 BOM主要涉及window对象...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 786
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 519
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1120
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 218
【代码】如何使用Redisson的布隆过滤器？
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1299
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 847
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
《深入理解JavaScript-ECMAScript、DOM和BOM》
JavaScript由ECMAScript（国际标准）、DOM（文档对象模型）和BOM（浏览器对象模型）三部分组成。 ECMAScript是JavaScript的核心，是一种由Ecma国际组织标准化的脚本语言规范。它定义了JavaScript的语法、基本数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值