原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）

原生js firstChild 获取元素的第一个节点问题

• firstChild 获取当前元素节点下的第一个子节点。
  • 获取到的子节点可能是元素节点，但编程中更可能是注释节点或文本节点。
  • 没有子节点则返回null

下面引用代码说明

下面代码我们需求是获取div的第一个子元素节点。但是结果返回的是文本节点，因为兼容问题，
. 在IE9+和其他标准浏览器中，div与p之间的空白区域被认为是第一个子节点为空白节点（即文本节点），div显示数字3。
. 在IE8和IE8以下浏览器中，div显示数字1，是元素节点。声明 <!DOCTYPE>，与IE9+和其他标准浏览器一致。

<div id="demo">
   <p >我是第1个p</p>
   <p >我是第2个p</p>
   <p >我是第3个p</p>
</div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstChild;
   console.log(first.nodeType);   //3      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

这里我们可以这样做
把空白部分清空（根据具体需求，这里不推荐）

<div id="demo"><p >我是第1个p</p><p >我是第2个p</p><p >我是第3个p</p></div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstChild;
   console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>

也可以使用firstElementChild代替firstChild

<div id="demo">
   <p >我是第1个p</p>
   <p >我是第2个p</p>
   <p >我是第3个p</p>
</div>
<script type="text/javascript">
   let ul = document.getElementById("demo");
   let first =ul.firstElementChild;
   console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
</script>