正则表达式基本语法介绍

正则表达式的功能实在太强大了~以下为找到的一个关于正则表达式基本语法的介绍：

首先让我们看两个特殊的符号'^'和'$'。他们的作用是分别指出一个字符串的开始和结束。例子如下：

"^The"：表示所有以"The"开始的字符串（"There"，"The cat"等）；
"of despair$"：表示所以以"of despair"结尾的字符串；
"^abc$"：表示开始和结尾都是"abc"的字符串——呵呵，只有"abc"自己了；
"notice"：表示任何包含"notice"的字符串。

象最后那个例子，如果你不使用两个特殊字符，你就在表示要查找的串在被查找串的任意部分——你并不把它定位在某一个顶端。

其它还有'*'，'+'和'?'这三个符号，表示一个或一序列字符重复出现的次数。它们分别表示“没有或更多”，“一次或更多”还有“没有或一次”。下面是几个例子：

"ab*"：表示一个字符串有一个a后面跟着零个或若干个b。（"a", "ab", "abbb",……）；"ab+"：表示一个字符串有一个a后面跟着至少一个b 或者更多；"ab?"：表示一个字符串有一个a后面跟着零个或者一个b；"a?b+$"：表示在字符串的末尾有零个或一个a跟着一个或几个b。

你也可以使用范围，用大括号括起，用以表示重复次数的范围。

"ab{2}"：表示一个字符串有一个a跟着2个b（"abb"）；
"ab{2,}"：表示一个字符串有一个a跟着至少2个b；
"ab{3,5}"：表示一个字符串有一个a跟着3到5个b。

请注意，你必须指定范围的下限（如："{0,2}"而不是"{,2}"）。还有，你可能注意到了，'*'，'+'和'?'相当于"{0,}"，"{1,}"和"{0,1}"。还有一个'|'，表示“或”操作：

"hi|hello"：表示一个字符串里有"hi"或者"hello"；
"(b|cd)ef"：表示"bef"或"cdef"；
"(a|b)*c"：表示一串"a""b"混合的字符串后面跟一个"c"；

'.'可以替代任何字符：

"a.[0-9]"：表示一个字符串有一个"a"后面跟着一个任意字符和一个数字；
"^.{3}$"：表示有任意三个字符的字符串（长度为3个字符）；

方括号表示某些字符允许在一个字符串中的某一特定位置出现：

"[ab]"：表示一个字符串有一个"a"或"b"（相当于"a|b"）；
"[a-d]"：表示一个字符串包含小写的'a'到'd'中的一个（相当于"a|b|c|d"或者"[abcd]"）；
"^[a-zA-Z]"：表示一个以字母开头的字符串；
"[0-9]%"：表示一个百分号前有一位的数字；
",[a-zA-Z0-9]$"：表示一个字符串以一个逗号后面跟着一个字母或数字结束。

你也可以在方括号里用'^'表示不希望出现的字符，'^'应在方括号里的第一位。（如："%[^a-zA-Z]%"表示两个百分号中不应该出现字母）。

为了逐字表达，你必须在"^.$()|*+?{"这些字符前加上转移字符''。

请注意在方括号中，不需要转义字符。

网页加速的14条优化法则

最近，YouMonitor.Us在做Web应用性能优化，在网上发现了文章High Performance Web Sites: The Importance of Front-End Performance，感觉其14条优化法则很实用，操作性很强。因此翻译出来，供大家参考。

Web应用性能优化黄金法则：先优化前端程序(front-end)的性能，因为这是80%或以上的最终用户响应时间的花费所在。

法则1. 减少HTTP请求次数

80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等，的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。

一种减少页面元素个数的方法是简化页面设计。但是否存在其他方式，能做到既有丰富内容，又能获得快速响应时间呢？以下是这样一些技术：

Image maps组合多个图片到一张图片中。总文件大小变化不大，但减少了HTTP请求次数从而加快了页面显示速度。该方式只适合图片连续的情况；同时坐标的定义是烦人又容易出错的工作。

CSS Sprites是更好的方法。它可以组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。

Inline images使用data: URL scheme来在页面中内嵌图片。这将增大HTML文件的大小。组合inline images到你的（缓存）样式表是既能较少HTTP请求，又能避免加大HTML文件大小的方法。

Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数。样式表也可采用类似方法处理。这个方法虽然简单，但没有得到大规模的使用。10大美国网站每页平均有7个脚本文件和2个样式表。当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。

