如何獲得一個HTML元素

我想獲得一個HTML元素的確切位置，並輸出該元素的地址的準確位置，邏輯是這樣的。如何獲得一個HTML元素

<div id="foo"> 
    <article> 
     <div> 
      <p>you found me</p> 
     </div> 
    </article> 
<div>

所以這是樣品HTML，現在可以說，用戶點擊該標記的東西，在這種情況下，可以說，用戶點擊「P」標籤。如何編寫我的JavaScript來輸出該'p'標籤的地址。

 function getAddress(){ 
     // code here 
     console.log('the user click the ') 
     console.log(address) 
    }

所需的輸出：

 // Console 
     log: the user click the 
     log: #foo > article > div > p

來源

2017-07-18 Marven Wilson S Donque

什麼背後的任何搜索算法的邏輯是什麼？或者你想回溯到父母帶有ID？ – Omi

@omi基本上我要回溯到父帶有ID –

事情是這樣的：

$(document).ready(function() { 
    var path = ''; 
    $('#foo').on('click', '*', function (e) { 
     path = $(this).prop("tagName"); 
     $(this).parents().each(function() { 
      path = $(this).prop("tagName") + ' > ' + path; 
     }); 
     alert(path); 
     e.stopPropagation(); 
    }); 
})

Sample fiddle

UPDATE

要添加id屬性：

$(document).ready(function() { 
    var path = ''; 
    $('#foo').on('click', '*', function (e) { 
     path = $(this).prop("tagName").toLowerCase(); 
     $(this).parents().each(function() { 
      let id = $(this).attr('id'); 
      path = $(this).prop("tagName").toLowerCase() + (typeof id != 'undefined' ? '#'+id : '') + ' > ' + path; 
     }); 
     alert(path); 
     e.stopPropagation(); 
    }); 
});

Updated fiddle

UPDATE基於MDN

在XML（大寫標籤名稱

和基於XML的語言，如XHTML），tagName保留大小寫。在標記爲HTML文檔的DOM樹中的HTML元素上，tagName以大寫形式返回元素名稱。 tagName的值與nodeName的值相同。

來源：https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName

來源

2017-07-18 23:30:48

這正是我想要的，但爲什麼是字符串全部大寫？ –

太感謝你了..先生... –

@MarvenWilsonSDonque，看到我更新的答案，你對大寫標籤名稱的問題。 –

-1

我使用jQuery和創造了這個代碼段。點擊p標籤

jQuery("p").click(function(){ 
 
    var parentEls = $(this).parents() 
 
    .map(function() { 
 
    return this.tagName; 
 
    }) 
 
    .get() 
 
    .join(">"); 
 
    alert(parentEls); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo"> 
 
    <article> 
 
     <div> 
 
      <p>you found me</p> 
 
     </div> 
 
    </article> 
 
<div>

來源

2017-07-18 23:29:28

如何獲得一個HTML元素

回答

相關問題