原生JS如何获取当前元素属于父元素第几个子元素

zoomdong 发布于2019-08-26 13:36 / 3309人阅读

摘要：从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。案例代码如下通过循环遍历属性是否为这个小技巧，就可以获取到当前元素在父元素中的位置了。

我们经常通过document.getElementById 方法来获取到一个元素，这个时候我们经常需要有一个需求，那就是如何判断这个元素在父元素中的位置。

包含文本和注释节点
原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性，额外需要注意的是该属性会遍历text节点，即回车键。

从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。

var child = this;
while( (child = child.previousSibling) != null ) 
    i++;

案例代码如下：

Html:

123
a
b
c

JS:

var child = document.getElementById("a");
var i = 0;
while((child = child.previousSibling) != null) i++;
console.log(i) //console 1

通过循环遍历previousSibling 属性是否为null这个小技巧，就可以获取到当前元素在父元素中的位置了。

不包含文本节点和注释节点
实现代码如下：

var child = document.getElementById("a");
var parent = child.parentNode;
var index = Array.prototype.indexOf.call(parent,child);
console.log(index)//1

原文链接：https://www.pipipi.net/code/9...

云服务器 GPU云服务器 js取原生当前元素原生js获取元素获取父级元素 js如何获取一组元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109139.html

CSS 选择器

摘要：加号相连的两个选择器实现同级紧邻的元素选择的功能。我最好的朋友是米老鼠。样式紧挨的第一个同级元素是我最好的朋友是米老鼠。注意区分新增的属性选择器。是中新增的选择器，用于标示当前处于活动的锚标记。选择器的取反，这个很好理解。概览在 CSS 中，选择器用于选择需要添加样式的元素。 CSS 选择器非常丰富，现将 CSS 1 - 3 目前所有的选择器列举如下。选择器例子例子描述 ...

cnio 2019-08-28 18:18 评论0 收藏0
【面试系列】之四：关于原生dom操作

摘要：指向后一个同辈元素的元素版。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。生成结束秒钟后，将个颠倒过来，内容也就变成了。之四：关于原生dom操作下周被内推了百度糯米的面试，决定趁这个周末恶补下原生的js基础，感觉自己被jQuery惯坏了吧！前两天听首页部同组的大牛师兄说：其实还是js基础重要，不要盲目追求新技术，基础练好了就像把自己的内功修炼好，内功扎实才能修炼好武功秘...

hatlonely 2019-08-20 10:23 评论0 收藏0
js--原生js DOM操作(增删改差)

摘要：得到空白节点之后，移到父节点上，删除子节点如果和在获取节点的过程中遇到 js--DOM操作 dom获取 DOM获取 //参数是字符串 document.getElementById() 获取特定 ID 元素的节点 document.getElementsByTagName() 获取相同元素的节点列表 document.getElementsByName() 获取相同名称的节点列表 d...

zhangrxiang 2019-08-26 11:49 评论0 收藏0
基于JS快速生成各种网格布局工具Grid介绍

摘要：看了几篇博客，了解了它的几个常用属性后，可以快速生成一个网格布局。同样是出于使用动态生成布局的需要，诞生了这个小工具。作者：云荒杯倾写在前面这两天了解了一下css的grid布局，发现确实很好用。看了几篇博客，了解了它的几个常用属性后，可以快速生成一个网格布局。相较于传统的float、定位等显得更成体系，更规范，不需要一些hack做法。虽然grid布局已经很好，前端工程师中有一些...

scwang90 2019-08-22 13:47 评论0 收藏0