减少HTTP请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的作用。据Tenni Theurer的文章Browser Cache Usage - Exposed!描述，40-60%的日常访问是首次访问，因此为首次访问者加快页面访问速度是用户体验的关键。

法则2. 使用CDN(Content Delivery Network, 内容分发网络)

用户离web server的远近对响应时间也有很大影响。从用户角度看，把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度。但是该从哪里开始呢？

作为实现内容地理分布的第一步，不要试图重构web应用以适应分布架构。改变架构将导致多个周期性任务，如同步session状态，在多个server之间复制数据库交易。这样缩短用户与内容距离的尝试可能被应用架构改版所延迟，或阻止。

我们还记得80-90%的最终用户响应时间花在下载页面中的各种元素上，如图像文件、样式表、脚本和Flash等。与其花在重构系统这个困难的任务上，还不如先分布静态内容。这不仅能大大减少响应时间，而且由于CDN的存在，分布静态内容非常容易实现。

CDN是地理上分布的web server的集合，用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。

一些大型网站拥有自己的CDN，但是使用如Akamai Technologies, Mirror Image Internet, 或 Limelight Networks等CDN服务提供商的服务将是划算的。在Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多。切换到CDN的代码修改工作是很容易的，但能达到提高网站的速度。

法则3. 增加Expires Header

网页内容正变得越来越丰富，这意味着更多的脚本文件、样式表、图像文件和Flash。首次访问者将不得不面临多次HTTP请求，但通过使用Expires header，您可以在客户端缓存这些元素。这在后续访问中避免了不必要的HTTP请求。Expires header最常用于图像文件，但是它也应该用于脚本文件、样式表和Flash。

浏览器（和代理）使用缓存来减少HTTP请求的次数和大小，使得网页加速装载。Web server通过Expires header告诉客户端一个元素可以缓存的时间长度。

如果服务器是Apache的话，您可以使用ExpiresDefault基于当期日期来设置过期日期，如：

ExpiresDefault “access plus 10 years” 设置过期时间为从请求时间开始计算的10年。

请记住，如果使用超长的过期时间，则当内容改变时，您必须修改文件名称。在Yahoo!我们经常把改名作为release的一个步骤：版本号内嵌在文件名中，如yahoo_<st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">2.0.6</st1:chsdate>.js。

法则4. 压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间。从HTTP/1.1开始，web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型，如：

Accept-Encoding: gzip, deflate.

如果Web server检查到Accept-Encoding头，它会使用客户端支持的方法来压缩HTTP响应，会设置Content-Encoding头，如：Content-Encoding: gzip。

Gzip是目前最流行及有效的压缩方法。其他的方式如deflate，但它效果较差，也不够流行。通过Gzip，内容一般可减少70%。如果是Apache，在1.3版本下需使用mod_gzip模块，而在2.x版本下，则需使用mod_deflate。

Web server根据文件类型来决定是否压缩。大部分网站对HTML文件进行压缩。但对脚本文件和样式表进行压缩也是值得的。实际上，对包括XML和JSON在内的任务文本信息进行压缩都是值得的。图像文件和PDF文件不应该被压缩，因为它们本来就是压缩格式保存的。对它们进行压缩，不但浪费CPU，而且还可能增加文件的大小。

因此，对尽量多的文件类型进行压缩是一种减少页面大小和提高用户体验的简便方法。

法则5. 把样式表放在头上

我们发现把样式表移到HEAD部分可以提高界面加载速度，因此这使得页面元素可以顺序显示。

在很多浏览器下，如IE，把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素，那用户只能看到空白页了。Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。

HTML规范明确要求样式表被定义在HEAD中，因此，为避免空白屏幕或闪烁问题，最好的办法是遵循HTML规范，把样式表放在HEAD中。

法则6. 把脚本文件放在底部

与样式文件一样，我们需要注意脚本文件的位置。我们需尽量把它们放在页面的底部，这样一方面能顺序显示，另方面可达到最大的并行下载。

浏览器会阻塞显示直到样式表下载完毕，因此我们需要把样式表放在HEAD部分。而对于脚本来说，脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底部意味着更多内容能被快速显示。

脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个。因此如果您把图像文件分布到多台机器的话，您可以达到超过2个的并行下载。但是当脚本文件下载时，浏览器不会启动其他的并行下载，甚至其他主机的下载也不启动。

在某些情况下，不是很容易就能把脚本移到底部的。如，脚本使用document.write方法来插入页面内容。同时可能还存在域的问题。不过在很多情况下，还是有一些方法的。

一个备选方法是使用延迟脚本（deferred script）。DEFER属性表明脚本未包含document.write，指示浏览器刻继续显示。不幸的是，Firefox不支持DEFER属性。在IE中，脚本可能被延迟执行，但不一定得到需要的长时间延迟。不过从另外角度来说，如果脚本能被延迟执行，那它就可以被放在底部了。

法则7. 避免CSS表达式

CSS表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式。IE，从版本5开始支持CSS表达式，如backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F<st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="8" unitname="a">08A</st1:chmetcnv><st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="0" unitname="”">00”</st1:chmetcnv>)，即背景色每个小时切换一次。

CSS表达式的问题是其执行次数超过大部分人的期望。不仅页面显示和resize时计算表达式，而且当页面滚屏，甚至当鼠标在页面上移动时都会重新计算表达式。

一种减少CSS表达式执行次数的方法是一次性表达式，即当第一次执行时就以明确的数值代替表达式。如果必须动态设置的话，可使用事件处理函数代替。如果您必须使用CSS表达式的话，请记住它们可能被执行上千次，从而影响页面性能。

法则8. 把JavaScript和CSS放到外部文件中

上述很多性能优化法则都基于外部文件进行优化。现在，我们必须问一个问题：JavaScript和CSS应该包括在外部文件，还是在页面文件中？

在现实世界中，使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存。如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。

因此，一般来说，外部文件是更可行的方式。唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式。一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。

法则9. 减少DNS查询次数

DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器。IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。

减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少。避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

法则10. 最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间。两个流行的工具是JSMin 和YUI Compressor。

混淆是最小化于源码的备选方式。象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理。作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程。Dojo Compressor (ShrinkSafe)是最常见的混淆工具。

最小化是安全的、直白的过程，而混淆则更复杂，而且容易产生问题。从对美国10大网站的调查来看，通过最小化，文件可减少21%，而混淆则可减少25%。

除了最小化外部脚本文件外，内嵌的脚本代码也应该被最小化。即使脚本根据法则4被压缩后传输，最小化脚本刻减少文件大小5%或更高。

法则11. 避免重定向

重定向功能是通过301和302这两个HTTP状态码完成的，如：

HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。

一种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，如访问http://astrology.yahoo.com/astrology将被重定向到http://astrology.yahoo.com/astrology/。在Apache下，可以通过Alias，mod_rewrite或DirectorySlash等方式来解决该问题。

法则12. 删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。

不必要的HTTP请求发生在IE下，而Firefox不会产生多余的HTTP请求。额外的JS执行，不管在IE下，还是在Firefox下，都会发生。

一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块。除了防止重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名中，从而实现超长的过期时间。

法则13. 配置ETags

ETags是用于确定浏览器缓存中元素是否与Web server中的元素相匹配的机制，它是比last-modified date更灵活的元素验证机制。ETag是用于唯一表示元素版本的字符串，它需被包括在引号中。Web server首先在response中指定ETag：

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: "<st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="10" unitname="C">10c</st1:chmetcnv>24bc-4ab-457e<st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="1" unitname="C">1c</st1:chmetcnv><st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="1" unitname="F">1f</st1:chmetcnv>"

Content-Length: 12195

后来，如果浏览器需要验证某元素，它使用If-None-Match头回传ETag给Web server，如果ETag匹配，则服务器返回304代码，从而节省了下载时间：

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: "<st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="10" unitname="C">10c</st1:chmetcnv>24bc-4ab-457e<st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="1" unitname="C">1c</st1:chmetcnv><st1:chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="1" unitname="F">1f</st1:chmetcnv>"

HTTP/1.1 304 Not Modified

