Найти тег JavaScript работает в

Создавая исходный 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>

Я ищу способ найти элемент DOM, в котором создается obj (без каких-либо уникальных идентификаторов). Это добавит гибкости моему приложению и ускорит разработку. Но возможно ли это в JavaScript?

Ответ 1

Работает следующий код:

<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>

Ответ 2

Вы можете засеять элемент, а затем получить его родительским, а затем удалить элемент.

<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>

Ответ 3

Я считаю, что ваш подход не идеален. Если вы пытаетесь получить <div>, это должно быть сделано программно обычным способом с использованием JavaScript и API, которые позволяют вам запрашивать целевой <div>

Вместо того, чтобы выполнять встроенную функцию, вы можете выполнять ее в отдельной области контролируемым образом (DOM Ready, затем Query, затем ваш метод). Вы можете настроить таргетинг своего div с помощью идентификатора, имени класса CSS или любого другого селектора CSS в JavaScript.

Это позволяет вам в значительной степени выполнять все, что угодно, не в строке.

// 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

Ответ 4

Если вы заранее знаете, как страница будет структурирована, вы можете использовать, например:

document.getElementsByTagName("div")[4]

для доступа к 5-му div.