原生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>