javascript - 找出JS代码遍历到DOM中的哪个元素

对于dom操作，我们编写如下代码。
为了首先进行dom操作，我们必须遍历DOM元素。
我想知道如何弄清楚我们编写的代码是遍历DOM中的哪个元素的。

作为下面的示例代码

$(document).on('click', '.block_docmanage', function (event)
{
  cl1ele = $(this).closest('.panel.panel-default.level1').find('.panel-headinglevel1 > h4 > .docmgCategoryBlock');
}):

最佳答案

您可以通过以下方法获取DOM中元素的XPath。它将发出类似/html/body/div[2]/div[1]/h4/div[3]...的警告（DOM中元素的实际路径）

function getXPath( element ) {
    var val = element.value;
    var xpath = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode ) {
        var id = $(element.parentNode).children(element.tagName).index(element) + 1;
        id > 1 ? (id = '[' + id + ']') : (id = '');
        xpath = '/' + element.tagName.toLowerCase() + id + xpath;
    }
    return xpath;
}

$(document).on('click', '.block_docmanage', function (event) {
    cl1ele = $(this).closest('.panel.panel-default.level1').find('.panel-headinglevel1 > h4 > .docmgCategoryBlock');
    var element_hierarchy = getXPath(cl1ele.get[0]);
    alert(element_hierarchy);
}):