ETags的问题在于它们是基于服务器唯一性的某些属性构造的，如Apache1.3和2.x，其格式是inode-size-timestamp，而在IIS5.0和6.0下，其格式是Filetimestamp:ChangeNumber。这样同一个元素在不同的web server上，其ETag是不一样的。这样在多Web server的环境下，浏览器先从server1请求某元素，后来向server2验证该元素，由于ETag不同，所以缓存失效，必须重新下载。

因此，如果您未用到ETags系统提供的灵活的验证机制，最好删除ETag。删除ETag会减少http response及后续请求的HTTP头的大小。微软支持文章描述了如何删除ETags，而在Apache下，只要在配置文件中设置FileETag none即可。

法则14. 缓存Ajax

性能优化法则同样适用于web 2.0应用。提高Ajax的性能最重要的方式是使得其response可缓存，就象“法则3增加Expires Header”讨论的那样。以下其他法则同样适用于Ajax，当然法则3是最有效的方式:

法则4. 压缩页面元素

法则9. 减少DNS查询次数

法则10. 最小化脚本文件

法则11. 避免重定向

法则13. 配置ETags.

注重SEO搜索优化的div+css命名规则

要知道，搜索引擎可都是通过抓取你的网站源代码来进行亲密接触的，那么，如何才能更好地让搜索引擎的爬虫更快更准确地觉察到你的内容相关性，增强网站的搜索优化呢？可能从最基本的DIV+CSS的命名规则入手会有意想不到的收获，最基础的就是最有效的。

下面从前端设计的角度整理的DIV+CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。

页头：header
登录条：loginBar
标志：logo
侧栏：sideBar
广告：banner
导航：nav
子导航：subNav
菜单：menu
子菜单：subMenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendLink
页脚：footer

版权：copyRight
1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainNav
子导航：　　subnav
页　脚：　　footer
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainNav(globalNav)
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsideBar
右导航：　　rightsideBar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1Content
菜单容量：　menuContainer
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadCrumb(即页面所处位置导航提示)
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　login
功能区：　　shop(如购物车，收银台)
当前的　　　current
2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

搜集整理来源于网络。

使用Javascript和DOM Interfaces来处理HTML

简介

本文概述了一些强大的，基本的DOM 级别一中的方法以及如何在JavaScript中使用它们。你将会学习到如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。这里的示例代码在IE5中也能正常工作。

这里所提到的DOM方法是文档对象模型规范（级别一）的核心的一部分。DOM 级别一包括对文档进行访问和处理的方法（DOM 1 核心）和专门为HTML文档定义的方法。

Sample1.html概览

这段文字是通过一个实例代码来介绍了DOM的。那么我们从下面的HTML示例来开始吧。这段示例使用了DOM 级别一的方法，从JavaScript动态创建了一个HTML表格。它创建了一个包含了四个单元的小表格，并且在每个单元中含有文本。单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。

<head>
<title>样例代码 - 使用 JavaScript 和 DOM 接口创建一个 HTML 表格</title>
<script>
    function start() {
        // 获得从body的引用
        var mybody=document.getElementsByTagName("body").item(0);
        // 创建一个TABLE的元素
        mytable = document.createElement("TABLE");
        // 创建一个TBODY的元素
        mytablebody = document.createElement("TBODY");
        // 创建所有的单元格
        for(j=0;j<2;j++) {
            // 创建一个TR元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<2;i++) {
                // 创建一个TD元素
                mycurrent_cell=document.createElement("TD");
                // 创建一个文本（text）节点
                currenttext=document.createTextNode("cell is row "+j+", column "+i);
                // 将我们创建的这个文本节点添加在TD元素里
                mycurrent_cell.appendChild(currenttext);
                // 将TD元素添加在TR里
                mycurrent_row.appendChild(mycurrent_cell);
            }
            // 将TR元素添加在TBODY里
            mytablebody.appendChild(mycurrent_row);
        }
        // 将TBODY元素添加在TABLE里
        mytable.appendChild(mytablebody);
        // 将TABLE元素添加在BODY里
        mybody.appendChild(mytable);
        // 设置mytable的边界属性border为2
        mytable.setAttribute("border","2");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

注意我们创建元素和文本节点的顺序：

