原生JS如何獲取當前元素屬于父元素第幾個子元素

zoomdong 發布于2019-08-26 13:36 / 3307人閱讀

摘要：從零開始我們可以這樣的代碼獲取到一個元素屬于父元素的第幾個子元素。案例代碼如下通過循環遍歷屬性是否為這個小技巧，就可以獲取到當前元素在父元素中的位置了。

我們經常通過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如何獲取一組元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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