当前位置：文江博客话题详情

为什么 jQuery 或 getElementById 等 DOM 方法找不到该元素？

发布于 2025-01-09 16:13:52 字数 661 浏览 0 评论 0原文

document.getElementById、$("#id") 或任何其他 DOM 方法/jQuery 选择器找不到元素的可能原因是什么？

示例问题包括：

jQuery 默默地无法绑定事件处理程序
jQuery“getter”方法（.val()、.html()、.text()< /code>) 返回 undefined
标准 DOM 方法返回 null 导致以下几种错误之一：

未捕获类型错误：无法设置 null 属性“...”
未捕获的类型错误：无法设置 null 的属性（设置“...”）
未捕获的类型错误：无法读取 null 的属性“...”
未捕获的类型错误：无法读取 null 的属性（读取“...”）

最常见的形式是：

未捕获类型错误：无法将属性“onclick”设置为 null
未捕获的类型错误：无法读取 null 的属性“addEventListener”
未捕获的类型错误：无法读取 null 的属性“样式”

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

标点 2025-01-16 16:13:52

您尝试查找的元素不在 DOM 当你的脚本运行时。

依赖 DOM 的脚本的位置可能对其行为产生深远的影响。浏览器从上到下解析 HTML 文档。元素被添加到 DOM 中，并且脚本（默认情况下）在遇到它们时执行。 这意味着顺序很重要。通常，脚本无法找到标记中稍后出现的元素，因为这些元素尚未添加到 DOM 中。

考虑以下标记；脚本 #1 找不到

而脚本 #2 成功：

<script>
  console.log("script #1:", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2:", document.getElementById("test")); // <div id="test" ...
</script>

那么，你应该做什么？您有几个选择：

选项 1：移动您的脚本

鉴于我们在上面的示例中看到的情况，一个直观的解决方案可能是简单地将您的脚本沿着标记向下移动，越过您想要访问的元素。事实上，长期以来，将脚本放置在页面底部被认为是最佳选择出于各种原因练习。以这种方式组织，在执行脚本之前将解析文档的其余部分：

<body>
  <button id="test">click me</button>
  <script>
    document.getElementById("test").addEventListener("click", function() {
      console.log("clicked:", this);
    });
  </script>
</body><!-- closing body tag -->

虽然这是有道理的，并且对于旧版浏览器来说是一个可靠的选择，但它是有限的，并且有更灵活、更现代的方法可用。

选项 2：`defer` 属性

虽然我们确实说过脚本是“（默认情况下）在遇到脚本时执行”，但现代浏览器允许您指定不同的行为。如果您要链接外部脚本，则可以使用 defer 属性。

[defer，一个布尔属性，] 设置为向浏览器指示脚本应在文档解析之后、触发 DOMContentLoaded。

这意味着您可以将带有 defer 标记的脚本放置在任何地方，甚至是，并且它应该能够访问完全实现的 DOM。

<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>
<button id="test">click me</button>

请记住...

defer 只能用于外部脚本，即：具有 src 属性的脚本。
请注意浏览器支持，即：IE 中的错误实现浏览器支持 10

选项 3：模块

根据您的要求，您可以使用 JavaScript 模块。与标准脚本的其他重要区别（此处注明)，模块会自动延迟，并且不限于外部源。

将脚本的 type 设置为 module，例如：

<script type="module">
  document.getElementById("test").addEventListener("click", function(e) {
    console.log("clicked: ", this);
  });
</script>
<button id="test">click me</button>

选项 4：延迟事件处理

将侦听器添加到解析文档后触发的事件。

DOMContentLoaded 事件

DOMContentLoaded在 DOM 从初始解析完全构建完成后触发，无需等待样式表或图像等内容加载。

<script>
  document.addEventListener("DOMContentLoaded", function(e){
    document.getElementById("test").addEventListener("click", function(e) {
      console.log("clicked:", this);
    });
  });
</script>
<button id="test">click me</button>

窗口：加载事件

