如何获取和修改HTML网页标题

>

作为一个标准的HTML文档，网页标题(title)是必不可少的属性。随着浏览器的发展，我们又多了一种访问和修改文档的方式：DOM。所以我们获取网页标题的方式大致可分为以下两种：

1. 通过document对象访问title
   var title = document.title;
2. 通过DOM方式访问title
   var title = document.getElementsByTagName('title')[0];

但是这两种获取方式是截然不同的，document.title这种方式可以直接获得网页标题的字符串副本，它返回一个字符串；然而通过DOM方式获取的则是HTML文档中的title结点对象。

• var TOSTRING = Object.prototype.toString;
  alert(TOSTRING.call(document.getElementsByTagName('title')[0]));// output [object Object]
  alert(TOSTRING.call(document.title)); // output [object String]

我们可以利用结点对象的innerHTML属性输出网页标题：
document.getElementsByTagName('title')[0].innerHTML;
修改网页标题
此处我们讨论IE浏览器在实现时的一个小Bug：我们知道，理论上可以通过DOM修改HTML文档中的任何一个节点，按照这句话，我们当然可以修改HTML文档中的title节点了。但有趣的是，IE浏览器在这个地方实现的比较怪异，具体为：

• IE中不能通过document.getElementsByTagName('title')[0].innerHTML来修改title节点内部的子节点，任何试图通过DOM修改网页标题的方法在IE下都将会引发“未知的运行时错误”的异常
• IE视title节点下不存在任何子节点，即其子节点长度为0，即
  document.getElementsByTagName('title')[0].childNodes.length; // output 0
  但是其innerHTML属性却能正确地返回网页的标题内容

Firefox在此处表现非常完美。不过除FF和IE，其他的浏览器我没有测试过，感兴趣的朋友可以尝试着去试试。（估计都会比IE表现的要好^^）
有句话说的好，老方法不一定就过时，存在多年的document.title在这时凸显了它的优势，因为这个属性既能获取网页标题也能修改标题，同时HTML文档中的title节点也会同步地更新。所以：

• document.title = "new title";
  alert(document.getElementsByTagName("title")[0].innerHTML == "new title");// output true
  

目前对于IE浏览器而言，唯一修改网页标题的方式就是使用document.title这种古老而不过时的方法。同时，这种方法对于其他浏览器也同样适用。

结论
在web开发中，若要处理网页标题的问题，需要注意一下几点：

• 在现实世界中利用document.title来处理所有关于获取和修改网页标题的需求，以实现跨浏览器
• 当网页中有定义多个title元素时（当然这是错误的做法，但浏览器并不会报错），无论哪种使用哪种方法获取网页标题，只有按照DOM文档结构或是文档流的顺序查找所遇到的第一个title元素是有效的标题
• IE错误地认为title节点下无任何子节点，而利用innerHTML属性却可以正确获取文档标题
• 对于IE浏览器，无法通过DOM方式去修改文档标题，任何试图通过DOM修改网页标题的方法在IE下都将会引发“未知的运行时错误”的异常

最佳实践
获取文档标题：var title = document.title;
修改文档标题：document.title = "new title";