Question

关于使用＆＃34;这个＆＃34;我有一个非常基本的问题。用于检索DOM元素的关键字。

考虑以下HTML / Javascript：

<div class="container">
    <div class="regular-div">
        <script type="text/javascript">
            console.log(this);
        </script>
        Here is a div withOUT onclick
    </div>
    <div class="onclick-div" onclick="console.log(this)">
        Here is a div with onclick
    </div>
</div>

点击＆＃34; onclick-div＆＃34;它确实返回该div的DOM对象。但是，console.log事件会调用＆＃39; this＆＃39;间接地在＆＃34; regular-div＆＃34;并返回窗口。

是否可以获得＆＃34;这个＆＃34; DOM对象当＆＃39;这个＆＃39;被间接称为？我的目的是想在HTML中激活一个函数，但需要发送函数＆＃34; this＆＃34;。以下是我尝试做的一个例子：

<div class="container">
    <div class="regular-div">
        <script type="text/javascript">
            loadSomeHTML(this, varA, varB, varC);
        </script>
    </div>
</div>

感谢大家澄清＆＃34;这个＆＃34;在上述情况下工作。

Answer 1

在您的第一个示例中，脚本与div没有任何关联。它只是在div中输出，但它没有连接到它。该脚本在解析页面时运行。

是否有可能在没有用户交互的情况下获得“此”DOM对象？

如果你的意思是内联解析HTML，你可以这样做：

<div class="container">
    <div class="regular-div">
        Here is a div withOUT onclick
    </div>
    <script type="text/javascript">
    (function() {
        var list = document.querySelectorAll('div');
        console.log(list[list.length - 1]);
    })();
    </script>
</div>

请注意，script标记紧跟在您尝试定位的</div>的结束div标记之后。该脚本在脚本运行时获取当前文档中的最后一个div。或者当然，您可以以某种方式识别div（例如，一个类）并使用它（然后可能将其删除，以便您稍后可以在文档中再次执行此操作）。

看起来很狡猾，但它完全有效的跨浏览器，甚至是recommended at one stage by the Google Closure Library engineers。

直播示例：

<div class="container">
  <div class="regular-div">
    Here is a div withOUT onclick (look in console for result)
  </div>
  <script type="text/javascript">
    (function() {
      var list = document.querySelectorAll('div');
      console.log(list[list.length - 1]);
    })();
  </script>
</div>

使用我们移动的课程的示例：

<div class="container">
  <div class="target-me">
    The first div
  </div>
  <script type="text/javascript">
    (function() {
      var div = document.querySelector(".target-me");
      div.classList.remove("target-me");
      console.log(div);
    })();
  </script>
  <div class="target-me">
    The second div
  </div>
  <script type="text/javascript">
    (function() {
      var div = document.querySelector(".target-me");
      div.classList.remove("target-me");
      console.log(div);
    })();
  </script>
</div>

注意我没有使用id，因为如果我们使用id并且未启用JavaScript，我们最终会得到一个无效的文档（因为它会有多个元素与相同的id）。如果启用了JavaScript，那就好了（因为我们会在之前创建之前从之前删除id），但是......

Answer 2

Javascript与HTML DOM没有隐式连接。 onclick以你想要的方式工作的原因是因为HTML DOM实现将元素传递给js回调。在其他情况下，您需要做类似的事情。一种方法是：

<div class="container">
    <div class="regular-div" id="mydiv">
        <script type="text/javascript">
            loadSomeHTML("#mydiv", varA, varB, varC);
        </script>
    </div>
</div>

然后你的js实现执行查找以找到元素：

function loadSomeHTML(selector, varA, varB, varC) {
    var el = document.querySelector(selector);
    // now el is where you want to insert your HTML
    // ...
}

Answer 3

script标记内的代码与标记本身没有任何关联。 this基本上应该返回调用当前函数的对象或全局环境window。在第一个div中，代码只是在没有对象的情况下执行，因此返回window。另一方面，onclick的值被视为一个函数（甚至有一些参数，如e），在具有该属性的元素上调用。因此，script元素中的代码在全局范围内执行，而属性中的代码位于函数范围内（这就是为什么所有var在{{1}之间共享的原因标签）。

Answer 4

如How may I reference the script tag that loaded the currently-executing script?中所述，获取对正在执行其代码的script元素的引用的正确方法是

document.currentScript;

然后，要获取该元素的父节点，请使用

document.currentScript.parentNode;

＆＃13;

<div class="container">
  <div id="regular-div">
    <script type="text/javascript">
      alert('#' + document.currentScript.parentNode.id);
    </script>
    Here is a div withOUT onclick
  </div>
</div>

＆＃13;

为什么我无法检索＆＃34;这个＆＃34;没有onclick的dom元素？

4 个答案: