如何使用 Javascript DOM 获取没有 ID 或类名的元素答案

【问题标题】：How to get element without ID or Class Name using Javascript DOM如何使用 Javascript DOM 获取没有 ID 或类名的元素
【发布时间】：2021-03-23 02:44:28
【问题描述】：

我正在开发一个用于处理 HTML 元素的 chrome 扩展。我有一个小问题。我要操作的元素没有 ID 或 ClassName，如下所示：

<div style="width: 400px">

我想控制宽度。但是标签 div 中没有标识符。如何使用 javascript DOM 操作该标签？

【问题讨论】：

方法有很多。 document.querySelector('div[style="width: 400px"]') 是其中之一。如果您显示更多周围的文档，可能会有更好的方法。
这能回答你的问题吗？ How to get element without element id?
stackoverflow.com/questions/2332061/…的可能重复
@HereticMonkey 我尝试了你的建议。我将它分配给一个变量，并尝试使用 style 属性来操纵宽度，但它不起作用。如何控制宽度？ let x = document.querySelector('div[style="width: 400px"]'); x.style.width = "500px" 我收到一条错误消息>“未捕获的类型错误：无法读取 null 的属性 'style'”
jsfiddle.net/n3zhr9vo 显示它工作正常。答案下的 cmets 告诉我，您在问题中显示的 HTML 并不代表您的实际 HTML。显然，我的示例 JavaScript 仅适用于提供的示例 HTML。同样，显示更多您的实际 HTML，我们可以为您提供更好的帮助。在此之前，我们只能为您提供猜测和一般建议。

标签： javascript html dom google-chrome-extension

【解决方案1】：

您可以使用querySelector。

这是一个简单的例子：

//adjust selector to target your div (more info in docs)
var div = document.querySelector('div[style="width: 100px; background-color: green"]')
//change this width to your preference
div.style.width = "700px"

<!-- This is my condition -->
<div class="wrap">
  <div style="width: 100px; background-color: green">
    <h1 class="h1">
      Hello World
    </h1>
  </div>
</div>

【讨论】：

这将获得页面上的第一个 div 元素。如果在 OP 希望在源中定位的 divs 之前有任何其他 divs，它们将无法获得所需的结果。
正确，我完全同意你的看法。这只是一个简单的例子。 OP 可以使用他偏好的选择器，这就是我包含文档链接的原因。就目前而言，OP 没有在他的问题中指定其他 div，但如果问题提供有关其他 div 的信息，我可以更新它。
如果一个网页中有多个divs怎么办？
然后调整选择器以更具体地定位您要操作的 div。正如@HereticMonkey 在他对OP 的评论中解释的那样，如果document.querySelector('div[style="width: 400px"]') 不是网页上唯一的div，它将更具体地针对这个div。 - 我再说一遍，OP 从来没有提到过多个 div。如果这是真的，还提供了文档链接。我的回答没有做任何假设，并提供了有关 querySelector 方法的信息，这只是实现这一目标的众多方法之一。
@AibCodesDaily 如果我只有一个 div，它就可以工作。但如果我之前有另一个 div，它就不起作用。检查此链接，这是我的条件 (jsfiddle.net/ys6wbLo7/1)