Question

我正在学习JavaScript并试图将它与Ruby on Rails一起使用。我有默认的Rails项目结构，我创建了一个简单的 assets / javascript / test.js 文件。

资产/ JavaScript的/ test.js：

elements = document.getElementsByTagName('BODY');
console.log(elements[0]);

控制台中的结果是未定义的，但是当我添加下一个代码时：

var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
    document.writeln(elements[i].tagName);
}

elements = document.getElementsByTagName('BODY');
console.log(elements[0]);

结果符合预期 - 身体标签。你可以解释一下发生了什么以及如何从js访问body标签及其元素吗？

使用：

console.log (document.body);

在控制台中也显示为null。

Answer 1

您需要将JS包装在DOM ready事件中：

$(document).ready(function() {
  //your code goes here
});

如果是带有Turbolinks的Rails：

.coffee

ready = ->
  //your coffeescript goes here

$(document).ready(ready)
$(document).on('page:load', ready)

的.js

var ready = function() {
  //your javascript goes here
};

$(document).ready(ready);
$(document).on('page:load', ready);

您的 assets / javascript / test.js 文件：

var ready = function() {
  console.log(document.body);
};

$(document).ready(ready);
$(document).on('page:load', ready);

<强>解释

来自Using jQuery Core：

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object Model（DOM）已准备好执行JavaScript代码。代码包括在内在$（window）.load（function（）{...}）里面会运行整个页面（图片或iframe），而不仅仅是DOM，已准备就绪。

JS在文档中遇到后立即执行。 Rails通常通过application.js文件导入您的JS，该文件加载在文档的头部。此时，文档的其余部分甚至没有加载，因此JS执行并找到部分未完成的DOM - 尚未呈现正文。

要推迟执行你的JS，你可以用 $（document）.ready 事件包装它 - 也就是注册它。您可以跨多个文件多次调用 $（document）.ready 。通常最好用它包装你的文件。

加载整个文档后，所有DOM元素都已加载，jQuery将触发准备好事件，并且所有使用 $（document）.ready 注册的代码都将获得执行。

<强> Turbolinks

来自Working with JavaScript in Rails # Turbolinks：

Turbolinks将点击处理程序附加到页面上的所有<a>。如果你的   浏览器支持PushState，Turbolinks会发出Ajax请求   页面，解析响应，并替换整个   带有响应的页面。然后它将使用PushState   将URL更改为正确的URL，保留刷新语义和   给你漂亮的URL。

编写CoffeeScript时，您经常要做某种事情   页面加载时处理。使用jQuery，你可以编写类似的东西   这样：
$(document).ready ->
  alert "page has loaded!"
但是，由于Turbolinks会覆盖正常的页面加载过程，这种依赖的事件不会被解雇。如果你有代码看起来像这样，你必须改变代码才能做到这一点：
$(document).on "page:change", ->
  alert "page has loaded!"

<强>资源：

在Rails应用程序中运行JavaScript

1 个答案: