Question

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

作为下面的示例代码

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

Answer 1

为什么不在点击时使用元素的ID进行提醒？

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

Answer 2

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

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

2 个答案: