Javascript 在没有div.class的JS中更改按钮的文本

问题

我很难在我的网站上更改按钮的文本

上没有一个类是我想要针对的，这就是为什么我要努力编辑这个类。 老实说，我对JS有一些基本的了解，所以我可以理解它，但是我自己还没有找到这个解决方案

页面的简化代码如下：

<div class="notion-topbar">
  <div>
    <div class="notranslate">...</div>
    <div>...</div>
    <div role="button"> // I want to change the text in this <div>!
      <svg>...</svg> my_text
    </div>

帮助

我真的需要你的帮助，因为我在这件事上苦苦挣扎。

---

谢谢你的时间

你不能给div分配一个id吗？如果你不想使用一个类，那么你可以直接调用它

---

document.getElementByIDiouridName.innerHTML=无论什么

大概是这样吧

---

document.querySelector'div[role=button]

因为按钮中有多个节点。您应该检查每个项目，如果它是文本节点，则替换内容

PS：此功能可用于每种类型的元素，而不仅仅是按钮

const replacetextinement=element，find，replace，searchInChildren=false=>{ //如果元素为空，请停止执行任何操作 如果！element.hasChildNodes返回； //创建正则表达式以替换提供的word const regex=new RegExpfind，g； //在元素的每个子节点上循环 元素的forconst childNode.childNodes{ //如果文本是文本节点，则替换该文本 ifchildNode.nodeType===Node.TEXT\u节点{ //用新文本替换文本 childNode.textContent=childNode.textContent.replaceregex，替换； }否则，我会让孩子们{ //如果我们指定要替换子对象中的文本，也可以替换它 replaceTextInElementchildNode、find、replace、searchInChildren； } } } //在加载DOM之前不要执行任何操作 window.addEventListenerDomainContentLoaded，=>{ const searchBtn=document.querySelector.search-button； //使用下面的一行。我使用上面的一行是因为我懒得重新创建所有的html。 //const searchBtn=document.querySelector.concept-topbar>div:nth-child1>div:nth-child3； replacetextinelementsarchbtn、Search、Rechercher； //如果需要，还可以通过添加true作为参数来遍历每个子级 const anotherBtn=document.querySelector.other-button； replaceTextInElementanotherBtn，Search，Zoeken，true； }; 搜索第2级SVG 搜索级别1 搜索第2级SVG 搜索级别1

---

任何CSS选择器都可以在JS中工作。因此，CSS黑客中的选择器可以在文档中使用。querySelector或右键单击devtools中的元素并单击->复制->复制选择器Ori不太确定是否在我的脚本中使用CSS选择器。你是说我可以试试这样的剧本吗？document.querySelector'div.concept-topbar>div>div:nth-child3'.innerHTML=Rechercher；如果这是正确的CSS选择器，那么是的。小提示，使用textContent而不是innerHTML，因为它有一些主要的安全问题感谢textContent的建议！我试过这个脚本，但我不明白为什么它不起作用。。。document.querySelector.concept-topbar>div:nth-child1>div:nth-child3.textContent=Rechercher；它适合我，只要复制粘贴到控制台。这肯定会更容易，但我不能在我的网页上深入编辑代码。我正在Cloudflare上使用一个worker，它已经完全编写好脚本，可以随时使用。我已经编辑了一些小修改的脚本，但这一个它是有点难为我解决。无论如何，谢谢你的回答！：此脚本是否会尝试使用button的角色编辑每个div？因为这就是我认为它会做的。@Yani，不，它只会用role=button更改第一个div，因为document.querySelector返回与传递给它的选择器匹配的第一个元素。哦，是的，我完全忘记了document.querySelector做了什么，我的错无论如何，即使@Reyno已经为我的问题找到了解决方案，谢谢你的回答老实说，这个代码太复杂了，我无法完全理解。我想关于JS我还有很多东西要学不管怎样，我在我的网站上试过了。。。但不幸的是，结果和以前一样。我正在慢慢地检查您的代码示例中的错误，我不会放弃！如果你想自己检查的话，它还是活的。当前，有一个错误Uncaught TypeError:无法读取null的属性“hasChildNodes”。@Yani我做了更多的研究，发现DOM是在页面加载后添加的，这意味着事件“DOMContentLoaded”已经触发。唯一的其他选择是类似计时器的解决方案。参见最后一个片段示例是的，它很有效！谢谢你的帮助，你做得很棒！我真的很感谢你的努力。再见

.notion-topbar > div:nth-child(1n+3) > .button {
  visibility: hidden
}

.notion-topbar > div:nth-child(1n+3) > .button:after {
  visibility: visible;
  display: block;
  content: 'Rechercher';
  position: absolute;
}