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

最新推荐文章于 2024-06-21 19:14:28 发布

RickzdWen

最新推荐文章于 2024-06-21 19:14:28 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/wind__snow/article/details/9140923

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在用原生的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来避免选到文本节点。