Domety » html

HTML DOM实战——查找指定链接

DDBug — Thu, 01 Apr 2010 04:39:02 +0000

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

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

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


第一篇日志标题
第二篇日志标题
......
第十篇日志标题

通过对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模型的操作还很生疏，更深层次的东西暂时还无法和大家分享，我会在第一时间把实战经验分享给大家，谢谢关注。

HTML DOM 模型

DDBug — Tue, 30 Mar 2010 09:15:46 +0000

本文收集整理自http://w3schools.com,简单的介绍一下HTML DOM模型。

HTML DOM模型可以用下面的html tree进行概括：

上图中的每一个方框都代表一个节点(Node)。如果你想动态的更改页面内容，只需要更改相应的节点即可。如果你打开任何一个网站，查看其源代码，会发现这个模型无处不在。

下面是节点之间的关系图

节点是一个页面的根节点，当然你可以把上图中的节点替换成其它节点，也可以找到类似的关系。通过firstChild、lastChild、nextsibling、previousSibling、childNodes、parentNode等节点属性，可以遍历整个页面文档。

常用的节点属性和方法

我们假设x是一个一个节点对象，下面是一些常用的属性：

x.innerHTML —— 可以获取或更改x的文本内容
x.nodeName —— x的节点名称，只读，不可改写。如果x是HTML元素，返回的就是元素名(如p,h1,a等)，如果x是HTML标签的属性，返回的就是属性名(如href、title等)。
x.nodeValue —— 节点值。如果x是HTML元素,nodeValue无意义。如果果x是HTML标签的属性，则表示属性值。如果x是文本节点(Text)，则表示文本的内容。
x.parentNode —— x的父节点
x.childNodes —— x 的子节点集合
x.attributes —— x的属性集合

另外还有一个nodeType属性，表示节点类型：

Element type	NodeType
Element	1
Attribute	2
Text	3
Comment	8
Document	9

下面是一些常用的方法：

x.getElementById(id) – 根据元素id获取节点对象
x.getElementsByTagName(name) – 根据标签名获取所有元素的集合
x.appendChild(node) – 给x插入一个子节点
x.removeChild(node) – 从x中删除一个子节点

最后再了解一下HTML DOM中的事件

页面中的每一个元素都有触发脚本语句或函数的事件。比如我们点击页面中的某个按钮的时候，就触发了相应的”点击”事件，如果我们为这个”click”事件注册了脚本语句或函数的话，这个时候就会执行注册的脚本语句或函数。

以下列举几个事件触发的例子：

当鼠标点击的时候，触发”onclick”
当加载完页面或图片的时候，触发”onload”
当鼠标经过指定的区域的时候，触发”onmouseover”
当元素获得焦点的时候，触发”onfocus”
当按下键盘的时候，触发”onkeydown”,”onkeypress”,”onkeyup”

更多事件请参考http://w3schools.com/jsref/dom_obj_event.asp

为网站添加网址图标favicon.ico

DDBug — Sun, 01 Nov 2009 09:01:01 +0000

今天终于有时间把domety的图标设计好，并显示在了网站地址前面。如果你还不知道怎么把自己的图标放到网站上，今天DDBug就和你分享一下实现方法。

制作图标

首先是准备一张ico图标，你可以从网上搜索，不过最好是按照自己的想法制作一个自己的图标，如果你不会作图，可以找身边的朋友帮你做个。我的做法是先用photoshop做一个48*48的png格式的图标，然后再转换成ico格式。目前已经有很多网站提供在线转换ico图标的服务，比如这个网站http://tools.dynamicdrive.com/favicon/，它转换的效果不错，而且还支持同时包含32*32和48*48大小的图标

转换后

然后把图标下载到本地

上传图标

然后把图标上传到网站的根目录（图标文件的文件名一定要是favicon.ico）,这时候，一般来说你的图标应该可以显出效果了。可能你不想把favicon放在网站的根目录下，而是其它文件夹里(比如images目录下)，这样也是可以的，不过你需要在每个网页的头部之间添加一句代码

以wordpress为例，比如我把favicon.ico文件放在了主题模板的目录下面，那么我就在网页的头部添加了如下代码：

到这里其实我们的工作已经基本完成了，接下来就打开你的网站，测试一下有没有效果

如果你在打开你的网站的时候，没有在地址前面看到你的favicon图标，你可以先到下面这个网站测试一下

http://www.html-kit.com/favicon/validator/

你可以根据测试结果查找问题出在了哪里。如果在这里测试通过，都没有问题，那么就是浏览器保存的临时文件引起的。这时候其实你的图标已经生效了，只是你自己看不到而已。你可以把你的网址发给你的朋友，让你的朋友看一下有没有图标。或者删除你电脑中的网页临时文件，重新打开你的网站，一般来说就能看到效果了。这一步的处理方法由于浏览器的不同而不同。