《精通JavaScript》读书笔记(一)

1. 各浏览器的空白节点问题

比如有以下代码:

按我们的想法,body直接子节点的个数应该为2,很遗憾,只有IE才符合我们的想法,FF和chrome则不是这样!

原因是FF和chrome把标签之间的换行也算作一个文本节点了,所以他们的子节点数都会比我们预想的要多;在FF下测试的情况更悬乎,最后一个节点居然是<div>节点,即使Body之间不加任何空白和节点,最后一个节点也是div,我也搞不懂是什么状况。 不过我们不必深究这个,毕竟这个目前来说无伤大雅。

真正需要引起注意的地方是,当我们使用DOM的标准属性时,如:previousSibling, nextSibling, firstChild, lastChild,会得到我们不想要的结果,因此,我们有必要建立几个函数来帮助我们实现相关的遍历功能。

我们在第一次的HTML代码中增加了4个函数来实现我们期望的功能:

注意上面的代码带FF下会有些问题,我发现FF的控制台会隐藏的在body最后添加一个div节点,所以大家要注意一下FF的特例,在IE8和Chrome下测试均正常。

好了,到现在我们已经模拟了DOM内置的相关属性行为,但是每次调用均需要这样调用: next(elem),有没有类似于DOM那样的直接通过成员操作符访问相关属性的方式呢? 在FF和chrome下有,在IE下目前正常的方法还没发现。

下面这个模拟DOM的'.'操作符函数是通过给原生HTMLElement对象增加原型方法来实现的,因为IE下关闭了直接访问HTMLElement的方式,所以下面的方法无法在IE下工作,书中有提供介绍相关的在IE下获得HTMLElement的方式的链接,不过我无法访问这个链接,希望有能够知晓在IE下获得HTMLElement的朋友不吝告知。

每一个HTML标签都是从HTMLElement继承下来的,所以自然继承了原型链中的方法。我们在上面代码的基础上给HTMLElement增加了一个原型方法next:

经过在IE、FF、Chrome下的测试,符合我们的预期结果:)

接下来,作者介绍了一种判断DOM是否可用的函数,不过我个人觉得基本用不到了,现在大部分情况只需要监听window的load事件就可以容易的判断DOM是否加载完毕,在这里就不记录了!

2. 通过类的值查找元素

DOM提供了诸如getElementById,getElementsByTagName等获得相关DOM节点的操作,不过没有提供getElementsClassByName这样的通过类的值来查找节点,而我们经常需要这种函数来实现我们的操作,因此,作者介绍了该函数的简单实现,代码如下:

我在上面代码中先判断document是否存在原生的getElementsByClassName方法,因为我的印象是有部分高级浏览器有这个原生方法,经过测试,在IE、FF、Chrome下均达到了预期要求。

你可能感兴趣的:(JavaScript)