Silentash-默尘

前日对iframe的几种文档对象获取方式做了测试，发现一些有趣现象，与大家分享！
假设在页面嵌入如下iframe:
<iframe id="testFrame" name="testFrame" src="#" frameborder="0" border="0" scrolling="no" style="display:none"></iframe>

众所周知，iframe是内嵌窗口，我们可以通过多种方式获取iframe对象及其window\document对象（同域前提），不过哪些是哪些有时会搞不清，测试目的也是为了加深记忆。
比较常见的方法有以下几种，分别测试：

• A:document.getElementById(‘testFrame’)
• B:window.frames['testFrame'];
• C:document.getElementById(‘testFrame’).contentWindow

测试结果(非IE浏览器及IE8)


从测试结果及其比对结果可以看出，A得到的是iframe这个html标签对象，B和C得到的是iframe浏览器对象(window)，有意思的是IE7及以下版本浏览器认为这两者是不恒等的
…

获取DOM节点的方法有很多，如常用的getElementById()、getElementsByTagName()，前者返回一个节点元素，后者返回的是节点的集合。看似相同，实际上其中大有文章：
1、getElementById()
返回的节点可以保存到变量中，即便使用removeChild()方法移除，也能再通过保存的变量使用该节点。
测试下面的代码：
[code=html]

[/code]

2、getElementsByTagName()
返回的值仅仅是对DOM节点地址的引用，如果使用removeChild()删除节点，返回值是会变化的。可能用图示更清晰吧

测试下面的代码加深印象：
[code=html]

• hello world
• hello world2

[/code]

我们都知道，DOM操作的效率是很低的，尤其是用JS操作DOM的时候，性能的优劣更是引发问题和争论的焦点。
这里我们先分析一个很简单的例子：

<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
...
</ul>

假设我们要对上面的1000个或者更多的 li 元素进行抽样显示（隐藏）的控制，照常理来讲，我们会习惯性地去遍历这些元素，加上相应class，或者直接写上内联样式。至少在我看来这是最简单最高效的操作。然而 试验 结果却出乎我的意料，IE和firefox的显示结果都出奇的慢，去网上找了答案：这其实和文档的回流(reflow)很有关系，Nicholas总结了引起reflow的一些因素，其结论就是：

1. 当对DOM节点执行新增或者删除操作时。
2. 动态设置一个样式时（比如element.style.width=”10px”）。
3. 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。

…