-
2009-04-01
什么是DOM?DOM和JavaScript的关系 - [web开发]
这个做了这么久的front-end了，这个问题还没有理解的这么深入，惭愧，惭愧。看看这篇文章吧
什么是DOM?
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。
脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象 （object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层 是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层 的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它 自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。
在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构，树 结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。
万维网协会（World Wide Web Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外，还支持某些 早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。
我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。
DOM和JavaScript
我经常在QQ、MSN和email中被大家问到的“有关JavaScript”的问题，95%其实是DOM的问题。人们在习惯上不爱说DOM，要么就说 JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近刚刚有所降温，一如上世纪末的“DHTML”那样。对于这些热点词汇的产生，我 个人感到非常欣慰，因为每一次都带来人们对JavaScript技术的热捧。下一个热点词汇是什么？也许我们可以炮制一个也说不定……Pseudo- Mashup，如何？）。
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以 如果你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的document.write方法也找不到。
下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址，代码中被标为红色的部分就是DOM。
var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "\n");
}
这样一来哪些是核心JavaScript，哪些是DOM，各自起什么作用，就可以一目了然了。
var anchorTags =
创建了一个名为 anchorTags 的 JavaScript 变量。
document.getElementsByTagName("a")
Document接口是 DOM1核心（DOM1 Core）规范 中定义的第一个接口，而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。
DOM1核心 为Document 接口定义了 getElementsByTagName() 方法。这个方法返回一个节点列表（NodeList） ，也就是一种DOM特有的包含节点的数组，包含了所有符合匹配参数条件的标签，按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个 节点列表。
;
分号是JavaScript里的语句结束符号。
for (var i = 0; i <
这是编程语言里典型的“for循环”。声明了循环变量i，逐个处理anchorTags节点列表里的每一个节点。这也是JavaScript的东西。
anchorTags.length
DOM1 核心 定义了NodeList接口的 length 属性。这个属性返回一个整数，就是节点列表里包含的节点数目。说起来JavaScript 的数组也有一个 length属性。
; i++) {
典型的JavaScript变量增1运算。
alert(
alert() 是一个DOM方法，弹出一个提示框，显示传递给该方法的参数（字符串）。话说这个东西是通称 0级DOM（DOM level 0）或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口（事实上，市场上不存在不支持DOM0的浏览器，只有在某些软件爱好者的收藏品中才能见得到），不属于任何DOM 标准规范。
"Href of this a element is : " +
一个字符串字面量和一个字符串链接符。JavaScript的东西。
anchorTags[i].href
href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性，返回链接（<a>）元素的href属性的值。
在此我们用了像anchorTags[i]这样的用法，这和JavaScript里访问第i个数组项的语法是一样的。语言中性（language- neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() 方法：anchorTags.item(1).href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法，而这也是大多 数人实际在用的方式。
+ "\n");
又一个字符串连接。在字符串的末尾加入一个回车符。
}
“for循环”结束 -
2008-09-24
IE6默认不缓存背景图片的解决 - [web开发]
在IE6下，如果重复使用了一个图片作为背景，那么每用一次就会重新去服务器拉一次。。。给服务器带来巨大的压力。这该死的bug。微软也不出个补丁修改一下。
以下方法可解决(让IE6缓存背景图片):
document.execCommand("BackgroundImageCache", false, true); -
embed
（一）、基本语法：
embed src=url
说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，
Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
示例：<embed src="your.mid">（二）、属性设置：
1、自动播放：
语法：autostart=true、false
说明：该属性规定音频或视频文件是否在下载完之后就自动播放。
true：音乐文件在下载完之后自动播放；
false：音乐文件在下载完之后不自动播放。
示例：<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>2、循环播放：
语法：loop=正整数、true、false
说明：该属性规定音频或视频文件是否循环及循环次数。
属性值为正整数值时，音频或视频文件的循环次数与正整数值相同；
属性值为true时，音频或视频文件循环；
属性值为false时，音频或视频文件不循环。
示例：<embed src="your.mid" autostart=true loop=2>
<embed src="your.mid" autostart=true loop=true>
<embed src="your.mid" autostart=true loop=false>3、面板显示：
语法：hidden=ture、no
说明：该属性规定控制面板是否显示，默认值为no。
ture：隐藏面板；
no：显示面板。
示例：<embed src="your.mid" hidden=ture>
<embed src="your.mid" hidden=no>4、开始时间：
语法：starttime=mm:ss（分：秒）
说明：该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
示例：<embed src="your.mid" starttime="00:10">5、音量大小：
语法：volume=0-100之间的整数
说明：该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。
示例：<embed src="your.mid" volume="10">6、容器属性：
语法：height=# width=#
说明：取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度。
height：控制面板的高度；
width：控制面板的宽度。
示例：<embed src="your.mid" height=200 width=200>7、容器单位：
语法：units=pixels、en
说明：该属性指定高和宽的单位为pixels或en。
示例：<embed src="your.mid" units="pixels" height=200 width=200>
<embed src="your.mid" units="en" height=200 width=200>8、外观设置：
语法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、
volumelever 说明：该属性规定控制面板的外观。默认值是console。
console：一般正常面板；
smallconsole：较小的面板；
playbutton：只显示播放按钮；
pausebutton：只显示暂停按钮；
stopbutton：只显示停止按钮；
volumelever：只显示音量调节按钮。
示例：<embed src="your.mid" controls=smallconsole>
<embed src="your.mid" controls=volumelever>9、对象名称：
语法：name=#
说明：#为对象的名称。该属性给对象取名，以便其他对象利用。
示例：<embed src="your.mid" name="sound1">10、说明文字：
语法：title=#
说明：#为说明的文字。该属性规定音频或视频文件的说明文字。
示例：<embed src="your.mid" title="第一首歌">11、前景色和背景色：
语法：palette=color|color
说明：该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景
色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent
（透明）。 示例：<embed src="your.mid" palette="red|black">12、对齐方式：
语法：align=top、bottom、center、baseline、 left、right、texttop、middle、
absmiddle、absbottom
说明：该属性规定控制面板和当前行中的对象的对齐方式。
center：控制面板居中；
left：控制面板居左；
right：控制面板居右；
top：控制面板的顶部与当前行中的最高对象的顶部对齐；
bottom：控制面板的底部与当前行中的对象的基线对齐；
baseline：控制面板的底部与文本的基线对齐；
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；
middle：控制面板的中间与当前行的基线对齐；
absmiddle：控制面板的中间与当前文本或对象的中间对齐；
absbottom：控制面板的底部与文字的底部对齐。
示例：<embed src="your.mid" align=top>
<embed src="your.mid" align=center> -
2007-11-02
微软发布IE、Firefox、Opera和Safari的JavaScript兼容性研究 - [web开发]
长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间
问题是JavaScript开发者本就不应该需要去检测和回避这些问题。JavaScript应该在所有实现
的存在的差异让许多开发者日夜煎熬。其结果就是很多网页不能在各种浏览器上都有一样的表现，甚至根本
不能跨浏览器。
Microsoft的Jscript团队敏锐地察觉到他们也是这个问题的一部分：
中都有一致的表现。我们相信这是让JavaScript变得更好的第一步。
为了让这种实现上的一致性成为可能，首先需要找出分歧点在哪里。在Jscript团队里的，我们
正在努力查清哪里是浏览器实现的分歧所在，我们的引擎在哪个地方把规范解读错了，是否已
经达到了某种事实兼容型惯例，把这些惯例整理进标准有何价值。作为起点，我们发布了
《JScript Deviations from ES3》的第一份草案。文档的标题《JScript Deviations from ES3》有些误导。这份文档不仅涵盖了IE，也涵盖了来自
Firefox、Opera和Safari的JavaScript实现。这是对规范的一次深入研究，里面就全部4种浏览器，逐点比
较了标准的规定和实际的情形。文章出自：http://www.infoq.com/cn/news/2007/11/JavaScript-Compatibility
查看英文原文：Microsoft Releases JavaScript Compatibility Study for IE, Firefox, Opera, and Safari
-
2007-10-24
如何加快页面加载速度？ - [web开发]
最近做的项目对页面加载的速度有较高要求，所以一直在努力提升页面加载速度
今天看到yahoo在这方面给出的参考，比较全面。
请大家食用。站点加速-by Yahoo!
The Importance of Front-End Performance 前端表现的重要性· 加速网站的最佳办法
01.减少的http请求
02.使用CDN （内容分发网络）
03.指定过期时间
04.压缩结构(GZIP)
05.样式表文件放在顶部
06.脚本放在底部
07.不在css中使用表达式
08.将javascript和css文件分离到单独的文件
09.减少dns查询
10.精简javascript代码
11.避免重定向
12.去掉多余的脚本
13.配置实体标签
14.可缓存的ajax原文有例子更加详细，原文地址：http://developer.yahoo.com/performance/rules.html
-
2007-10-23
[图] 分辨率分布 - 2007年10月9日 - [web开发]
来自于ued.taobao.com 2007年10月9日的数据
PPP - Javascript/Actionscript
Front-End Web Developing(javascript/Aactionscript/CSS/XML)
web前端开发
共1页 1
