【javascript dom读书笔记】 第九章 CSS-DOM

用dom设置样式

element.style.property = value

何时用dom脚本设置样式

作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持,所以需要考虑的是问题最简单的解决方案是什么,哪种解决方案会得到更多的浏览器支持。

在尝试了书中dom设置的实例以后,虽然代码比css要多很多,但是有一种操纵的快感,这应该是dom编程的艺术所在吧,有一种后端语言的感觉,至于实际使用中的选择,见仁见智做出更适合的自己的决定。

但最后作者说到有一种css用于无法与dom竞争:javascript的脚本能定时重复执行一组操作,实现css不能实现的效果。下一章的幻灯片里会给出演示!

几个常用的封装函数

因为有很多不错的常用函数,可以放到外部js中随时调用,下面介绍本书中的几个函数

addLoadEvent

 1 function addLoadEvent(func){
 2 //将函数作为参数,此函数就是 onload 触发时需要执行的某个函数
 3     var oldonload=window.onload;
 4     //将原来的 onload 的值赋给临时变量 oldonload。
 5     if(typeof window.onload!="function"){
 6     //判断 onload 的类型是否是 function。如果已经执行window.onload=function(){...} 赋值,那么此时 onload 的类型就是 function
 7     //否,则说明 onload 还没有被赋值,当前任务 func 为第一个加入的任务
 8         window.onload=func();
 9         //作为第一个任务,给 onload 赋值
10     }else{
11     //是,则说明 onload 已被赋值,onload 中先前已有任务加入
12         window.onload=function(){
13             oldonload();
14             func();
15             //作为后续任务,追加到先前的任务后面
16         }
17     }
18 }

下一个元素节点getNextElement

1 function getNextElement(node){
2     if(node.nodeType==1){
3         return node;
4     }
5     if(node.nextSibling){
6         return getNextElement(node.nextSibling);
7     }
8     return null;
9 }
时间: 2024-10-13 05:41:45

【javascript dom读书笔记】 第九章 CSS-DOM的相关文章

读书笔记第九章

第九章HAL是建立在linux驱动之上的一套程序库.这套程序库并不属于linux内核,而是属于linux内核层之上的应用层.可以用来保护不想公开源代码的作者.HAL架构比较简单,其基本原理就是在安卓系统中使用程序库调用位于内核空间的linux驱动,然后安卓应用程序可以通过NDK程序访问HAL中的程序库,或直接在安卓应用程序中访问HAL中的程序库.编写一款支持HAL的linux驱动程序的步骤:1.编写linux驱动,linux驱动的代码要尽量简介,尽可能将业务逻辑放到HAL library中.2.

【javascript 高级程序设计笔记——第九章:事件】

第 9 章:事件 一.事件类型 IE:冒泡.至 document Netscape:捕获.从 document 开始 Mozilla:冒泡 + 捕获.至 window DOM:冒泡 + 捕获. 大部分兼容标准的浏览器至 window 二.监听函数 IE 每个元素和 window 对象有两个方法: [object].attachEvent('onclick', fnHandler); [object].detachEvent('onclick', fnHandler); DOM 语法 [objec

Redis Essentials 读书笔记 - 第九章: Redis Cluster and Redis Sentinel (Collective Intelligence)

Chapter 9. Redis Cluster and Redis Sentinel (Collective Intelligence) 上一章介绍了复制,一个master可以对应一个或多个slave(replica), 在以下的情况下是够用的: 1. master有足够内存容纳所有key 2. 通过slave可以扩展读,解决网络吞吐量的问题 3. 允许停止master的维护窗口时间 4. 通过slave做数据冗余 但复制解决不了自动failover和自动resharding的问题,在以下的情

《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算

对数据进行分组并对各组应用一个函数,是数据分析的重要环节.数据准备好之后,通常的任务就是计算分组统计或生成透视表.groupby函数能高效处理数据,对数据进行切片.切块.摘要等操作.可以看出这跟SQL关系密切,但是可用的函数有很多.在本章中,可以学到: 根据一个或多个键(可以是函数.数组或DataFrame列名)拆分pandas对象 计算分组摘要统计,如计数.平均值.标准差.,或自定义函数 对DataFrame的列应用各种各样的函数 应用组内转换或其他运算,如规格化.线性回归.排名或选取子集等

C primer plus 读书笔记第九章

本章的标题是函数.C的设计原则是把函数作为程序的构成模块. 1.函数概述 函数的定义:函数是用于完成特定任务的程序代码的自包含单元. 使用函数的原因:1.函数的使用可以省去重复代码的编写.2.使得程序模块化,更有利于阅读.修改和完善.以这种方式看待函数有利于把精力投入到程序整体设计而不是实现其细节. 函数同变量一样有多种类型.任何程序在使用函数之前都需要声明该函数类型. 函数参数.函数类型没啥说的,其他语言都会讲到. PS:函数的结尾最好只使用一次return,这样更有利于阅读程序的人明白函数的

《Python基础教程》 读书笔记 第九章 魔法方法、属性和迭代器(上)

构造方法 在Python中创建一个构造方法很容易.只要把init方法的名字从简单的init修改为魔法版本__init__即可: >>> class FooBar: ...     def __init__(self): ...         self.somevar=42 ... >>> f=FooBar() >>> f.somevar 42 给构造方法传几个参数 >>> class FooBar: ...     def __in

Android深度探索读书笔记 第九章

HAL是建立在linux驱动之上的一套程序库,这套程序库属于linux内核层之上的应用层.编写一款支持HAL的linux驱动程序:1.在为linux驱动添加HAL,要想尽量保护敏感数据.Linux驱动的代码就要尽量简洁,尽可能将业务逻辑放到HAL library中.2.HA类就是普通的linux Library文件 ,但这类库文件有一个接口.通过HAL_MODULE_INFO_SYM变量实现.3.service Library也是Linux Library,也就是说service Library

MYSQL必知必会读书笔记 第九章 使用正则表达式过滤数据

正则与LIKE的区别  Mysql的正则表达式仅仅使SQL语言的一个子集,可以匹配基本的字符.字符串. 例如:select * from wp_posts where post_name REGEXP'hello',可以检索出列post_name中所有包含hello的行   REGEXP'.og' .是正则表达式中里一个特殊的字符.它表示匹配一个字符,因此,dog,hog,mog等等都能匹配. 注意: 关于LIKE和REGEXP的区别:LIKE匹配整个列.如果被匹配的文本仅在列值中出现,LIKE

《C++ Primer Plus 6th》读书笔记 - 第九章 内存模型和名称空间

1. 单独编译 1.1 头文件中常包含的内容: 函数原型 使用#define或const定义的符号常量 结构声明 类声明 模板声明 内联声明 1.2 只需将源代码文件加入到项目中,而不用加入头文件.这是因为用#include管理头文件. 1.3 避免多次包含同一个头文件 1 #ifndef COORDIN_H_ 2 #define COORDIN_H_ 3 // place include file contents here 4 #endif 2. 存储持续性.作用域和链接性 1. 存储方案:

《编写可维护的javascript》读书笔记(中)——编程实践

上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. 二.编程实践 1.UI松耦合 第一.将css从javascript中抽离(要改变dom样式数据,应该去操作dom的class名而非dom的style属性,后续要修改此样式只需到对应的css文件中修改而不用修改js文件): 第二.将javascript从HTML中抽离,比如下面的写法是不好的 <!-- 不