1. 首先我们创建了TABLE元素。
2. 然后，我们创建了TABLE的子元素--TBODY。
3. 然后，我们使用循环语句创建了TBODY的子元素--TR。
4. 对于每一个TR元素，我们使用一个循环语句创建它的子元素--TD。
5. 对于每一个TD元素，我们创建单元格内的文本节点。

现在，我们创建了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：

1. 首先，我们将每一个文本节点接在TD元素上

   mycurrent_cell.appendChild(currenttext);

2. 然后，我们将每一个TD元素接在他的父TR元素上。

   mycurrent_row.appendChild(mycurrent_cell);

3. 然后，我们将每一个TR元素接在他们的父TBODY元素上。

   mytablebody.appendChild(mycurrent_row);

4. 下一步,我们将TBODY元素接在他的父TABLE元素上

   mytable.appendChild(mytablebody);

5. 最后，我们将TABLE元素接在他的父元素BODY上。

   mybody.appendChild(mytable);

请记住这个机制。你将会在W3C DOM编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。

下面是由javascript代码生成的HTML代码：

...
<TABLE border=5>
<tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr>
<tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr>
</TABLE>
...

下面是由代码生成的TABLE及其子元素的DOM对象树：

你可以只用一些DOM方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。在图1的TABLE树中，TABLE有一个子元素TBODY。TBODY有两个子元素。每一个TR又含有两个子元素（TD）。最后，每一个TD有一个子元素--文本节点。

基本DOM方法 - Sample2.html

getElementByTagName是文档接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法getElementByTagName。用来通过它们的标签名称（tag name）来获得某些元素的一系列子元素。你可以使用的方法是：element.getElementsByTagName(tagname)。

getElementsByTagName返回一个有特定标签名称（tagname）的子元素列表。从这个子元素列表中，你可以通过调用item和你想得到的元素的下标，来获得单个元素。列表中第一个元素的下标是0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。 OK，我们下一个话题中要继续对我们的表格例子进行修改。下面的示例更加简单，它意图展示一些基础的方法：

<html>
<head>
<title>样例代码 - 使用 JavaScript 和 DOM 接口操作 HTML 表格</title>
<script>
    function start() {
        // 获得所有的body元素列表（在这里将只有一个）
        myDocumentElements=document.getElementsByTagName("body");
        // 我们所需要body元素是这个列表的第一个元素
        myBody=myDocumentElements.item(0);
        // 现在，让我们获得body的子元素中所有的p元素
        myBodyElements=myBody.getElementsByTagName("p");
        // 我们所需要的是这个列表中的第二个单元元素
        myP=myBodyElements.item(1);
    }
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

在这个例子中，我们设置变量myP指向DOM对象body中的第二个p元素：

1. 首先，我们使用下面的代码获得所有的body元素的列表，因为在任何合法的HTML文档中都只有一个body元素，所以这个列表是只包含一个单元的。

   document.getElementsByTagName("body")

2. 下一步，我们取得列表的第一个元素，它本身就会body元素对象。

   myBody=myDocumentElements.item(0);

3. 然后，我们通过下面代码获得body的子元素中所有的p元素

   myBodyElements=myBody.getElementsByTagName("p");

4. 最后，我们从列表中取第二个单元元素。

   myP=myBodyElements.item(1);

一旦你取得了HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加：

myP.style.background="rgb(255,0,0)";
// 设置inline的背景色风格

使用document.createTextNode(..)创建文本节点

使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。

myTextNode=document.createTextNode("world");

这表示你已经创建了一个TEXT——NODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对myTextNode的引用都指向这个节点对象。如果想将这个文本插入到HTML页面中，你还需要将它作为其他节点元素的子元素。

使用appendChild(..)插入元素

那么，通过调用myP.appendChild([node_element])你可以将这个元素设置成为第二个P的一个新的子元素。

myP.appendChild(myTextNode);

在测试了这个例子之后，我们注意到，hello和world单词被组合在了一个：helloworld。事实上，当你看到HTML页面时，hello和world两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式--是两个节点。第二个节点是一个TEXT_NODE类型的新节点，也是第二个P标签的第二个子元素。下面的图标将在文档树种展示最近创建的文本节点对象。

createTextNode 和 appendChild 是在单词hello和world之间设置空格的一个简单方法。另外一个重要的注意事项是：appendChild方法将把新的子节点接在最后一个子节点之后，正如world被加在了hello之后。所以如果你想在hello和world中间添加一个文本节点的话，你应该使用insertBefore来提到appendChild.

