獲取元素的索引/位置及其在 Javascript 中的名稱 [DOM]

Question

我嘗試在容器中找到 div 元素的索引位置和名稱，但是每當我嘗試時，它都沒有給我正確的輸出。

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <div id="container">
    <div>This is div</div>
    <p>This is Paragraph</p>
    <script>
    let x = document.getElementById("container")
    let y = x.childNodes;
    for(let i =0; i < y.length ; i++)
    {
        if(y[i].nodeType == 2)
        {
            alert(y[i].nodeName);
            }
    }
    </script>
    </body>
    </html>

Answer 1

nodeType 屬性以數字形式返回指定節點的節點類型。

如果節點是元素節點，則 nodeType 屬性將返回 1。

如果節點是屬性節點，則 nodeType 屬性將返回 2。

如果節點是文本節點，則 nodeType 屬性將返回 3。

如果節點是注釋節點，則 nodeType 屬性將返回 8。

 let x = document.getElementById("container") let y = x.childNodes; for(let i =0; i < y.length ; i++) { if(y[i].nodeType == 1) { alert(y[i].nodeName); } }

 <!DOCTYPE html> <html> <head> </head> <body> <div id="container"> <div>This is div</div> <p>This is Paragraph</p> </div> </body> </html>

Answer 2

基於 MBadrian 的解決方案，就您設法獲取 nodeName 而言，您可以根據節點名稱設置條件，現在如果您想獲取特定節點，您可以獲取它們的文本內容並基於該名稱設置您的條件...下面的代碼與 MBadrian 的答案相同，只是我替換了 nodeName 的返回值並返回了 textContent

  let x = document.getElementById("container")
    let y = x.childNodes;
    for(let i =0; i < y.length ; i++)
    {
      console.log(y[i].nodeType)
        if(y[i].nodeType == 1)
        {
            alert(y[i].textContent);
            }
    }

Answer 3

2 個標簽之間的空格、換行和制表符被視為一個文本節點。 所以在內部DIV之前有一個節點。 同樣，內部 DIV 和 P 元素之間有一個文本節點。

檢查 for 循環內每個子節點的 'tagName' 屬性也將起作用。 文本節點沒有 'tagName' 屬性。

<div id="container">
<div>This is div</div>
<p>This is Paragraph</p></div>
<script>
let x = document.getElementById("container")
let y = x.childNodes;
for(let i =0; i < y.length ; i++) {
    if(y[i].tagName && (y[i].tagName.toUpperCase() == "DIV" || y[i].tagName.toUpperCase() == "P")) {
        alert(i + ": " + y[i].innerHTML);
    }
}

獲取元素的索引/位置及其在 Javascript 中的名稱 [DOM]

問題描述

3 個解決方案

解決方案1
1 2020-01-26 12:18:49

解決方案2
1 2020-01-26 13:09:29

解決方案3
1 已采納 2020-01-26 13:44:47

獲取元素的索引/位置及其在 Javascript 中的名稱 [DOM]

問題描述

3 個解決方案

解決方案1 1 2020-01-26 12:18:49

解決方案2 1 2020-01-26 13:09:29

解決方案3 1 已采納 2020-01-26 13:44:47

解決方案1
1 2020-01-26 12:18:49

解決方案2
1 2020-01-26 13:09:29

解決方案3
1 已采納 2020-01-26 13:44:47