JavaScript DOM 编程艺术（第2版）读书笔记 (9)

2022-07-12 22:41:12

三位一体的网页

结构层：由HTML或XHTML之类的标记语言负责创建；

表示层：由CSS负责完成；

行为层：负责内容应该如何响应事件这一问题。这是由JavaScript语言和DOM主宰的领域。

分离

使用(X)HTML去搭建文档的结构；

使用CSS去设置文档的呈现效果；

使用DOM脚本去实现文档的行为；

不过，在这三种技术之间存在着一些潜在的重叠区域：用DOM可以改变网页的结构，诸如createElement和appendChild之类的DOM方法允许你动态地创建和添加标记。

在CSS上也有这种技术相互重叠的例子。诸如:hover和:focus之类的伪类允许你根据用户触发事件改变元素的呈现效果。改变元素的呈现效果当然是表示层的“*范围”，但响应用户触发事件却是行为层的领地。表示层和行为层的这种重叠形成了一个灰色地带。

CSS正在利用伪类走进DOM的领地，但DOM也有反击之道。你可以利用DOM给元素设定样式。

style属性

element.style.property

我们可以使用style对象的color属性获取某个元素的显示颜色：element.style.color

但是诸如font-family之类的属性的获取方式和color属性略有不同。"font"和"family"之间的连字符与JavaScript语言中的减法操作符相同，JavaScript会把它解释为减号。

当你需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。CSS属性font-family变为DOM属性fontFamily:element.style.fontFamily。

如果把color属性设置为十六进制值：

alert(document.getElementById("example").style.color);

在某些浏览器里，color属性以RGB格式的颜色值（153,153,153）返回。

使用CSS速记属性：你可以把多个样式组合在一起写成一行。比如说，如果声明了font:12px 'Arial',sans-serif，CSS font-size属性将被设置为12px；font-family属性将被设置为'Arial',sans-serif。DOM能够解析这样的速记属性。如果查询fontSize属性，将得到一个12px的值。

但是，通过style属性获取样式有很大的局限性。只能获取到内嵌样式。外部样式和在<head>声明的样式都提取不到。并且内嵌样式不是使用样式的好办法——表现信息和结构混杂在一起了。

现在，你或许认为用DOM去处理CSS样式毫无意义，但还有另一种情况可以让DOM style对象能够正确地反射出我们设置的样式。你用DOM设置的样式，就可以用DOM再把它们检索出来。

设置样式

style对象的各个属性都是可读写的。我们不仅可以通过某个元素的style属性去获取样式，还可以通过它去更新样式。你可以用赋值操作来更新样式：

element.style.property = value;

何时该用DOM脚本设置样式

在绝大多数场合，还是应该使用CSS去声明样式。不过在使用CSS不方便的情况下，还是可以利用DOM对文档的样式做一些小的增强。

CSS2引入了很多与位置相关的选择器，例如：first-child和last-child，而CSS3则定义了诸如：nth-child()和:nth-of-type()之类的位置选择器。尽管如此，在文档的节点树中，为特定位置的某个元素应用样式仍旧不是件容易的事。例如，在CSS3中，你可以使用h1~*选择器为所有h1元素的下一个同辈元素声明样式。问题是，有那么多的浏览器根本不支持CSS3的这些可爱的位置选择器。

现在，CSS还无法根据元素之间的相对位置关系找到某个特定的元素，但这对DOM来说却不是什么难题。我们可以利用DOM轻而易举地找出紧跟在每个h1元素后面的那个元素，并把样式添加给它：

var headers = document.getElementsByTagName("h1");

文档中的下一个节点可以用nextSibling属性查找出来：

headers[i].nextSibling

不过这里真正需要的不是“下一个节点”，而是“下一个元素节点”。下面这个getNextElement函数可以轻松完成这一任务：

function getNextElement(node){

  if(node.nodeType == 1){

    return node;

  }

  if(node.nextSibling){

    return getNextElement(node.nextSibling);

  }

  return null;

}

var elem = getNextElement(headers[i].nextSibling);

elem.style.fontWeight = "bold";

elem.style.fontSize = "1.2em";

最后把以上代码封装到函数styleHeaderSibling中，别忘了安排一些测试去检查浏览器能否理解我们在这个函数里用到的DOM方法。

根据某种条件反复设置某种样式

让表格里的行更可读的常用技巧是交替改变它们的背景色，从而形成斑马线效果，使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3，那就很简单，只需要如下两行样式：

tr:nth-child（odd）{background-color：#ffc；}

tr:nth-child（even）{background-color：#fff；}

如果:nth-child()不可用，要获取同样的效果只好采用另外的技术。JavaScript特别擅长处理重复性任务。用一个while或for循环就可以轻松地遍历一个很长的列表。

响应事件

CSS提供的:hover等伪class属性允许我们根据HTML元素的状态来改变样式。DOM也可以通过onmouseover等事件对HTML元素的状态变化做出响应。那么何时用:hover，何时用onmouseover呢？

最简单的答案就是选择最容易实现的办法。例如，如果只是想让链接在鼠标悬停在其上时改变颜色，就应该选用CSS：

a:hover{color:#c60;}

伪类:hover已经得到绝大多数浏览器的支持——至少在它被用来改变链接的样式时是如此。但如果还想利用这个伪类在鼠标指针悬停在其他元素上时改变样式，支持这种用法的浏览器就没有那么多了。

绝大多数的浏览器，虽然对CSS伪类的支持很不完整，但对DOM却都有良好的支持。在浏览器们对CSS的支持进一步完善之前，在事件发生时用DOM改变HTML元素的样式更切合实际。

<!--

作者：纤锐
出处：http://www.cnblogs.com/beginner2014/p/4186736.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。谢谢合作。

-->

码农公寓