Domety

今天又给页面添加了一些快捷键，主要是想加深一下对DOM的了解。到目前为止，本站支持以下快捷键操作

• 在首页或者分类列表页面，按数字0键直接进入第一篇文章，1进入第二篇文章，以次类推。
• 日志内容页面，按←或p键跳转到上一页，按→或N键跳转到下一页

我的处理方式是响应按键事件的时候，查找对应的链接地址，然后跳转。这个处理过程根据页面文档的结构不同而不同，不过思想是一样的。以本站的首页为例，日志标题列表的结构如下：

<div id="posts">
<h2><a href="第一篇日志链接">第一篇日志标题</a></h2>
<h2><a href="第二篇日志链接">第二篇日志标题</a></h2>
......
<h2><a href="第十篇日志链接">第十篇日志标题</a></h2>
</div>

通过对HTML DOM模型的理解，获取连接地址的方法如下：

var elems = document.getElementById("posts").getElementsByTagName("h2");
var elem = elems[i].childNodes[0];
if(elem){
var lin = elem.href;
window.location.assign(lin);
}

其中i的值为0~9,由按键决定。这里我们用到了document对象以及getElementById、getElementByTagName方法，还有childNodes和href属性。elems保存Posts下的所有h2元素集合，然后再通过childNodes属性来得到a标签元素，也就是一个Anchor对象，其href属性就是我们要查找的链接地址。最后通过window.location的assign方法，重新加载页面。如果要在新窗口中打开页面的话，请使用window.open()方法。

查找上一篇文章和下一篇文章链接的方法是一样的，主要分析页面文档的结构。

目前对DOM模型的操作还很生疏，更深层次的东西暂时还无法和大家分享，我会在第一时间把实战经验分享给大家，谢谢关注。