findout js代码遍历到DOM中的哪个元素

findout js code traverse to which element in DOM

对于dom操作我们编写如下代码。 对于 dom 操作,首先我们必须遍历到 DOM 元素。 我想知道如何弄清楚我们编写的代码是遍历到 DOM.

中的哪个元素

作为下面的示例代码

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

为什么不在点击时使用元素的 ID 发出警报?

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

您可以通过以下方式获取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);
}):