2Lazy.org

首先推荐一本比较好的教程，来自于Jeremy Keith的DOM Scripting，当然我读的是翻译之后的中文版本，JavaScript DOM编程艺术。翻译质量来还算不错，最值得推荐的，便是著者将DOM最主要最精华的部分化解在了几个专业级别的案例应用中进行相熟，思路清晰、循序渐进而不嫌枯燥，甚至可说引人入胜。此外，本书也是贯串了标准化、内容与行为分离、预留退路等等能显著提升用户体验的理念与方法，实属难得。对于入门学习来讲，虽有些许难度但是仍然建议初学者参考。

Day.2 I wanna this, I wanna that!

在DOM的世界中，获取元素及其属性和内容是最基本的操作。前一篇也说过，DOM实际上是构建了一个页面内所有元素及其属性、内容的索引，那么，我们通过这个索引来获取到所需要处理的东西无疑是探囊取物般简单。一般来说，通过JavaScript，我们是从两个基本方法开始的——所谓的方法，就是对文档中对象进行操作的手段——这两个方法便是：getElementById()和getElementsByTagName()方法。

作为一种相当接近自然语言的编程语言，这两个方法的意义很明显，通过html中预先赋予的id属性或是html中的结构标签来取得元素。其应用形如：

document.getElementById(”shoplist”)
document.getElementsByTagName(”li”)

其中，第一行的代码获取的，是整个文档中id=”shoplist”的元素，而第二行代码获得的，是整个文档中所有的列表元素（li）。

值得注意的有几点，其一是，（）内的参数，应该是一个字符串，即是说，引号是必需的，无论是单引号还是双引号（我个人比较喜欢双引号，因为在有些编辑器中，两个单引号看起来往往和一个双引号一模一样，在复杂程序中，往往会看错而忘记关闭引号，导致出错）。

而其二便是，“getElement”和“getElements”的区别告诉我们，getElementById()所取得的，是一个单个的元素，而另一个，则（有可能）是复数个的元素（一组元素）。因为在一个符合标准规范的页面中，id属性的值是不能重复的，是一个唯一的值。在疯狂的状态下，我们可以为html页面上每一个元素都赋上一个不同的id值，这样只要用getElementById()方法就可以找到任何需要的元素。但是显然这样的方法是不现实的而且笨重的，同时会造成页面代码的冗余——就像css界泛滥的“div症（divitus）”和“class症（classitis）”一样。id更像是一个挂钩，链接着css，javascript以及DOM。通过getElementById()，getElementsByTagName()以及javascript中循环、判断语句的使用，找到任何的元素都不是问题！

近日里，一句“很黄很暴力”迅速蹿红，替代了“很好很强大”成为2008年第一句流行语。这句话最初出现在2007年12月27日CCTV的《新闻联播》一段抨击网络不良视听的报道中，北京女学生张殊凡语出惊人：“上次我查资料，忽然蹦出一个网页，很黄很暴力，我马上给关了” 。

我本不大看CCTV的官方新闻，所以也并未目睹事发当时的视频片段。如果是在早两年前，这短短4、5秒钟的画面或许根本不会引起人的注意。然而，在随后的几天里，这段视频片段通过网络几乎传染了整个中国，而“很黄很暴力”也迅速蹿红，成为2008年第一流行语。随之蜂拥而至的，是网络上对主角——张殊凡同学的地毯式资料搜查以及各式各样的调侃、鄙视、恶搞甚至漫骂。

不争的事实是，“很黄很暴力”红了，张殊凡也红了。我不知道张殊凡看到的“很黄很暴力”的网页是什么，我却清楚地看到，网络施加在这个13岁的少女身上的暴力。很多网友鄙视这个小姑娘，觉得她当着这着镜头说瞎话。对于张殊凡同学的言行，我无法做出评价，也完全不会去鄙视她什么。作为一个中学生，作为一个优秀中学生代表，作为一个出现在CCTV《新闻联播》中的优秀中学生代表，她的主旋律言论实在是无可厚非。在这样一段主流的新闻报道中，你还能指望她一个小小的中学生说些什么呢？有网友认为在CCTV这样的全国性媒体上说话，“每一句话都要负起责任，如果觉得承担不起，就不要说。”但是，所谓媒体的责任，该是由一个13岁的小女生来承担的吗？如果要说浮夸、虚假、主旋律，其后的那位老师或许所言更甚，而为什么焦点却非要集中在这样一个小姑娘身上？

退一步讲，如果仅仅是对这句话本身所带来的非议进行评论与质疑，也是无可厚非的。但是，伴随而来，恐怕早已经超越了应有的道德底线：

只因这一句“很黄很暴力”，关于张殊凡的视频、图片、恶搞漫画、帖子一夜泛滥成灾；百度贴吧突然出现了张殊凡吧、很黄很暴力吧；猫扑更是把其视频截图放在显著位置，发帖号召人肉搜索，1月1日发出，截至5日凌晨跟帖竟达1200条，足足12页，第一页就有匿名人士把张殊凡的出生年月、所在学校、平时成绩以及受获奖励跟贴出来，精确到出生的医院都清楚。更有甚者，公布了一份2004年的中小学生书法比赛名单，其中就有张殊凡的名字。

这仿佛让我看清了这样一个事实：名义上，这次事件似乎是网友们对于主流媒体造假不满的一次集体性爆发，但实际上，却更像是在猎奇、恶搞、审丑文化、宅男、萝莉控、社区炒作等一系列因素下产生的偏激与过激的集体话语施虐。正因为这次的主角是一个13岁的小姑娘，说出了不那么正常的一句话，其特质刚好符合了整个网络中弥漫的某种不正常心态，所以才能如此迅速地成为事件的焦点。而抓住张殊凡这一句话的辫子，“网民”们孜孜不倦穷追猛打的攻势，早已超越了抨击主流媒体造假这个问题本身，演进为一波又一波集体不负责任的施虐快感。张殊凡无疑成为了主流话语权与网络暴力下被侮辱与被损害的牺牲品！

而在这样的主流话语言语环境的压迫下，真正被侮辱与被损害的，到底究竟又是谁呢？

前几天遇到一个状况，明明打了两个<br />的换行符，上下两行字还是挨在一起，少了一个空行。

第一行

第二行

第三行

不管是IE6还是IE7，状况都是一样，而Firefox里显示很正常。检查了一遍CSS，没发现有什么错误，也没有对br有特殊定义，只好视为IE的bug，只好一条一条CSS来排查。其中有这么一段定义：

p {
font-size: 75%;
text-align: left;
line-height: 165%;
letter-spacing: 0.05em;
}

当把“letter-spacing: 0.05em;”这一句删除时，状况消失。看来，正是这个letter-spacing属性，导致两个br出了问题。将letter-spacing的值放大到10px，再选取p标签中的文字，可以看到，在IE中，第一个br也被加上了letter-spacing值，而且成为了第一行的最后一个字符，换行的功能丧失。只有第二个br，才真正起到了换行的作用。而Firefox中，没有发现br被加上了letter-spacing值的现象，两个br的功能保持正常。

letter-spacing 这个CSS属性，主要是用于微调字符之间的间距，平时并不常用。查了一下官方资料，并未见其有bug的描述。但是这个状况的确在IE系列浏览器中产生了。如果单纯地删掉letter-spacing的定义，固然能解决这个bug，但是对于版面的细微控制又丧失了。于是尝试对br的letter-spacing进行清除：

p br{
letter-spacing:normal;
}

可以看到，在IE中的这个bug解决了。虽然只是一个很不常见的小小的bug，却常常让人半天摸不着头脑，IE系列的浏览器还真是烦人啊。

Intro：什么是DOM ？

DOM（Document Object Model），即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型。在这个理想化的树状模型中，任何一个元素或是内容，都只有自己唯一的一个节点。即便这个文档拥有巨量的内容与繁复的结构，只要它本身语义逻辑没有错误，那么用DOM都可以轻易地将这个文档中的任意一个元素或内容检索出来。简言之，对于网页前端开发人员而言，DOM就是一个用于检索网页内任意元素或内容的索引目录。(参见W3C对DOM的定义)

DOM的发展，与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑，DOM才能正确地发挥其功用。如今，正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。因此，在网页前端开发中，DOM的存在，无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API，成为热门的Ajax应用中不可或缺的组成部分。

Day.1 DOM基础

JavaScript

DOM应用基于浏览器客户端的JavaScript技术，通过JavaScript对文档中的对象（Object）进行检索、操作，几乎可以完成任何我们想要的任务。因此，想要熟练地掌握DOM技术，对于JavaScript的学习也是必不可少的。值得注意的几个要点是：

1. 提前对变量进行声明，尽管这不是必须的。
2. 尽量在自定义函数中使用var关键字声明局部变量。如果不使用var，那么该变量将成为全局变量。在一个庞大的JavaScript程序中，变量的混乱将是一场噩梦。

几个概念

1. D（文档）：当创建了一个网页并将其加载到WEB浏览器中时，DOM便将根据这个网页创建出了一个文档对象。
2. O（对象）：所谓的对象，即一种独立的数据集合。例如文档对象，即是文档中元素与内容的数据集合。与某个特定对象相关联的变量，称之为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。
3. M（模型）：自然是文档对象的树状模型咯。在这个树状模型中，网页中的元素与内容表现为一个个相互连接的节点（node）。

节点类型

1. 元素节点：在HTML中，<body>、<p>、<a>等一系列标签，即是这个文档的元素节点。元素节点，组成了文档模型的语义逻辑结构。
2. 文本节点：包含在元素节点中的内容部分，如<p>标签中的文本等等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。
3. 属性节点：元素节点的属性，如<a>标签的href属性与title属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后并不可见的。而且，属性节点总是被包含于元素节点当中。

id属性

id属性的用途是给网页中的某个元素加上一个独一无二的标识符。可以说，id属性是DOM应用中的一个关键。通过这个独一无二的标识符，JavaSript想要找到文档模型中的任意节点，简直是易如反掌！