querySelector returns HTML DOM 中的空白节点

Question

我有一个 HTML 文档，其中包含多次出现的以下标签

<div _ngcontent-mjy-c67="" uipath_custom_id="13">
    <div _ngcontent-mjy-c67="" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" uipath_custom_id="12">
        <button _ngcontent-mjy-c67="" role="button" data-toggle="tooltip" data-placement="top" class="btn btn-default flag-item" title data-original-title="Allowed to log into the Main Tools." uipath_custom_id="11">
            <span _ngcontent-mjy-c67="" class="glyphicon glyphicon-ok">
                ::before::
            </span>
            <!---->
            "Admin" 
        </button>
        <!---->
    </div>
    <!---->
</div>

文档中共有 112 个按钮

class="btn btn-default flag-item"

我想 select 一个带有

的特定按钮

data-original-title="Allowed to log into the Main Tools."

使用 javascript 并单击按钮。

我试过使用 querySelectorAll 但找不到解决方案。

 document.querySelectorAll('button.btn.btn-default.flag-item')

上面的代码returns所有的112个元素但是如何使用select或者select只用按钮

data-original-title="Allowed to log into the Main Tools."

属性?

我也试过使用

document.getElementsByClassName('btn btn-default flag-item')

这也是 returns 112 个元素，但无法继续使用 querySelectorAll 继续。

注意：我需要从 UiPath 调用此脚本，因此非常感谢单行脚本。

使用Chrome中的复制JS路径我找到了

document.querySelector("body > app-root > app-shell > app-dashboard > div > div.dashboard-widgets > div.app-privileges-widget.col-md-6.widget-new-line > app-widget-container > div > div.collapse.in > div > app-privileges-widget > app-privileges-grid > div > div:nth-child(2) > div:nth-child(3) > div > button").click()

它工作得很好，但我不知道这个路径是否总是正确的，因为我试图自动化的页面是一个动态页面，元素是动态创建的。因此，如果此路径适用于特定用户，则此路径可能对其他用户无效。

请帮忙。

Answer 1

通过使用 attribute 选择器：

console.dir(document.querySelector('[data-original-title="Allowed to log into the Main Tools."]'))

<div _ngcontent-mjy-c67="" uipath_custom_id="13">
    <div _ngcontent-mjy-c67="" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" uipath_custom_id="12">
        <button _ngcontent-mjy-c67="" role="button" data-toggle="tooltip" data-placement="top" class="btn btn-default flag-item" title data-original-title="Allowed to log into the Main Tools." uipath_custom_id="11">
            <span _ngcontent-mjy-c67="" class="glyphicon glyphicon-ok">
                ::before::
            </span>
            <!---->
            "Admin" 
        </button>
        <!---->
    </div>
    <!---->
</div>

querySelector returns HTML DOM 中的空白节点

querySelector returns blank node in HTML DOM

html

javascript

dom

uipath

queryselector