如何处理 DOM 元素？答案

【问题标题】：How to deal with DOM elements?如何处理 DOM 元素？
【发布时间】：2017-07-19 19:38:17
【问题描述】：

我正在学习如何为我的 Odoo 10 插件编写自定义 JavaScript。

我编写了以下代码：

odoo.define('ioio.io', function(require) {
  'use strict'

  const e = $('div.o_sub_menu_footer')
  console.log('--testing--'.repeat(7))
  console.log(e)

  // the "Powered by Odoo" down the secondary menu
  e.remove()
})

代码加载良好，我可以在控制台中看到我的测试字符串。
但是，当此代码在目标 div 之前加载时，e 为空/尚未填充，因此其内容不会被删除。
从控制台手动执行此操作。

我的问题是正确的方法是什么？以及如何准确知道代码何时执行？

【问题讨论】：

TIL String.repeat(n)!

标签： javascript openerp odoo-9 odoo-10

【解决方案1】：

你可以

将您的 html 代码放在文件中的脚本标记之前
使用jQuery $(document).ready(...);

【讨论】：

【解决方案2】：

将您的脚本放在<body> 标记的底部，以确保在尝试操作之前呈现 DOM。

【讨论】：

【解决方案3】：

这是一个 Odoo 特定的问题，因此您应该使用 Odoo 标准方式，即通过其 base JS 类。该类包含一个 ready() 方法，它可以满足您的需求。

在您的情况下，要使用该功能，您需要首先要求该类。然后你可以使用ready()。

更新您的代码，它应该如下所示：

odoo.define('ioio.io', function(require) {
  'use strict'

  // require base class
  var base = require('web_editor.base');

  //use its ready method
  base.ready().done(function () {

  // put all the code you want to get loaded 
  // once the DOM is loaded within this block

  const e = $('div.o_sub_menu_footer')
  console.log('--testing--'.repeat(7))
  console.log(e)

  // the "Powered by Odoo" down the secondary menu
  e.remove()
  });
})

虽然您接受的答案会导致相同的结果，但您可能希望将其更新为这个答案，因为这是 Odoo 方式。通常建议尽可能在 Odoo 框架内工作，并且仅在真正需要时进行自定义。（尽管由于文档不足，很难了解 Odoo 已经提供了哪些功能。）

【讨论】：