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

2024-04-27 14:14:40

字体：大中小

来源：转载

供稿：网友

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

三位一体的网页

结构层：由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方法。