JavaScript 中那些“DOM小陷阱”

js在操作DOM中存在着很多跨浏览器方面的陷阱，本文将根据实例整理那些大大小小的“陷阱”。

首先DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新是不会影响文档静态内容的。

PS：IE 中的所有 DOM 对象都是以 COM 对象（组件）的形式实现的，这意味着 IE 中的 DOM可能和其他浏览器会有一定的差异。

Node 接口（如图）

firstChild 相当于 childNodes[0]，即第一个孩子节点；

lastChild 相当于childNodes[box.childNodes.length - 1]也就是最后一个孩子节点。

nodeType返回结点的类型

A.元素结点返回1,（那些个标签div,p之类）

B.属性结点返回2,（像class,src这种）

C.文本结点返回3，（像插入在p，div内的文本）

D..文档节点 （document，唯一的文档节点）

innerHTML 和 nodeValue

innerHTML以字符串形式返回该节点的所有子节点及其值

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

   nodeValue 属性是不能用在文档节点和元素节点上面的。

两者区别：

  <p id="example" title="texts">这是一段文本<span>“”</span></p>
  var p = document.getElementById('example');
      p.nodeValue   //null,p是元素节点，所以nodeValue为null
      p.getAttributeNode('id').nodeValue //example，这里获取到p的id属性的属性节点，nodeValue就是它的属性值。

      p.childNodes[0].nodeValue   //"这是一段文本“”" ,p是含有两个子节点的，插入的文本虽然没有标签，但它依然是一个节点。其类型是文本节点，其nodeValue是就是写入在其中的字符串，包含换行和缩进。
     p.innerHTML   //"这是一段文本<span>“”</span>" , 这里innerHTML返回了p所包含的全部的节点的所包含的各种值了，以字符串的形式。

nodeName属性获得结点名称

 ² 对于元素结点返回的是标记名称,如：<a herf><a>返回的是"a"

 ² 对于属性结点返回的是属性名称,如：class="test" 返回的是test

 ² 对于文本结点返回的是文本的内容，如：<p>我是好人</p>，返回的是“我是好人”。

tagName

 ² document.getElementByTagName(tagName)：返回一个数组，包含对这些结点的引用。

 ² getElementsByTagName()：返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

 ² document.getElementsByTagName('*');//获取所有元素

两者区别

<h2 class="title">head</h2> //其中h2是元素节点，class是属性节点，head是文本节点，在这里你可以说h2这个元素节点包含一个属性节点和一个文本节点。其实几乎所有HTML的标签都是元素节点，而id, title, class等则是属性节点，而元素所包含的文本内容则是文本节点。

tagName和nodeName的语义是一样的，都是返回所包含标签的名称，例如上面的h2标签，都是返回h2，但是tagName只能在元素标签上使用，而nodeName则可以在所有的节点上使用。

下面是nodeName在不同节点上的值：

PS：IE 浏览器在使用通配符的时候，会把文档最开始的 html 的规范声明当作第一个元素节点。

² document.getElementsByTagName('li');//获取所有 li 元素，返回数组

² document.getElementsByTagName('li')[0];//获取第一个 li 元素，HTMLLIElement

² document.getElementsByTagName('li').item(0);//获取第一个 li 元素，HTMLLIElement

² document.getElementsByTagName('li').length;//获取所有 li 元素的数目

节点的绝对引用：

Ø 返回文档的根节点：document.documentElement

Ø 返回当前文档中被击活的标签节点：document.activeElement

Ø 返回鼠标移出的源节点：event.fromElement

Ø 返回鼠标移入的源节点：event.toElement

Ø 返回激活事件的源节点：event.srcElement

节点的相对引用：(设当前对节点为node)

Ø 返回父节点：node.parentNode || node.parentElement（IE）

Ø 返回子节点集合（包含文本节点及标签节点）：node.childNodes

Ø 返回子标签节点集合：node.children

Ø 返回子文本节点集合：node.textNodes

Ø 返回第一个子节点：node.firstChild

Ø 返回最后一个子节点：node.lastChild

Ø 返回同属下一个节点：node.nextSibling

Ø 返回同属上一个节点：node.previousSibling

节点信息:

v 是否包含某节点：node.contains()

v 是否有子节点node.hasChildNodes()

创建新节点:

v createDocumentFragment()－－创建文档碎片节点

v createElement(tagname)－－创建标签名为tagname的元素

v createTextNode(text)－－创建包含文本text的文本节点

那么问题来了，，，，，

问题一：Firefox，Chrome、Safari和IE9都是通过非标准事件的pageX和pageY属性来获取web页面的鼠标位置的。pageX/Y获取到的是触发点相对文档区域左上角距离，以页面为参考点，不随滑动条移动而变化。

问题二：IE 中，event 对象有 x, y 属性（事件发生的位置的 x 坐标和 y 坐标）火狐中没有。在火狐中，与event.x 等效的是event.pageX。event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。

offsetX:IE特有，chrome也支持。鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

问题三：scrollTop为滚动条向下移动的距离，所有浏览器都支持document.documentElement。

参照表（+为支持，-为不支持）：

offsetX/offsetY： W3C- IE+ Firefox- Opera+ Safari+ chrome+

x/y：         W3C- IE+ Firefox- Opera+ Safari+ chrome+

layerX/layerY：  W3C- IE- Firefox+ Opera- Safari+ chrome+

pageX/pageY：   W3C- IE- Firefox+ Opera+ Safari+ chrome+

clientX/clientY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

screenX/screenY： W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

查看下方DEMO：

你会发现offsetX在Firefox下是undefined，在chrome和IE则会正常显示。