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

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

编写程序，从键盘输人 10个整数，之间以一个空格隔开，存放在一维数组中。找出值最大和最小的元素，第一行输出最大值及其所在的元素下标，之间以一个空格隔开；第二行输出最小值及其所在的元素下标，之间以一个空
题目:编写程序,从键盘输人 10个整数,之间以一个空格隔开,存放在一维数组中.找出值最大和最小的元素,第一行输出最大值及其所在的元素下标,之间以一个空格隔开;第二行输出最小值及其所在的元素下标,之间以 ...
js 获取当月的第一天和最后一天日期格式化获取距离上次的时间间隔
1获取当月的第一天 function getCurrentMonthFirst() {var date = new Date()date.setDate(1)return date } 2.获取当月的 ...
原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
Android 获取 OAID ，替换 IMEI （兼容 Android 10获取IMEI问题）
序今天是在北京隔离的第十天 ,下周我就能去公司了 . OAID 简介因传统的移动终端设备标识如国际移动设备识别码(IMEI)等已被部分国家认定为用户隐私的一部分,并存在被篡改和冒用的风险,所以在A ...
输入一个整数矩阵，计算位于矩阵边缘的元素之和。所谓矩阵边缘的元素，就是第一行和最后一行的元素以及第一列和最后一列的元素。
输入格式第 1 行包含两个整数,分别为行数 m 和列数 n,两个整数之间空格隔开. 第 2 行开始有 m 行数据,每行包含 n 个整数,整数之间空格隔开. 输出格式对应矩阵的边缘元素和例如: ...
原生js获取和设置页面垂直滚动高度
最近想用原生js实现一些交互效果,以下代码是返回顶部按钮要用到的一个方法:获取和设置页面垂直滚动高度,如果用jq可以简单实现,用原生js,其实就是要多考虑浏览器的兼容性: /*** 获取&&a ...
用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
原生js实现移动动画，变化动画
初生牛犊不怕虎,想用博客来记录自己以前的一些学习经历,对您有帮助的话请留下你们的赞哦! 话不多说进入正题首先我们应该怎么用原生js实现动画,思路是这样的通过某些方法获取到当前元素的样式属性值,例如 ...
java 获取当月第一天和最后一天获取前一个月第一天和最后一天
2019独角兽企业重金招聘Python工程师标准>>> SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd ...

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

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

下面引用代码说明

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

最新文章

热门文章