代码之家 › 专栏 › 技术社区 › Mac_W

id od node元素与innerhtml不同[重复]

html5 javascript

0

Mac_W · 技术社区 · 7 年前

可能的原因是什么 document.getElementById , $("#id") 或者其他没有找到元素的dom方法/jquery选择器?

示例问题包括:

jquery未自动绑定事件处理程序
jquery“getter”方法( .val() , .html() , .text() )返回 undefined
返回的标准DOM方法 null 导致以下任一错误:

未捕获的类型错误:无法设置空的属性“…” 未捕获的类型错误:无法读取空的属性“…”

最常见的形式是:

未捕获的类型错误:无法将属性“onclick”设置为空

未捕获的类型错误:无法读取空的属性“addEventListener”

未捕获的类型错误:无法读取空的属性“Style”

0 回复 | 直到 6 年前

1

2

CertainPerformance 5 年前

你试图找到的元素不在 DOM 当你的脚本运行时。

依赖于DOM的脚本的位置可能对其行为产生深远的影响。浏览器从上到下分析HTML文档。元素被添加到DOM中,脚本(通常)在遇到它们时执行。 这意味着秩序很重要。 通常,脚本找不到稍后出现在标记中的元素,因为这些元素尚未添加到DOM中。

考虑以下标记;脚本1未能找到 <div> 虽然脚本2成功:

<script>
  console.log("script #1: %o", document.getElementById("test")); // null
</script>
<div id="test">test div</div>
<script>
  console.log("script #2: %o", 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: %o", this);
    });
  </script>
</body><!-- closing body tag -->

_{注意:在底部放置脚本通常被认为是

best practice

。}

选项2:jquery `ready()`

将脚本延迟到DOM完全分析完毕,使用 ready() :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#test").click(function() {
      console.log("clicked: %o", this);
    });
  });
</script>
<button id="test">click me</button>

_{注意:您可以简单地绑定到

DOMContentLoaded

或

window.

onload

但每个人都有自己的警告。jquery的

准备就绪()

提供混合解决方案。}

选项3:事件委托

Delegated events 其优点是,它们可以处理以后添加到文档中的后代元素中的事件。

当一个元素引发一个事件(前提是它是 bubbling 事件和任何东西都不会停止它的传播),元素祖先中的每个父元素也会接收事件。这允许我们在现有元素和示例事件从其后代冒泡时将处理程序附加到它们…即使是在附加处理程序之后添加的。我们所要做的就是检查事件,看它是否由所需的元素引发,如果是的话,运行我们的代码。

jquery的 on() 为我们执行这个逻辑。我们只提供一个事件名、所需子代的选择器和一个事件处理程序:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).on("click", "#test", function(e) {
    console.log("clicked: %o",  this);
  });
</script>
<button id="test">click me</button>

_{注意:通常,此模式是为加载时不存在的元素保留的。

或

以避免附加大量的处理程序。当我将一个处理程序附加到

document

(出于演示目的),您应该选择最近的可靠祖先。}

选项4: `defer` 属性

使用 defer 的属性 <script> .

[ 推迟 ,布尔属性,]设置为向浏览器指示在分析文档后要执行脚本。

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

作为参考,这里是代码 external script :

document.getElementById("test").addEventListener("click", function(e){
   console.log("clicked: %o", this); 
});

_{注:该

推迟

属性当然可以

似乎

就像一颗神奇的子弹

但是

重要的是要知道注意事项…

1。

推迟

只能用于外部脚本,即那些具有

src

属性。

2。注意

browser support

,即:Ie<10中的Buggy实现}

2

0

Mia Davis 6 年前

简明扼要: 因为您要查找的元素尚不存在于文档中。

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

可能的原因

元素可能不存在的原因有两个:

文档中确实不存在具有传递的ID的元素。你应该仔细检查一下你的身份证 按ID获取元素 确实匹配(生成的)HTML中现有元素的ID,但您没有 拼写错误 ID(ID是 区分大小写 !).

顺便说一下,在 majority of contemporary browsers ,实现 querySelector() 和 querySelectorAll() 方法,使用CSS样式的表示法 id ,例如: document.querySelector('#elementID') ,而不是通过其 身份证件 在下面 document.getElementById('elementID') ;一开始 # 字符是必需的,在第二个字符中,它将导致元素无法检索。
元素不存在目前你打电话来 按ID获取元素 .

后一种情况很常见。浏览器从上到下分析和处理HTML。这意味着,对DOM元素的任何调用(在该DOM元素出现在HTML中之前发生)都将失败。

请考虑以下示例:

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

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

这个 div 出现之后这个 script . 在执行脚本时,元素不存在然而和 按ID获取元素 会回来的 null 。

JQuery

这同样适用于使用jquery的所有选择器。如果您 拼写错误 您的选择器或您正在尝试选择它们 在它们真正存在之前 。

如果找不到jquery,则会出现一个附加的扭曲,因为您已经加载了没有协议的脚本,并且正在从文件系统运行:

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

此语法用于允许脚本通过https在协议为https://的页面上加载,以及在协议为http://的页面上加载http版本。/

它具有尝试加载和失败加载的不幸副作用 file://somecdn.somewhere.com...

解决

在你打电话给 按ID获取元素 (或与此相关的任何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
});

请看 articles at quirksmode.org 有关事件处理和浏览器差异的详细信息。

JQuery

首先确保jquery加载正确。 Use the browser's developer tools 找出是否找到jquery文件,如果没有找到,则更正URL(例如,添加 http: 或 https: 开始的方案,调整路径等)

倾听 负载 / 已加载domcontentloaded 事件正是jquery所处理的。 .ready() ^[docs] . 影响dom元素的所有jquery代码都应该在该事件处理程序中。

事实上, jQuery tutorial 明确说明:

正如我们在使用jquery时所做的几乎所有操作都读取或操作文档对象模型(DOM)一样,我们需要确保在准备好DOM后立即开始添加事件等。

为此,我们为文档注册一个就绪事件。
$(document).ready(function() {
   // do stuff when DOM is ready
});

或者,您也可以使用速记语法:

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

两者都是等效的。

id od node元素与innerhtml不同[重复]

选项1:移动脚本

选项2:jquery ready()

选项3:事件委托

选项4: defer 属性

选项2:jquery `ready()`

选项4: `defer` 属性