load< /a> 事件在 DOMContentLoaded 以及加载样式表和图像等其他资源后触发。因此，它的触发时间比我们预期的要晚。不过，如果您考虑使用 IE8 等较旧的浏览器，那么支持几乎是普遍的。当然，您可能需要一个 polyfill 用于 addEventListener()。

<script>
  window.addEventListener("load", function(e){
    document.getElementById("test").addEventListener("click", function(e) {
      console.log("clicked:", this);
    });
  });
</script>
<button id="test">click me</button>

jQuery 的 `ready()`

DOMContentLoaded 和 window:load 各有其注意事项。 jQuery 的 ready() 使用 DOMContentLoaded 提供混合解决方案 如果可能，在必要时故障转移到 window:load，并在 DOM 已经完成时立即触发其回调。

您可以将就绪处理程序作为 $(handler) 直接传递给 jQuery，例如：

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
  $(function() {
    $("#test").click(function() {
      console.log("clicked:", this);
    });
  });
</script>
<button id="test">click me</button>

选项 5：事件委托

将事件处理委托给目标元素的祖先。

当元素引发事件时（前提是它是冒泡事件并且没有任何东西阻止其传播），该元素祖先中的每个父元素，一直到window，也接收该事件。这允许我们将处理程序附加到现有元素，并在事件从其后代中冒出时对事件进行采样...甚至是在附加处理程序后添加的后代中。我们所要做的就是检查事件以查看它是否是由所需元素引发的，如果是，则运行我们的代码。

通常，此模式是为加载时不存在的元素保留的，或者是为了避免附加大量重复的处理程序。为了提高效率，请选择目标元素最近的可靠祖先，而不是将其附加到文档。如果合适，不要忘记 Event:stopPropagation( ) 以防止进一步冒泡/处理。

原生 JavaScript

<div id="ancestor"><!-- nearest ancestor available to our script -->
  <script>
    document.getElementById("ancestor").addEventListener("click", function(e) {
      if (e.target.id === "descendant") {
        e.stopPropagation(); // stop bubbling
        console.log("clicked:", e.target);
      }
    });
  </script>
  <button id="descendant">click me</button>
</div>

jQuery 的 `on()`

jQuery 通过 on() 提供此功能代码>。给定事件名称、所需后代的选择器和事件处理程序，它将解析您的委托事件处理并管理您的 this 上下文：

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<div id="ancestor"><!-- nearest ancestor available to our script -->
  <script>
    $("#ancestor").on("click", "#descendant", function(e) {
      e.stopPropagation(); // stop bubbling
      console.log("clicked:", this);
    });
  </script>
  <button id="descendant">click me</button>
</div>

The element you were trying to find wasn’t in the DOM when your script ran.

The position of your DOM-reliant script can have a profound effect on its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (by default) executed as they're encountered. This means that order matters. Typically, scripts can't find elements that appear later in the markup because those elements have yet to be added to the DOM.

Consider the following markup; script #1 fails to find the <div> while script #2 succeeds:

<script>
  console.log("script #1:", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2:", document.getElementById("test")); // <div id="test" ...
</script>

So, what should you do? You've got a few options:

Option 1: Move your script

Given what we've seen in the example above, an intuitive solution might be to simply move your script down the markup, past the elements you'd like to access. In fact, for a long time, placing scripts at the bottom of the page was considered a best practice for a variety of reasons. Organized in this fashion, the rest of the document would be parsed before executing your script:

<body>
  <button id="test">click me</button>
  <script>
    document.getElementById("test").addEventListener("click", function() {
      console.log("clicked:", this);
    });
  </script>
</body><!-- closing body tag -->

While this makes sense, and is a solid option for legacy browsers, it's limited and there are more flexible, modern approaches available.

Option 2: The `defer` attribute

While we did say that scripts are, "(by default) executed as they're encountered," modern browsers allow you to specify a different behavior. If you're linking an external script, you can make use of the defer attribute.

[defer, a Boolean attribute,] is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

This means that you can place a script tagged with defer anywhere, even the <head>, and it should have access to the fully realized DOM.

<script src="https://gh-canon.github.io/misc-demos/log-test-click.js" defer></script>
<button id="test">click me</button>

Just keep in mind...

defer can only be used for external scripts, i.e.: those having a src attribute.
be aware of browser support, i.e.: buggy implementation in IE < 10

Option 3: Modules

Depending upon your requirements, you may be able to utilize JavaScript modules. Among other important distinctions from standard scripts (noted here), modules are deferred automatically and are not limited to external sources.

Set your script's type to module, e.g.:

<script type="module">
  document.getElementById("test").addEventListener("click", function(e) {
    console.log("clicked: ", this);
  });
</script>
<button id="test">click me</button>

Option 4: Defer with event handling

Add a listener to an event that fires after your document has been parsed.

DOMContentLoaded event

DOMContentLoaded fires after the DOM has been completely constructed from the initial parse, without waiting for things like stylesheets or images to load.

<script>
  document.addEventListener("DOMContentLoaded", function(e){
    document.getElementById("test").addEventListener("click", function(e) {
      console.log("clicked:", this);
    });
  });
</script>
<button id="test">click me</button>

Window: load event

The load event fires after DOMContentLoaded and additional resources like stylesheets and images have been loaded. For that reason, it fires later than desired for our purposes. Still, if you're considering older browsers like IE8, the support is nearly universal. Granted, you may want a polyfill for addEventListener().

<script>
  window.addEventListener("load", function(e){
    document.getElementById("test").addEventListener("click", function(e) {
      console.log("clicked:", this);
    });
  });
</script>
<button id="test">click me</button>

jQuery's `ready()`

DOMContentLoaded and window:load each have their caveats. jQuery's ready() delivers a hybrid solution, using DOMContentLoaded when possible, failing over to window:load when necessary, and firing its callback immediately if the DOM is already complete.

You can pass your ready handler directly to jQuery as $(handler), e.g.:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
  $(function() {
    $("#test").click(function() {
      console.log("clicked:", this);
    });
  });
</script>
<button id="test">click me</button>

Option 5: Event Delegation

Delegate the event handling to an ancestor of the target element.

When an element raises an event (provided that it's a bubbling event and nothing stops its propagation), each parent in that element's ancestry, all the way up to window, receives the event as well. That allows us to attach a handler to an existing element and sample events as they bubble up from its descendants... even from descendants added after the handler was attached. All we have to do is check the event to see whether it was raised by the desired element and, if so, run our code.

Typically, this pattern is reserved for elements that don't exist at load time or to avoid attaching a large number of duplicate handlers. For efficiency, select the nearest reliable ancestor of the target element rather than attaching it to the document. If appropriate, don't forget Event:stopPropagation() to prevent further bubbling/processing.

Native JavaScript

<div id="ancestor"><!-- nearest ancestor available to our script -->
  <script>
    document.getElementById("ancestor").addEventListener("click", function(e) {
      if (e.target.id === "descendant") {
        e.stopPropagation(); // stop bubbling
        console.log("clicked:", e.target);
      }
    });
  </script>
  <button id="descendant">click me</button>
</div>

jQuery's `on()`

jQuery makes this functionality available through on(). Given an event name, a selector for the desired descendant, and an event handler, it will resolve your delegated event handling and manage your this context:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<div id="ancestor"><!-- nearest ancestor available to our script -->
  <script>
    $("#ancestor").on("click", "#descendant", function(e) {
      e.stopPropagation(); // stop bubbling
      console.log("clicked:", this);
    });
  </script>
  <button id="descendant">click me</button>
</div>

回复收藏 0 原文

吲‖鸣 2025-01-16 16:13:52

简短：因为您要查找的元素在文档中尚不存在。

对于这个答案的其余部分，我将使用 getElementById 为例，但这同样适用于 getElementsByTagName，querySelector 以及任何其他选择元素的 DOM 方法。

可能的原因

元素可能不存在的原因有以下三个：

安文档中确实不存在具有传递的 ID 的元素。您应该仔细检查您传递给 getElementById 的 ID 是否确实与（生成的）HTML 中现有元素的 ID 匹配，并且您没有拼写错误该 ID（ID 是区分大小写！）。
如果您使用 getElementById，请确保您仅提供元素的 ID（例如，document.getElemntById("the-id “））。如果您使用的方法接受 CSS 选择器（例如 querySelector），请确保在 ID 之前包含 # 以表明您正在查找ID（例如，document.querySelector("#the-id")）。您不能不将#与getElementById一起使用，并且必须将其与querySelector一起使用和类似的。另请注意，如果 ID 中包含在 CSS 标识符（例如 .；包含 . 字符的 id 属性是不好的做法，但有效），您必须使用querySelector时转义这些内容(document.querySelector("#the\\.id"))) 但在使用 getElementById 时则不然 (document.getElementById("the.id")< /代码>）。
您调用 getElementById 时，该元素不存在。
尽管您可以在页面上看到该元素，但该元素并不位于您正在查询的文档中，因为它位于 iframe 中（这是它自己的文档）。当您搜索包含 iframe 中的元素的文档时，不会搜索这些元素。

如果问题是原因 3（位于 iframe 或类似文件中），您需要查看 iframe 中的文档，而不是父文档，也许可以通过获取 < code>iframe 元素并使用其 contentDocument 属性来访问其文档（仅限同源）。这个答案的其余部分解决了前两个原因。

第二个原因——它还没有出现——很常见。浏览器从上到下解析和处理 HTML。这意味着在 DOM 元素出现在 HTML 中之前发生的对 DOM 元素的任何调用都将失败。

考虑以下示例：

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

div 出现在script之后。执行脚本时，该元素尚不存在，并且 getElementById 将返回 null。

jQuery

这同样适用于所有带有 jQuery 的选择器。如果您拼写错误您的选择器，或者您在它们实际存在之前尝试选择它们，那么 jQuery 将找不到它们。

一个额外的问题是，当由于您加载了没有协议的脚本并且从文件系统运行而找不到 jQuery 时：

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

此语法用于允许脚本通过 HTTPS 在具有协议 https:// 的页面上加载，并加载 HTTP协议为 http:// 的页面上的版本

会产生不幸的副作用，但

尝试加载 file://somecdn.somewhere.com... 解决方案

失败您调用 getElementById （或任何与此相关的 DOM 方法），请确保您要访问的元素存在，即 DOM 已加载。

只需将 JavaScript 放在相应的 DOM 元素之后即可确保这一点，

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

在这种情况下，您也可以将代码放在结束 body 标记之前 () （所有 DOM 元素在脚本执行时都可用）。

其他解决方案包括监听 load ^[MDN] 或 DOMContentLoaded ^[MDN] 事件。在这些情况下，将 JavaScript 代码放置在文档中的哪个位置并不重要，只需记住将所有 DOM 处理代码放置在事件处理程序中即可。

示例：

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

请参阅 quirksmode.org 上的文章，了解有关事件处理和浏览器差异的更多信息。

jQuery

首先确保 jQuery 已正确加载。使用浏览器的开发者工具查明是否找到 jQuery 文件并更正URL 如果不是（例如在开头添加 http: 或 https: 方案，调整路径等

） load/DOMContentLoaded 事件正是 jQuery 使用 < 所做的事情code>.ready() ^[文档]。所有影响 DOM 元素的 jQuery 代码都应该位于该事件处理程序内。

事实上，jQuery 教程明确指出：

由于我们在使用 jQuery 时所做的几乎所有事情都是读取或操作文档对象模型 (DOM)，所以我们需要确保在 DOM 准备好后立即开始添加事件等。

为此，我们为文档注册一个就绪事件。
$(文档).ready(function() {

   // do stuff when DOM is ready
});

或者，您也可以使用简写语法：

$(function() {
    // do stuff when DOM is ready
});

两者是等效的。

Short and simple: Because the elements you are looking for do not exist in the document (yet).

For the remainder of this answer I will use getElementById for examples, but the same applies to getElementsByTagName, querySelector, and any other DOM method that selects elements.

Possible Reasons

There are three reasons why an element might not exist:

An element with the passed ID really does not exist in the document. You should double check that the ID you pass to getElementById really matches an ID of an existing element in the (generated) HTML and that you have not misspelled the ID (IDs are case-sensitive!).
If you're using getElementById, be sure you're only giving the ID of the element (e.g., document.getElemntById("the-id")). If you're using a method that accepts a CSS selector (like querySelector), be sure you're including the # before the ID to indicate you're looking for an ID (e.g., document.querySelector("#the-id")). You must not use the # with getElementById, and must use it with querySelector and similar. Also note that if the ID has characters in it that aren't valid in CSS identifiers (such as a .; id attributes containing . characters are poor practice, but valid), you have to escape those when using querySelector (document.querySelector("#the\\.id"))) but not when using getElementById (document.getElementById("the.id")).
The element does not exist at the moment you call getElementById.
The element isn't in the document you're querying even though you can see it on the page, because it's in an iframe (which is its own document). Elements in iframes aren't searched when you search the document that contains them.

If the problem is reason 3 (it's in an iframe or similar), you need to look through the document in the iframe, not the parent document, perhaps by getting the iframe element and using its contentDocument property to access its document (same-origin only). The rest of this answer addresses the first two reasons.

The second reason — it's not there yet — is quite common. Browsers parse and process the HTML from top to bottom. That means that any call to a DOM element which occurs before that DOM element appears in the HTML, will fail.

Consider the following example:

<script>
    var element = document.getElementById('my_element');
</script>

<div id="my_element"></div>

The div appears after the script. At the moment the script is executed, the element does not exist yet and getElementById will return null.

jQuery

The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

An added twist is when jQuery is not found because you have loaded the script without protocol and are running from file system:

<script src="//somecdn.somewhere.com/jquery.min.js"></script>

this syntax is used to allow the script to load via HTTPS on a page with protocol https:// and to load the HTTP version on a page with protocol http://

It has the unfortunate side effect of attempting and failing to load file://somecdn.somewhere.com...

Solutions

Before you make a call to getElementById (or any DOM method for that matter), make sure the elements you want to access exist, i.e. the DOM is loaded.

This can be ensured by simply putting your JavaScript after the corresponding DOM element

<div id="my_element"></div>

<script>
    var element = document.getElementById('my_element');
</script>

in which case you can also put the code just before the closing body tag (</body>) (all DOM elements will be available at the time the script is executed).

Other solutions include listening to the load ^[MDN] or DOMContentLoaded ^[MDN] events. In these cases it does not matter where in the document you place the JavaScript code, you just have to remember to put all DOM processing code in the event handlers.

Example:

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

Please see the articles at quirksmode.org for more information regarding event handling and browser differences.

jQuery

First make sure that jQuery is loaded properly. Use the browser's developer tools to find out whether the jQuery file was found and correct the URL if it wasn't (e.g. add the http: or https: scheme at the beginning, adjust the path, etc.)

Listening to the load/DOMContentLoaded events is exactly what jQuery is doing with .ready() ^[docs]. All your jQuery code that affects DOM element should be inside that event handler.

In fact, the jQuery tutorial explicitly states:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

To do this, we register a ready event for the document.
$(document).ready(function() {

   // do stuff when DOM is ready
});

Alternatively you can also use the shorthand syntax:

$(function() {
    // do stuff when DOM is ready
});

Both are equivalent.

回复收藏 0 原文

若无相欠,怎会相见 2025-01-16 16:13:52

基于 id 的选择器不起作用的原因

指定 id 的元素/DOM 尚不存在。
该元素存在，但未在 DOM 中注册（如果是从 Ajax 响应动态附加的 HTML 节点）。
存在多个具有相同 id 的元素，这会导致冲突。

解决方案

尝试在声明后访问该元素，或者使用诸如 $(document).ready();
对于来自 Ajax 响应的元素，使用 jQuery 的 .bind() 方法。旧版本的 jQuery 具有相同的 .live()。
使用工具[例如浏览器的 webdeveloper 插件]查找重复的 id 并将其删除。

回复收藏 0 原文

轻许诺言 2025-01-16 16:13:52

如果您尝试访问的元素位于 iframe 内部，并且您尝试在 iframe 上下文之外访问它，这也会导致其失败。

如果您想获取 iframe 中的元素，可以在此处了解如何操作。

回复收藏 0 原文

生寂 2025-01-16 16:13:52

正如@FelixKling 指出的，最有可能的情况是您正在寻找的节点（尚不存在）。

然而，现代开发实践通常可以使用 DocumentFragments 或直接直接分离/重新附加当前元素来操作文档树外部的文档元素。此类技术可用作 JavaScript 模板的一部分，或在相关元素发生大量更改时避免过多的重绘/回流操作。

同样，在现代浏览器中推出的新“Shadow DOM”功能允许元素成为文档的一部分，但不能通过 document.getElementById 及其所有同级方法（querySelector 等）进行查询。这样做是为了封装功能并专门隐藏它。

不过，同样，您要查找的元素很可能根本不在文档中，您应该按照 Felix 的建议进行操作。但是，您还应该意识到，这越来越不是元素可能无法找到（无论是暂时还是永久）的唯一原因。

回复收藏 0 原文

看春风乍起 2025-01-16 16:13:52

如果脚本执行顺序不是问题，则问题的另一个可能原因是未正确选择元素：

getElementById 要求传递的字符串是 ID 逐字，没有别的。如果您在传递的字符串前添加 # 前缀，并且 ID 不以 # 开头，则不会选择任何内容：

// 错误，所选元素将为空： document.getElementById('#foo') // 使固定： document.getElementById('foo')

同样，对于 getElementsByClassName< /code>，不要在传递的字符串前添加 .:

 ;
 // 错误，所选元素将是未定义的：
  document.getElementsByClassName('.bar')[0]
  // 使固定：
  document.getElementsByClassName('bar')[0]

使用 querySelector、querySelectorAll 和 jQuery，来匹配具有特定类名的元素，将 . 直接放在类之前。同样，要匹配具有特定 ID 的元素，请直接在 ID 前面放置 #：
```
 ;
```
```
 // 错误，所选元素将为空：
  document.querySelector('baz')
  $('巴兹')
  // 使固定：
  document.querySelector('.baz')
  $('.baz')
```
在大多数情况下，这里的规则与 CSS 选择器的规则相同，可以详细查看此处。
要匹配具有两个或多个属性（例如两个类名，或一个类名和一个 data- 属性）的元素，请将每个属性的选择器放在选择器中彼此相邻的位置字符串，没有空格分隔它们（因为空格表示后代选择器）。例如，选择：
```
 ;
```
使用查询字符串.foo.bar。选择
```
 ;
```
使用查询字符串.foo[data-bar="someData"]。要选择下面的：
```
 
    
  
```
使用div.parent> span[data-username="bob"].

大小写和拼写对于上述所有内容都很重要。如果大小写不同，或者拼写不同，则不会选择该元素：

 // 错误，所选元素将为空：
  document.querySelector('.结果')
  $('.结果')
  // 使固定：
  document.querySelector('.result')
  $('.结果')

您还需要确保方法具有正确的大小写和拼写。使用以下之一：
<前><代码>$（选择器）
文档.querySelector
文档.querySelectorAll
document.getElementsByClassName
document.getElementsByTagName
document.getElementById
任何其他拼写或大小写都不起作用。例如，document.getElementByClassName 将引发错误。
确保将字符串传递给这些选择器方法。如果您将非字符串的内容传递给 querySelector、getElementById 等，它几乎肯定不会起作用。
如果要选择的元素上的 HTML 属性被引号括起来，则它们必须是纯直引号（单引号或双引号）；如果您尝试按 ID、类或属性进行选择，则像 ' 或 ” 这样的大引号将不起作用。

If script execution order is not the issue, another possible cause of the problem is that the element is not being selected properly:

getElementById requires the passed string to be the ID verbatim, and nothing else. If you prefix the passed string with a #, and the ID does not start with a #, nothing will be selected:
```
  <div id="foo"></div>
```
```
  // Error, selected element will be null:
  document.getElementById('#foo')
  // Fix:
  document.getElementById('foo')
```

Similarly, for getElementsByClassName, don't prefix the passed string with a .:

  <div class="bar"></div>

  // Error, selected element will be undefined:
  document.getElementsByClassName('.bar')[0]
  // Fix:
  document.getElementsByClassName('bar')[0]

With querySelector, querySelectorAll, and jQuery, to match an element with a particular class name, put a . directly before the class. Similarly, to match an element with a particular ID, put a # directly before the ID:
```
  <div class="baz"></div>
```
```
  // Error, selected element will be null:
  document.querySelector('baz')
  $('baz')
  // Fix:
  document.querySelector('.baz')
  $('.baz')
```
The rules here are, in most cases, identical to those for CSS selectors, and can be seen in detail here.
To match an element which has two or more attributes (like two class names, or a class name and a data- attribute), put the selectors for each attribute next to each other in the selector string, without a space separating them (because a space indicates the descendant selector). For example, to select:
```
  <div class="foo bar"></div>
```
use the query string .foo.bar. To select
```
  <div class="foo" data-bar="someData"></div>
```
use the query string .foo[data-bar="someData"]. To select the <span> below:
```
  <div class="parent">
    <span data-username="bob"></span>
  </div>
```
use div.parent > span[data-username="bob"].

Capitalization and spelling does matter for all of the above. If the capitalization is different, or the spelling is different, the element will not be selected:

  <div class="result"></div>

  // Error, selected element will be null:
  document.querySelector('.results')
  $('.Result')
  // Fix:
  document.querySelector('.result')
  $('.result')

You also need to make sure the methods have the proper capitalization and spelling. Use one of:
```
$(selector)
document.querySelector
document.querySelectorAll
document.getElementsByClassName
document.getElementsByTagName
document.getElementById
```
Any other spelling or capitalization will not work. For example, document.getElementByClassName will throw an error.
Make sure you pass a string to these selector methods. If you pass something that isn't a string to querySelector, getElementById, etc, it almost certainly won't work.
If the HTML attributes on elements you want to select are surrounded by quotes, they must be plain straight quotes (either single or double); curly quotes like ‘ or ” will not work if you're trying to select by ID, class, or attribute.

回复收藏 0 原文

溺深海 2025-01-16 16:13:52

我正在使用 Apache Tapestry，就我而言，上述答案都没有帮助。最后，我发现错误是由于“id”和“t:id”使用相同的值引起的。
我希望它有帮助。

回复收藏 0 原文

~没有更多了~

关于作者

轻许诺言

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

为什么 jQuery 或 getElementById 等 DOM 方法找不到该元素？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

选项 1：移动您的脚本

选项 2：`defer` 属性

选项 3：模块

选项 4：延迟事件处理

DOMContentLoaded 事件

窗口：加载事件

jQuery 的 `ready()`

选项 5：事件委托

原生 JavaScript

jQuery 的 `on()`

Option 1: Move your script

Option 2: The `defer` attribute

Option 3: Modules

Option 4: Defer with event handling

DOMContentLoaded event

Window: load event

jQuery's `ready()`

Option 5: Event Delegation

Native JavaScript

jQuery's `on()`

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

为什么 jQuery 或 getElementById 等 DOM 方法找不到该元素？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

选项 1：移动您的脚本

选项 2：defer 属性

选项 3：模块

选项 4：延迟事件处理

DOMContentLoaded 事件

窗口：加载事件

jQuery 的 ready()

选项 5：事件委托

原生 JavaScript

jQuery 的 on()

Option 1: Move your script

Option 2: The defer attribute

Option 3: Modules

Option 4: Defer with event handling

DOMContentLoaded event

Window: load event

jQuery's ready()

Option 5: Event Delegation

Native JavaScript

jQuery's on()

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

选项 2：`defer` 属性

jQuery 的 `ready()`

jQuery 的 `on()`

Option 2: The `defer` attribute

jQuery's `ready()`

jQuery's `on()`