函数如何知道它在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中的位置？

回答

相关问题