原生js取dom节点可能存在的问题

来源：互联网发布：java防止js注入编辑：程序博客网时间：2024/06/05 15:49

在用原生的js的dom指针获取dom节点时，可能出现获取不到的情况，如下面这段html

<ol id="list">   <li>first</li>   <li>second</li></ol>

如果我们用document.getElementById("list").firstChild会得到什么，是<li>first</li>吗？实际上你会发现它并不是。用document.getElementById("list").firstChild.nodeType可以查看到nodeType为3，nodeType=3表明这是一个文本节点，nodeType=1才是元素节点，nodeType=9则表明文档的根节点（<html>元素）。firstChild为什么是文本节点，因为dom指针不仅可以指向元素，也可以指向文本节点，而XML存在一个有争议的地方：空格。这里ol节点后面存在一个换行符，它被认为是一个空格，所以它是一个文本节点，作为ol下面的第一个节点，firtChild自然就指向了它。这个问题在IE9及其他主流浏览器上都存在，在IE8和IE7上则不会有这个问题。

为了避免以上的问题，最好使用jquery或dojo等js框架，或者通过判断nodeType来避免选到文本节点。