使用文档对象和createElement(..)方法创建新的元素

你可以使用createElement来创建新的HTML元素或者任何其它你想要的元素。比如，如果你想要创建一个新的P作为BODY的子元素，你可以使用前面例子的myBody并给它接上一个新的元素节点。使用 document.createElement("tagname")可以方便的创建一个节点。如下：

myNewPTAGnode=document.createElement("p");
myBody.appendChild(myNewPTAGnode);

使用removeChild(..)方法移除节点

每一个节点都可以被移除.下面的一行代码移除了包含在myP(第二个p元素)下面的文本节点world。

myP.removeChild(myTextNode);

最后你可以将myTextNode（那个包含了world单词的节点）添加给我们最后创建的P元素：

myNewPTAGnode.appendChild(myTextNode);

被修改的对象树的最后的状态如下：

动态创建一个表格(回到Sample1.html)

这一段落的剩余部分我们将继续修改我们sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。

复习一下HTML表格结构

创建元素节点并将他们插入到文档树中

sample1.html中创建表格的基本步骤是：

• 获得body对象（文档对象的第一个元素）
• 创建所有元素。
• 最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的sample1.html

在start函数的最后，有一行新代码。使用另一个DOM方法（setAttribute）来设置表格的边界属性。setAttribute有两个参数：属性的名称和属性的值。你可以使用这个方法来设置任意元素的任意属性。

<head>
<title>示例代码 - 使用Javascript和DOM Interfaces来处理HTML</title>
<script>
    function start() {
        // 获得body的引用
        var mybody=document.getElementsByTagName("body").item(0);
        // 创建一个标签名称为TABLE的元素
        mytable = document.createElement("TABLE");
        // 创建一个标签名称为在TBODY的元素
        mytablebody = document.createElement("TBODY");
        // 创建所有的单元格
        for(j=0;j<2;j++) {
            // 创建一个标签名称为在TR的元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<2;i++) {
                // 创建一个标签名称为在TD的元素
                mycurrent_cell=document.createElement("TD");
                // 创建一个文字节点
                currenttext=document.createTextNode("cell is row "+j+", column "+i);
                // 将文字节点添加到TD单元格内
                mycurrent_cell.appendChild(currenttext);
                // 将TD单元格添加到TR行中
                mycurrent_row.appendChild(mycurrent_cell);
            }
            // 将TR行添加到TBODY中
            mytablebody.appendChild(mycurrent_row);
        }
        // 将TBODY添加到TABLE中
        mytable.appendChild(mytablebody);
        // 将TABLE添加到BODY中
        mybody.appendChild(mytable);
        // 设置边界属性为2
        mytable.setAttribute("border","2");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

使用CSS和DOM来操作表格

从表格中获得一个文字节点

示例介绍了两个新的DOM属性。首先，使用childNodes属性来获得mycel的孩子节点列表。childNodes列表包括所有的孩子节点，无论它们的名称或类型是什么。像getElemengByTagName一样，它返回了一个节点列表。不同的是，getElementByTagName只返回指定标签名称的元素。一旦你获得了返回的列表，你可以使用item(x)方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的myceltext中保存了一个文字节点。然后，运行这个例子并观察结果，他创建了一个新的文字节点，这个文字节点的内容是myceltext的值，并且将这个文字节点作为了BODY元素的一个孩子。

如果你的对象是一个文字节点，你可以使用data属性来回收（retrieve）节点的文字内容

mybody=document.getElementsByTagName("body").item(0);
mytable=mybody.getElementsByTagName("table").item(0);
mytablebody=mytable.getElementsByTagName("tbody").item(0);
myrow=mytablebody.getElementsByTagName("tr").item(1);
mycel=myrow.getElementsByTagName("td").item(1);
// mycel的孩子节点列表的第一个元素
myceltext=mycel.childNodes.item(0);
// currenttext的内容是myceltext的内容
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);

获得一个属性的值

在sample1的最后我们在mytable对象上调用了setAttribute。这个调用是用来设置表格的边界属性的。然后是用了getAttribute方法来获得一个属性的值：

mytable.getAttribute("border");

通过改变样式属性来隐藏一列

