Question

在后端生成HTML源代码，我使用单独的独立小部件。

我只是将这样的标记包含在生成的HTML输出中。

 <div>
     I want to work with this DOM element
     <script>
          new Obj(/*but I can't get this <div> as a parameter! */);
     </script>
 </div>

我正在寻找一种方法来查找创建obj的DOM元素（没有任何唯一ID）。这将增加我的应用程序的灵活性，并加快开发速度。但这在JavaScript中可以实现吗？

Answer 1

你可以在那里播种一个元素然后得到它的父元素，然后删除元素。

<div>
 I want to work with this DOM element
 <script>
      document.write("<div id='UniqueGUID_3477zZ7786_' style='display:none;'></div>");
      var thatDivYouWanted;
      (function(){
       var target = document.getElementById("UniqueGUID_3477zZ7786_");
       thatDivYouWanted = target.parentNode;
       target.parentNode.removeChild(target);
      })();
      new Obj(/*but I can't get this <div> as a parameter! */);
 </script>
</div>

Answer 2

以下代码有效：

<script>
  function Obj(color) {
    var scriptTags = document.getElementsByTagName("script");
    var scriptTag = scriptTags[scriptTags.length - 1];
    // find parent or do whatsoever
    var divTag = scriptTag.parentNode;
    divTag.style.backgroundColor = color;
  }
</script>


<div>
  I want to work with this DOM element
  <script>new Obj("green");</script>
</div>
<div>
  I want to work with this DOM element
  <script>new Obj("yellow");</script>
</div>
<div>
  I want to work with this DOM element
  <script>new Obj("lime");</script>
</div>

此方法代码非常简单，对性能的影响几乎为零。

注意：我很确定这对IE6不起作用（据我记得它不支持操作开放标签）。

Answer 3

我相信你的方法并不理想。如果您尝试获取<div>，则应使用JavaScript以及使您能够查询目标<div>

的API以常规方式以编程方式完成

您可以以受控方式在单独的作用域中执行（DOM Ready，然后是Query然后是您的方法），而不是执行内联。您可以使用ID，CSS类名称或JavaScript中的任何其他CSS选择器来定位div。

这使您可以随时随地进行操作，非内联。

// on dom ready...
var div = document.getElementById('myDiv'), // replace with any other selector method
    myObject = new Object(div);

需要找到你的div？ https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

Answer 4

如果您事先知道页面的结构，可以使用例如：

document.getElementsByTagName("div")[4]

访问第5个div。

找到JavaScript正在运行的标记

4 个答案: