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

findout js code traverse to which element in DOM

本文关键字：元素 DOM js 代码 遍历 findout      更新时间：2023-09-26

对于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);
}):
相关文章：