现代 CSS

DOM系列

DOM系列:DOM事件的传播

通过前面的DOM事件模型事件绑定的姿势两节的学习,我们对JavaScript中的DOM事件有了一定的基础。但忽略了有关事件如何被触发的重要细节。

DOM系列:事件绑定的姿势

在上一节中,学习和了解了DOM事件模型,了解到JavaScript中每种事件模型都有其自己独具的特性。不同的事件模型中,绑定DOM事件的姿势也将略有差异,在这一节中,我们一起来学习JavaScript中DOM事件是如何绑定的。在JavaScript中,给DOM元素绑定事件主要分为两大类:HTML中直接绑定JavaScript中绑定

DOM系列:DOM事件模型

通过上一节的学习,对DOM事件有了一个简单的了解。但这只是学习DOM事件相关知识的起步点。在JavaScript中常见的事件模型有:DOM基本事件模型DOM Level 2事件模型IE事件模型DOM Level 3事件模型自定义事件模型。每种事件模型都有其自己独具的特性。只有了解了DOM事件模型之后,才可以为后续的DOM事件打下一个基础。今天来了解一下DOM事件的模型。

DOM系列:DOM事件简介

如果你浏览过早期的Web网站,或许你已经发现了这些Web站点除了能提供查阅信息之外,无其他作用可言。这样的Web站点其实是非常无聊的。那是因为Web站点没有提供人与机器的互动行为。激不起用户的兴趣。造成这种现象的原因很简单。Web应用程序或者Web站点存应该是为了响应用户对它们所做的事情。好比,我们每天一大早起床时就想好了一天要做些什么,这样每天都有动力,也变得充实。那么在Web应用或Web网站上其实也是类似的,Web网站之后做的事情很大程度上取决于你告诉他们做什么。这样一来,Web网站会变得有趣的多。

DOM系列:DOM操作小结

DOM是JavaScript的基础之一,自己学习DOM的操作也有一段时间了,到今天为止DOM系列的教程刚好有十篇了,这部分都主要是围绕DOM操作的笔记。主要围绕DOM元素的增、删、改、查,DOM节点的操作以及元素尺寸、位置获取和设置等知识。今天这篇文章主要是小结一下。希望对一些像我这样的初学者有所帮助。

DOM系列:视窗、设备、滚动条和文档尺寸

在上一节中,学习了JavaScript如何获取和设置元素位置和尺寸相关的方法,另外在JavaScript的学习笔记当中也学习了视窗宽度、位置与滚动高度相关的JavaScript方法与属性。今天继续来学习DOM中相关的知识,这篇文章将学习视窗、设备、滚动条和文档等相关的尺寸。其实在前两篇文章中都有涉及这些知识,为了让DOM系列相关的知识更完善,所以再花点时间整理一些这方面的技术点,加强印象。

DOM系列:获取元素位置和尺寸

对于每一位Web开发的同学而言,在CSS的世界当中,每一个元素都是一个盒子,都有描述盒子大小和位置的相关属性。比如CSS的盒模型相关的属性和position相关属性。不过今天我们学习和聊的不是CSS的世界,而是来学习和聊JavaScript中怎么获取元素尺寸和位置。

DOM系列:动态添加CSS样式规则

在上一节中学习了如何通过JavaScript来修改CSS样式。简单地说:查询CSS样式(即计算样式),设置单个样式(设置的是行内样式),设置多个样式(通过类来设置样式)。事实上我们还可以通过脚本化CSS这种技术来控制样式。这种方式,可以让我们的页面更加的快速和高效。那就是直接通过JavaScript动态地添加和删除样式表中的某些样式,用来取代不断地查询DOM元素,并应用各种样式。接下来咱们就来学习脚本化样式表相关的知识。

DOM系列:样式和类

对于任何一位Web开发者而言,处理CSS样式很多时候还是会借助JavaScript。简单的说,我们会碰到一些交互(或UI效果的变化)都会通过JavaScript来处理style或类。那么今天我们将要学习的是如何通过JavaScript来控制样式和类名,在深入讨论JavaScript处理样式和类的方法之前,我们需要知道在Web页面中元素的样式处理通常有两种方式。

DOM系列:修改DOM

通过前面的学习,我们都知道,DOM并不一定要由存在于HTML中的元素组成。我们仅需要使用几行JavaScript代码就可以将HTML元素添加到你的DOM中。而且你也有能力移动周围的元素,甚至删除它们。除了这一切之外,我们还可以动态地创建和修改DOM中的元素,而且这一DOM操作也是很重要的一个特性,同时也能满足Web网站或应用程序的一些操作。在今天的教程中,我们将继续学习DOM中的一些基础知识。在今天中,我们将研究如何创建元素、删除元素和克隆元素等。简单的说,今天的内容涉及到一些DOM的修改。

页面

返回顶部