html DOM选择器获取元素的文本时是否忽略子元素?

gupuwyp2  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(133)

我正在使用Tab Modifier plugin for Chrome动态重命名我每天使用的一些标签页。在标签页标题定义中,它如下所示:
您可以使用{selector}插入任何DOM内容。范例:{title}表示网站标题,{h1}、{#id}、{.class}等
下面是我想用来命名选项卡的元素的示例:

<td class="portalTitleInfoVal">
  PORTALNAME
  <a class="portalLink">Change Portal</a>
</td>

这是我目前使用的标题:

{.portalTitleInfoVal:nth-of-type(4)}

当然,该选项卡的名称为PORTALNAMEChange Portal
如何修改DOM选择器,使选项卡仅命名为“PORTALNAME”?

0yg35tkg

0yg35tkg1#

元素的第一个子节点是纯文本,位于HTML元素(<a>)之前。

$('. portalTitleInfoVal')[0].childNodes[0].nodeValue

看起来这个插件只允许与querySelector兼容的CSS样式元素选择器。然后它从该元素中抓取文本。从他们的github repo:

/**
     * Returns the text related to the given CSS selector
     * @param selector
     * @returns {string}
     */
    getTextBySelector = function (selector) {
        var el = document.querySelector(selector), value = '';

        if (el !== null) {
            value = el.innerText || el.textContent;
        }

        return value.trim();
    };
tsm1rwdh

tsm1rwdh2#

我知道我真的迟到了,但我发现这个职位,而搜索的答案。
我使用了很多旧系统,所有的选项卡都只显示{title},这在一次打开15-20个选项卡时没有用,而且对每个选项卡进行硬编码也很乏味。
于是..我蛮力地进行了试验,直到我找到了解决办法:
每个页面都有一个面包屑:

<div class="breadcrumb noPrint">
  <a href="/XXX/AAA" title="Go to the frontpage.">Home</a> "»" 
  <a href="/XXX/BBB" title="Search materials">Materials</a>
  <a href="/XXX/CCC=123123" title="123123">123123</a>
</div>

所以他们可能已经更新了扩展,但你的猜测是非常接近。我不知道为什么你把在4,但我假设你有更多的元素比张贴。
不管怎样,我让它工作的方法是:

{.breadcrumb  :nth-last-child(2)} : {.breadcrumb :last-child}

因此,在.class和子元素之间必须有一个空格,在我的例子中返回Materials:12312
我还没有尝试近一半,但DoFactory的CSS选择器列表对我有很大帮助。

相关问题