为什么 jQuery 或诸如 getElementById 之类的 DOM 方法找不到该元素?
技术问答
226 人阅读
|
0 人回复
|
2023-09-12
|
可能的原因是什么?document.getElementById,$("#id")或任何其他DOM方法/ jQuery选择未找到的元素?
$ A, u5 N0 }0 L& w, Z$ J# ]) K P: v+ y示例问题包括:
$ {7 V& r9 C" |jQuery 无声无法绑定事件处理程序8 S- }1 m9 `' U. l* t$ C
jQuery吸气方法(.val(),.html(),.text())返回undefined/ b! _' s; B* x) P8 R! O
返回标准 DOM 方法会null导致以下任何错误:遗漏类型错误:无效不能设置属性…”7 i9 I# n/ H. {* \. v! A6 [
遗漏类型错误:不能设置为空属性(设置…‘)2 X( q. l+ a) x
遗漏类型错误:不能读取空财产’…”
5 [3 p/ q/ t% R/ R遗漏类型错误:空的不能读取性能(阅读 ‘…’)5 h* o# f4 p1 g P8 k8 l2 R3 m. |4 y
最常见的形式是:' K A+ E/ ~: H
未捕获的类型错误无法设置 null 的属性“onclick”
9 v, {8 m; q% u, W; f( z: z, }未捕获的类型错误无法读取 null 的属性“addEventListener”
. R: ~) G: E- Z! O3 }8 k" Q1 H未捕获的类型错误无法读取 null 属性风格
1 ~" F3 V$ _0 V. k8 k. w' ^# N0 L1 ^ ; p& u. x/ t. C. B- D
解决方案:
* o: J" _3 W \7 ? 当你的脚本运行时,你试图找到的元素不在DOM 中。. ?: @; [% Y+ U( `3 U, C5 d: _
依赖 DOM 脚本的位置会对其行为产生深远的影响。浏览器从上到下分析 HTML 文档。在 文档中添加元素。DOM 脚本(通常)在遇到它们时执行。这意味着顺序很重要。通常,脚本找不到标记后面的元素,因为这些元素还没有添加到 DOM 中。
' n: F$ V" X' G" b0 M考虑以下标记, 脚本#1 无法找到而脚本 #2 成功:
4 c- R4 q6 d3 S' S& D+ E! D' Vtest div
# j- s! k/ z) t4 O7 G3 w6 i 那你该怎么办?你有几个选择:! J* E% Z/ `4 e* F9 `, r
选项 1:移动脚本鉴于我们在上面的例子中看到的内容,一个直观的解决方案可能是简单地标记你的脚本向下移动,超过你想要访问的元素。事实上,长期以来,由于各种原因,将脚本放在页面底部被认为是最好的实践。这样,文档的其他部分将在执行脚本之前进行分析:
$ k+ I0 c: b7 t K click me ( m* t0 T4 n" k) n
虽然这是合理的,也是旧浏览器的可靠选择,但它有限,有更灵活、更现代的方法。
1 E; M+ n, W6 `( V D$ y! z选项 2:defer属性虽然我们确实说过脚本(通常)在遇到它们时执行现代浏览器允许您指定不同的行为。如果要链接外部脚本,可以使用defer属性。5 R1 A- B. G+ e: T6 w: |& f9 J
[ defer,一个布尔属性, 设置为向浏览器指示脚本,将在文档分析但触发前执行DOMContentLoaded。
" f m i0 S/ v9 y; F7 `4 n; q这意味着你可以把带标记的脚本放在上面defer任何地方,甚至是,它应该能够访问完全实现的 DOM。
: B9 Y* B/ D0 i2 Fclick me5 {, t- i* w6 X! r* f, R; S7 M
只要记住…) ]$ i c, m" L% f# t, x0 E) _
[ol]defer只能用于外部脚本,即:有src属性脚本。4 ] M4 |, K I1 [- Y& v
注意浏览器支持,即:IE [/ol]3:模块可根据您的要求使用JavaScript 模块。模块自动延迟,不限于外部源,除了与标准脚本(此处指出)的其他重要区别。
' p5 D P$ @* y' X3 G9 M设置你的脚本type为module,例如:
' O" Y. c& f! B! t& n& R( G# pclick me
$ G1 f$ a9 q. C$ @ 选项 4:延迟事件处理将侦听器添加到解析文档后触发的事件中。
* H# X ^& I' R R# ?! m( LDOMContentLoaded 事件DOMContentLoaded DOM 触发后,无需等待加载样式表或图像。
% x, H; T5 J `6 K lclick me
! Y; R5 K" R2 B' K h) B 窗口:加载事件该load事件在DOMContentLoaded加载样式表、图像等其他资源后触发。因此,它比我们的目的触发得晚。尽管如此,如果你正在考虑使用 IE8 等旧浏览器,支持几乎很常见。当然,你可能需要一个polyfill foraddEventListener() .
. a. ?# l- v$ I3 i) G6 Yclick me
3 B3 t9 Z5 v/ Q. B) _ jQuery的 ready()DOMContentLoaded并且window:load各有各的注意事项。jQueryready()提供了一种混合解决方案,DOMContentLoaded在可能的情况下使用,window:load如果 DOM 已完成,立即触发其回调。
3 J5 V8 Y! R2 N# V* R& Y您可以直接将准备好的处理程序传递给 jQuery ,例如:$(*handler*)% i1 y6 H+ l/ \0 t5 n! q
click me
6 M/ m" g- e0 M( D" I9 k; W 选项 5:事件委托将事件处理委托给目标元素的祖先。
) O, w( i2 H& s/ W当一个元素引发一个事件(假设是冒泡事件,没有什么能阻止它的传播)时,这个元素祖先中的每一个父元素,直到window,这个事件也会收到。这允许我们将处理程序添加到现有元素中,并在事件从后代冒泡时采样事件。......即使是在附加处理程序之后添加的后代。我们所要做的就是检查事件是否是由所需元素引起的,如果是,则操作我们的代码。
8 Z5 O, ~9 c* s' G1 [通常,该模型是为了保留加载过程中不存在的元素,或避免添加大量重复的处理程序。为了提高效率,选择最近可靠的祖先,而不是添加到目标元素中document。! O8 |& C: S/ u2 ?! \9 X, Y. d
原生 JavaScript click me# r' S* V* l9 o) W7 n( C
jQuery的 on()jQuery 通过on(). 给出事件名称、所需后代的选择器和事件处理程序,它将分析您委托的事件处理并管理您this上下文:& C9 n. F6 B/ ~& ^
click me, h. o; L% y5 G3 x1 a, n: O
|
|
|
|
|
|