Question

我找到了这两个元素选择器：select#usuario-select和#usuario-select。如果我将它们用作document.querySelector()参数，它们会返回相同的节点吗？

Answer 1

正如您所说，这些是CSS selectors。 document.querySelector寻找与提供的CSS选择器匹配的第一个元素。所以：

document.querySelector('select#usuario-select')查找ID为 usuario-select （<select id='usuario-select'>）的第一个 select 标签

document.querySelector('#usuario-select')查找ID为 usuario-select （<ANYTAG id='usuario-select'>）的第一个 any 标签

如果第一个ID为usuario-select的元素是select标签，它们将返回相同的节点。

Answer 2

您可能会发现此链接很有帮助。 [1] https://www.w3schools.com/jsref/met_document_queryselector.asp

此符号＃只需更改ID = usuario-select的元素的文本

Answer 3

要回答第一个问题，请使用#字符作为ID Selector。

如果您的DOM元素设置了id属性；相应的ID选择器可用于查询该节点。

示例：

// This is a Class Selector. It'll query for the parent div because
// it has a `class` attribute with a matching identifier.
.parent {
  background-color: black;
}

// This is an ID Selector. It'll query for the H1 text element because
// it has a `id` attribute with a matching identifier.
#name {
  color: white;
  text-align: center;
}

// This is an Element Selector AND an ID Selector. It'll query for
// and `<img/>` DOM node that has a matching `id` attribute value.
img#avatar {
  float: left;
}

<div class="parent">
  <img id="avatar" src="https://via.placeholder.com/300x300">
  <h1 id="name">John Doe</h1>
</div>

MDN是用于了解有关选择器的强大资源：

关于您的最后一个问题“（一个css选择器）是否将返回与document.querySelector（函数）（功能）相同的节点？”，是的。

可以找到here Document.querySelector文档。

它说明如下：

语法 element = document.querySelector(selectors);

参数：

选择器：

包含一个或多个要匹配的选择器的DOMString。

此字符串   必须是有效的CSS选择器字符串；如果不是，则会引发SYNTAX_ERR异常。

Answer 4

据我了解您的问题

“ select＃usuario-select”与。 “＃usuario-select”

select#usuario-select，这将选择ID为select的{{1}}元素，您选择的对象仅是目标#usuario-select元素。

虽然select将选择ID为#usuario-select的元素，但您不会定位哪个元素。

由于CSS的经验法则，所以ID始终是唯一的；因此，只会选择并返回一个具有指定ID的元素。

回到您的问题，他们会返回相同的文字吗？ -取决于您的HTML。

假设您的HTML化妆是这样的：

#usuario-select

然后，<select id="usuario-select"> <option value="a">Apple</option> <option value="b">Banana</option> </select>或document.querySelector("select#usuario-select")将返回相同的节点。

但是，如果您的HTML Makup是这样的：

document.querySelector("#usuario-select")

然后，第一个选择表达式<p id="usuario-select">Hey, I has ID "#usuario-select"</p>将返回document.querySelector("select#usuario-select")，因为不存在ID为none的{{1}}元素，insead select将返回段落元素，与此相同的选择表达式usuario-select也返回相同的结果。

希望获得帮助。

当使用select＃作为CSS选择器时会发生什么？

4 个答案: