CODEWITHSUNDEEP
javascripthtml
Dan
Dan

Reputation: 57881

Find the tag JavaScript is running in

Generating HTML source on backend, I am using separate independent widgets.

I am simply including pieces of markup like this to the resulting HTML output.

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

I'm looking for a way to find the DOM element in which the obj is created (Without any unique IDs). This would add flexibility to my app and speed up the development. But is that technicaly possible in JavaScript?

Upvotes: 13

Views: 276

Answers (4)

Salman Arshad
Salman Arshad

Reputation: 272106

The following code works:

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

This method has very simple code and has almost zero impact on performance.

Note: I am pretty sure this won't work IE6 (as far as I remember it does not support manipulating open tags).

Upvotes: 6

Matt Lo
Matt Lo

Reputation: 5731

I believe your approach is not ideal. If you're trying to obtain the <div>, it should be done programmatically in a conventional way using JavaScript and the API's that empower you to query the target <div>

Instead of executing inline, you can execute in a separate scope in a controlled way (DOM Ready then Query then Your Method). You can target your div by using an ID, CSS class name, or any other CSS selector in JavaScript.

This allows you to pretty much do the follow anywhere you want, not inline.

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

Need to find your div? https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

Upvotes: 1

WebStakker
WebStakker

Reputation: 310

If you know beforehand how the page will be structured, you could use for example:

document.getElementsByTagName("div")[4]

to access the 5th div.

Upvotes: 0

Travis J
Travis J

Reputation: 82277

You could seed an element in there and then get it's parent, and then remove the element.

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

Upvotes: 10

Related Questions