JavaScript

DOM系列:DOM树和遍历DOM

上一节,咱们整理了DOM系列中的第一篇,主要介绍浏览器与DOM相关的知识。从标题中我们可以看出来,今天所要学的东西包含两个部分,第一部分是DOM树,第二部分是遍历DOM。如果你和我一样对于DOM树和遍历DOM是初次接触,那个人建议您花点时间好好看看这两部分的知识。

DOM系列:浏览器与DOM

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将是这个系列的第一篇。你将了解到DOM是什么,为什么它有用,以及如何与将来在伟德1946手机版中所做的一切联系起来。

理解DOM

DOM是Document Object Model的简称,是网站具有交互性的重要组成部分。它是一个接口,允许编程语言操作网站的内容、结构和样式。JavaScript是浏览器中连接到DOM的客户端脚本语言。欲要更好的操作好Web网站,我们就很有必要的理解DOM。而且这也是学习JavaScript很重要的部分之一。接下来我们将从以下几个部分来展开对DOM的理解和学习。

滚动的特性

一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱。我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,将使你的页面滚动更平滑、美观且性能更好。大多数Web页面不适合单屏显示,所以Web页面出现滚动条被所有用户认为是理所当然的。对于韦德1946手机版客户端开发人员和视觉设计来说,跨浏览器提供良好的滚动体验,同时符合设计,无疑是一个挑战。尽管 Web 标准的发展速度远超从前,但代码的实现往往是落后的。下文将为你介绍一些常见的关于滚动的案例,检查一下你所用的解决方案是否被更优雅的方案所代替。

使用 Intersection Observer 实现图片延迟加载

如果你还没有机会看过,@Paul Lewis 发布了一个精彩的视频系列,演示了如何构建一个媒体播放器以及渐进式 Web 应用(Progressive Web App)的一些重要功能。在 YouTube 上的这一系列视频 包括了他在建立网站时的各个部分。观看开发者展示他们工作的视频绝对是我最喜欢的学习新事物的方式!

现代浏览器支持的不同类型的观察者

观察者(Observer)是一个观察或注意事物的程序。观察者可以观察浏览器中发生的某些活动并做出相应的响应。观察者类似于狗,观察某些活动,并提醒我们发生了一些不寻常的事情。一旦我们为某些活动获取到狗发出的警告时,我们有责任采取相应的行动。现代浏览器支持的四种不同类型的观察者。

实例解析防抖动和节流阀

防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内执行多少次的技巧,两者相似而又不同。当我们给 DOM 绑定事件的时候,加了防抖和节流的函数变得特别有用。为什么呢?因为我们在事件和函数执行之间加了一个控制层。记住,我们是无法控制 DOM 事件触发频率的。

JavaScript中的ResizeObserver

这几天看@Anton Kosykh写的使用ResizeObserver实现响应式Vue的韦德娱乐平台,让我刷新了对响应式韦德娱乐平台的认识,也在这里第一次接触到ResizeObserver这个词。个人有一个习惯,对于任何新东西,我都充满好奇,有一股探知欲,要了解其中的原委。今天这篇文章就是自己对ResizeObserver的探知。

JavaScript学习笔记:querySelectorAll 和 getElementsByTagName区别

在《DOM的操作》一节中知道querySelectorAll()getElementsByTagName()两个方法都是用来查找DOM元素的。通过上一节的学习,知道querySelectorAll()方法将获取到NodeList对象,getElementsByTagName()方法获取到的是HTMLCollection对象。虽然他们获取的都是DOM动态集合,但两者还是略有差异的。今天我们就来看这两者之间的区别。

JavaScript学习笔记:动态集合

DOM是JavaScript中重要部分之一,在DOM中有一个动态集合。这个动态集合包含节点的集合(NodeList)、元素属性的集合(NamedNodeMap)和HTML元素的集合(HTMLCollection)。这三个对象都是类数组(Array-like),具有像数组一样的特性。更为重要的是,它们都是动态的,是有有生命有呼吸的对象,会实时更新查询DOM结构。今天我们学习的目标就是深究这三个动态集合之间的用法和联系以及区别

页面

返回顶部