函數如何知道它在DOM中的位置？

我想寫一個JavaScript函數，增加了一些DOM節點的地方文件，它被稱爲像這樣：函數如何知道它在DOM中的位置？

... 
<div> 
    <script type="text/javascript"> 
    pushStuffToDOMHere(args); 
    </script> 
</div> 
...

我嘗試做「乾淨」，不使用節點ID屬性div或innerHTML字符串操作。爲此，我需要知道腳本標籤所在文檔的位置。有沒有辦法做到這一點？

來源

2009-05-19 Amir Arad

這是在文檔中的唯一DIV？ – TStamper 2009-05-19 15:49:17

@TStamper - 這可能是真的：P – annakata 2009-05-19 15:55:31

談到乾淨，我不認爲你的方法是特別乾淨。在DocumentReady事件觸發時給div一個唯一的id並執行你的javascript是個好主意。

來源

2009-05-19 15:48:56 n3rd

和另一個文件共同 – 2009-05-19 16:01:40

不太確定你想要達到什麼目標，但是這會在點擊時將dom元素傳遞給函數。然後，你可以在功能中使用jQuery來做你想要的東西

... 
<script type="text/javascript"> 
    function pushStuffToDOMHere(element) 
    { 
      $(element).append("<p>Hello</p>"); // or whatever 
    } 
</script> 
<div onclick="pushStuffToDOMHere(this);"> 

</div> 
...

來源

2009-05-19 15:52:36 Sheff

你有這樣做的首要原因嗎？如果不是，建議使用唯一的ID是最有意義的。而且你總是可以使用像jQuery這樣的庫來讓你更容易。

但是，下面的快速測試顯示，如果在函數中使用document.write（），則它會將值寫入函數被調用的位置。

<html> 
<head> 
    <script type="text/javascript"> 
      function dosomething(arg){ 
       document.write(arg); 
      } 
    </script> 
</head> 
<body> 
<div>The first Div</div> 
<div>The 
    <script type="text/javascript"> 
      dosomething("Second"); 
    </script> 
     Div 
</div> 
<div>The 
     <script type="text/javascript"> 
      dosomething("Third"); 
     </script> 
     Div 
    </div> 
    </body> 
</html>

但是，再次問題，你確定這是你想要做的嗎？

來源

2009-05-19 15:56:49

我的解決辦法是張貼在這裏（好）答案的compbination：

的函數被調用，它將文件撰寫一個div有唯一的ID。然後在document.onload上可以很容易找到div的父節點並附加新的子節點。

我選擇這種方法是因爲一些獨特的限制：除了添加腳本元素之外，我不允許觸摸HTML代碼。真的，問我的老闆......

，後來來考慮另一種方法：

function whereMI(node){ 
    return (node.nodeName=='SCRIPT')? node : whereMI(node.lastChild); 
} 
var scriptNode = whereMI(document);

雖然，當事情像螢火蟲追加自己作爲HTML節點的最後一個元素文檔之前完成這會失敗加載。

來源

2009-05-20 09:41:03

儘管我同意n3rd並投票給他，但我明白你的意思，你有一個具體的挑戰，你不能在html分支中添加一個id，除非通過腳本。

因此，這將是我的內聯腳本意識到它在DOM層次的地方，在這種情況下，建議：

添加ID您腳本標籤。（是的，腳本標籤也可以有ID。）
- ex。<script id="specialagent" type="text/javascript">
將一行添加到您的內聯腳本函數中，該函數通過id獲取腳本元素。
- ex。 this.script = document.getElementById('specialagent');
......另一個獲取腳本元素的父節點。
- ex。 var targetEl = this.script.parentNode;
考慮將函數重構爲自執行函數，如果可以的話。
- 理想情況下，它立即執行，而不需要'onload'調用。
- 請參閱下一個摘要示例。

發明內容實施例：

<script id="specialagent" type="text/javascript"> 
var callMe = function(arg1,arg2,arg3) { 
    this.script = document.getElementById('specialagent'); 
    var targetEl = this.script.parentNode.nodeName=="DIV" && this.script.parentNode; 
    //...your node manipulation here... 
}('arg1','arg2','arg3'); 
</script>

下面的測試代碼，運行時，證明了功能已經確定它的位置在DOM，並且，重要的是，它的parentNode。測試具有帶ID的分節點，僅用於測試目的。除了測試以外，它們對於識別它們的功能不是必需的。

TEST CODE：

<html> 
<head> 
<title>Test In place node creation with JS</title> 
</head> 
<body> 
<div id="one"> 
    <h2>Child of one</h2> 
    <div id="two"> 
      <h2>Child of two</h2> 
      <script id="specialagent" type="text/javascript"> 
      var callMe = function(arg1,arg2,arg3) { 
       this.script = document.getElementById('specialagent'); 
       var targetEl = this.script.parentNode; 
       /*BEGIN TEST*/ 
       alert('this.script.id: ' + this.script.id); 
       alert('targetEl.nodeName: ' + targetEl.nodeName + '\ntargetEl.id: '+targetEl.id); 
       alert('targetEl.childNodes.length: ' + targetEl.childNodes.length); 
       var i = 0; 
       while (i < targetEl.childNodes.length) { 
        alert('targetEl.childNodes.'+i+'.nodeName = ' + targetEl.childNodes[i].nodeName); 
        ++i; 
       } 
       /*END TEST - delete when done*/  
       //...rest of your code here...to manipulate nodes 
      }('arg1','arg2','etc'); 
      </script> 
    </div> 
</div> 
</body> 
</html>

來源

2009-05-21 02:00:55

函數如何知道它在DOM中的位置？

回答

相關問題