你不容错过的JavaScript高级语法(BOM, DOM简析)

简介: 你不容错过的JavaScript高级语法(BOM, DOM简析)

下面一篇文章将整体分析一下BOM, DOM。这篇文章不是主要将知识,而是整体分析一下。


BOM


认识BOM


JavaScript有一个非常重要的运行环境就是浏览器,而且浏览器本身又作为一个应用程序需要对其本身进行操作,所以通常浏览器会有对应的对象模型(BOM,Browser Object Model)。


我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。


BOM主要包括以下的对象模型:


  • window:包括全局属性、方法,控制浏览器窗口相关的属性、方法。


  • location:浏览器连接到的对象的位置(URL)。


  • history:操作浏览器的历史。


  • document:当前窗口操作文档的对象。


window


window对象在浏览器中有两个身份:


  • 全局对象


  • 我们知道ECMAScript其实是有一个全局对象的,这个全局对象在Node中是global。


  • 在浏览器中就是window对象。 在浏览器中,window对象就是作为GO对象:


  • 比如在全局通过var声明的变量,会被添加到GO中,也就是会被添加到window上。


  • 比如window默认给我们提供了全局的函数和类:setTimeout、Math、Date、Object等。


  • 浏览器窗口对象


  • 作为浏览器窗口时,提供了对浏览器操作的相关的API。 事实上window对象上肩负的重担是非常大的:


  • 包含大量的属性,localStorage、console、location、history、screenX、scrollX等等(大概60+个属性)。


  • 包含大量的方法,alert、close、scrollTo、open等等(大概40+个方法)。


  • 包含大量的事件,focus、blur、load、hashchange等等(大概30+个事件)。


  • 包含从EventTarget继承过来的方法,addEventListener、removeEventListener、dispatchEvent方法。 下面来介绍一下dispatchEvent方法:


  • 他就是可以派发我们通过Event自定义的事件。然后通过addEventListener监听事件。


window.addEventListener("customEvent", () => {
      console.log("监听到了customEvent事件")
    })
    window.dispatchEvent(new Event("customEvent"))


网络异常,图片无法展示
|


location


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


常见的属性有哪些呢?


  • href: 当前window对应的超链接URL, 整个URL。


  • protocol: 当前的协议。


  • host: 主机地址。(包括主机名和端口号)


  • hostname: 主机地址(不带端口)。


  • port: 端口。


  • pathname: 路径;


  • search: 查询字符串;


  • hash: 哈希值;


  • username:URL中的username(很多浏览器已经禁用);


  • password:URL中的password(很多浏览器已经禁用); 我们会发现location其实是URL的一个抽象实现:


网络异常,图片无法展示
|


location有如下常用的方法:


  • assign:赋值一个新的URL,并且跳转到该URL中。其实直接赋值href也可以。


  • replace:打开一个新的URL,并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录)。


  • reload:重新加载页面,可以传入一个Boolean类型。


  • true: 表示强制刷新页面。清缓存。


  • false:不强制刷新。


history


history对象允许我们访问浏览器曾经的会话历史记录。 有两个属性:


  • length:会话中的记录条数。


  • state:当前保留的状态值。 有五个方法:


  • back():返回上一页,等价于history.go(-1)。


  • forward():前进下一页,等价于history.go(1)。


  • go():加载历史中的某一页。


  • pushState():打开一个指定的地址。



DOM


认识DOM


浏览器是用来展示网页的,而网页中最重要的就是里面各种的标签元素,JavaScript很多时候是需要操作这些元素的。


JavaScript如何操作元素呢?


通过Document Object Model(DOM,文档对象模型)。DOM给我们提供了一系列的模型和对象,让我们可以方便的来操作Web页面。


网络异常,图片无法展示
|


由于所有元素都继承自EventTarget,所以都具有它上面的方法。


Node


所有的DOM节点类型都继承自Node接口。developer.mozilla.org/zh-CN/docs/…


Node有几个非常重要的属性:


  • nodeName:node节点的名称。


  • nodeType:可以区分节点的类型。为number类型。


  • nodeValue:node节点的值。只能获取文本节点的值。


  • childNodes:所有的子节点。


事件监听


JavaScript脚本和浏览器之间交互时,浏览器给我们提供的BOM、DOM等一些对象模型。


事实上还有一种需要和浏览器经常交互的事情就是事件监听:


浏览器在某个时刻可能会发生一些事件,比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列的事件。


我们需要以某种方式(代码)来对其进行响应,进行一些事件的处理。在Web当中,事件在浏览器窗口中被触发,并且通过绑定到某些元素上或者浏览器窗口本身,那么我们就可以给这些元素或者window窗口来绑定事件的处理程序,来对事件进行监听。


如何进行事件监听呢?


  • 事件监听方式一:在script中直接监听。


<div class="box" onclick="console.log('div元素被点击')"></div>
  <div class="box" onclick="divClick()"></div>


  • 事件监听方式二:通过元素的on来监听事件。这种在同一个dom中监听相同的事件会发生覆盖。


divEl.onclick = function() {
      console.log("div元素被点击")
    }


  • 事件监听方式三:通过EventTarget中的addEventListener来监听。这个监听相同事件不会发生覆盖。


divEl.addEventListener("click", () => {
  console.log("div元素被点击")
})


事件流


事实上对于事件有一个概念叫做事件流,为什么会产生事件流呢?


我们可以想到一个问题:当我们在浏览器上对着一个元素点击时,你点击的不仅仅是这个元素本身。这是因为我们的HTML元素是存在父子元素叠加层级的。


事件冒泡和事件捕获


  • 默认情况下事件是从最内层向外依次传递的顺序,这个顺序我们称之为事件冒泡(EventBubble)。即由具体的元素到不具体的元素。


  • 事实上,还有另外一种监听事件流的方式就是从外层到内层(body -> span),这种称之为事件捕获(Event Capture)。由不具体的元素到具体的元素。


为什么会产生两种不同的处理流呢?


  • 这是因为早期浏览器开发时,不管是IE还是Netscape公司都发现了这个问题,但是他们采用了完全相反的事件流来对事件进行了传递。


  • IE采用了事件冒泡的方式,Netscape采用了事件捕获的方式。


那么我们如何去监听事件捕获的过程呢?


通过控制addEventListener的第三个参数。默认为false。false: 表示冒泡,true表示捕获。


如果我们同时有事件冒泡和时间捕获的监听,那么会优先监听到事件捕获的:他是先捕获后冒泡的。


事件对象event


当一个事件发生时,就会有和这个事件相关的很多信息:


  • 比如事件的类型是什么,你点击的是哪一个元素,点击的位置是哪里等等相关的信息。


  • 那么这些信息会被封装到一个Event对象中。


  • 该对象给我们提供了想要的一些属性,以及可以通过该对象进行某些操作。


常见的属性:


  • type:事件的类型。


  • target:当前事件发生的元素。就是绑定事件的元素。


  • currentTarget:当前处理事件的元素。就是触发事件的元素。


  • offsetX、offsetY:点击元素的位置。


常见的方法:


  • preventDefault:取消事件的默认行为。


  • stopPropagation:阻止事件的进一步传递。


事件类型:developer.mozilla.org/zh-CN/docs/…


相关文章
|
15天前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
15 5
|
11天前
|
存储 JavaScript 前端开发
|
9天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
9 0
|
9天前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
21 0
|
11天前
|
存储 缓存 自然语言处理
|
12天前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
9 0
|
2月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
1月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
17 2
|
16天前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
12 0