一旦你在你的javascript变量中保存了一个对象，你就可以直接为它设置样式属性了。下面的代码是修改后的sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，样式属性是被直接设置的。

<html>
<body onload="start()">
</body>
<script>
    function start() {
       var mybody=document.getElementsByTagName("body").item(0);
       mytable = document.createElement("TABLE");
       mytablebody = document.createElement("TBODY");
       for(j=0;j<2;j++) {
           mycurrent_row=document.createElement("TR");
           for(i=0;i<2;i++) {
               mycurrent_cell=document.createElement("TD");
               currenttext=document.createTextNode("cell is:"+i+j);
               mycurrent_cell.appendChild(currenttext);
               mycurrent_row.appendChild(mycurrent_cell);
               // 当column为0时，设置单元格背景色；column为1时隐藏单元格
               if(i==0) {
                   mycurrent_cell.style.background="rgb(255,0,0)";
               } else {
                   mycurrent_cell.style.display="none";
               }
           }
           mytablebody.appendChild(mycurrent_row);
       }
       mytable.appendChild(mytablebody);
       mybody.appendChild(mytable);
    }
</script>
</html>

网站SEO优化10忌

　　搜索引擎是大多数网站流量的主要来源，因此优化是每一个网站的必修课。SEO必须掌握好度，优化得不够，则效果不理想，优化过度，则会被搜索引擎惩罚。优化的技巧，我不甚了解，   
不过因多次被百度惩罚，我也逐渐发现了一些优化的忌讳。
　　1.关键词堆砌。这个大家应该都知道了吧，但是如何才算堆砌，就不好说了，我感觉文章首段关键词的出现次数最好不要超过两次，否则就会有作弊嫌疑，尤其是新站，应该尽量避免太过明显的优化，一些网站就是因为刚收录时优化过度，被百度惩罚，至今还未恢复。
　　2、采集。搜索引擎是喜新厌旧的，如果一个网站的内容都是在网络上高度重复的，那么排名绝对不会好，采集的网站百度会收，但是收录后会被慢慢的k掉，而且很少会给改过自新的机会，哪怕之后天天更新原创文章，也无济于事。但是这并不意味着不可以采集，我们可以针对采集来的文章做一些更改，比如替换内容、更改标题等。
　　3、关键词选择错误。流量过低的关键词，优化得再完美，也无济于事，而关注度很高的关键词，就算排在第二页，也会带来很大的流量。
　　4.网站代码过长而杂乱。蛛蛛是从网页代码读取网页内容的，如果代码过长，蜘蛛将很难知道哪为重点甚至会截断蜘蛛的爬行。
　　5.网页标题频繁更改。一个不稳定的网站，百度是不会喜欢的，我的站就因为频繁更改标题而被百度拔毛，所以，在建站之初，就应该把网站的各个细节都考虑好，一旦建立，便不再轻易更改。
　　6.页面全Flash或图片。Flash和图片固然有吸引力，但不是相对用户需求及搜索引擎而言的。搜索引擎蜘蛛是不能读取Flash内容。
　　7.众多垃圾链接、链接惩罚域名。使用群发软件群发垃圾链接，认为链接越多总是更好的，其实搜索引擎要的是链接的质量。
　　8.网站主题与内容不符。网站内容和主题相剥离，搜索自然不会喜欢，不过有一个常用方法，在内容页的title里加上网站的名称，这对网站主页的排名有一定作用。
　　9.和作弊网站在同一服务器上。在买空间之前，应该针对空间做一些考察，可以向客服索要空间的ip，查一下这个ip下都有些什么网站，如果多数站点都没有被收录，那最好放弃这个空间了。
　　10.不可太急躁。欲速则不达，心急吃不了热豆腐，seo必须要有一个好心态，尤其百度对新站收录极慢，一个针对百度优化的新站，必须做好打持久战的准备。搜索引擎为何会受到欢迎，就是因为用户能在上面找到需要的东西，搜索引擎对网站的要求也同样如此，做seo也应该多站在用户的角度考虑，seo就是用户体验，搜索引擎的算法是经常改进的，作弊的网站，就算能一时得逞，但终有一天，会被k掉，因为搜索越来越成熟。所以，在做站的时候，应该多了解seo的忌讳，避免触底线。