como é que uma função de saber onde ele está localizado no DOM?

votos
3

Eu estou tentando escrever uma função javascript que adiciona alguns nós DOM para o documento no local onde foi chamado, assim:

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

eu tento fazê-lo 'limpa', sem o uso de propriedade do nó ID da div, ou string manipulação innerHTML. por isso eu preciso saber onde no documento a tag script está localizado. Existe uma forma de fazer isso?

Publicado 19/05/2009 em 16:47
fonte usuário
Em outras línguas...                            


5 respostas

votos
13

Falando de forma limpa, eu não acho que a sua abordagem é particularmente limpo. É uma idéia muito melhor para dar o div um id único e executar o seu JavaScript quando os fogos DocumentReady-evento.

Respondeu 19/05/2009 em 16:48
fonte usuário

votos
3

Você tem uma razão imperiosa para fazê-lo desta maneira? Se não a sugestão de usar uma identificação única que faz mais sentido. E você sempre pode usar uma biblioteca como jQuery para fazer isso ainda mais fácil para si mesmo.

No entanto, o seguinte teste rápido mostra que se você usar document.write () na função, em seguida, ele grava o valor para o lugar onde a função foi chamada de.

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

Mas, mais uma vez a questão, tem certeza que é isso que você quer fazer?

Respondeu 19/05/2009 em 16:56
fonte usuário

votos
2

Embora concorde com n3rd e votou-lo, eu entendo o que você está dizendo que você tem um desafio específico, onde você não pode adicionar um id para as divisões de html, a não ser por script.

Portanto, esta seria a minha sugestão para inlining um script consciente do seu lugar na hierarquia DOM, nesse caso:

  1. Adicionar um ID para o seu tag script . (Sim, tags de script pode ter ids, também.)

    • ex. <script id="specialagent" type="text/javascript">
  2. Adicionar uma linha para a sua função de script embutido que recebe o script elemento por id.
    • ex. this.script = document.getElementById('specialagent');
  3. ... E outro que recebe parentNode do elemento script.

    • ex. var targetEl = this.script.parentNode;
  4. Considerar a reestruturação sua função para uma função de auto-executioning, se você puder.

    • Idealmente ele executa imediatamente, sem a necessidade de uma chamada 'onload'.
    • veja o exemplo resumo, em seguida.

Sumário EXEMPLO:

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

O seguinte código de teste, quando executado, prova que a função identificou seu lugar no DOM, e, sobretudo, a sua parentNode. O teste tem os nós de divisão com um id, apenas para o propósito do teste. Eles não são necessários para a função de identificá-los, a não ser para testes.

Código de teste:

<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>
Respondeu 21/05/2009 em 03:00
fonte usuário

votos
0

minha solução é um compbination dos (bons) respostas postadas aqui:

como a função é chamada, ele vai document.write uma div com um id único. então document.onload que nó pai do div pode ser facilmente localizado e anexado novas crianças.

Eu escolhi esta abordagem, porque algumas restrições exclusivas: Eu não estou autorizado a tocar o código HTML que não seja a adição de elementos de script. realmente, pedir ao meu chefe ...

outra abordagem que mais tarde veio a mente:

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

embora, este deve falhar quando as coisas como o Firebug-se acrescentar como o último elemento no nó HTML antes de documento é feito o carregamento.

Respondeu 20/05/2009 em 10:41
fonte usuário

votos
0

Não sei o que a sua tentativa de alcançar, mas isso iria passar o elemento DOM para a função quando clicado. Você poderia, então, usar jquery na função de fazer o que você queria como assim

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

</div>
...
Respondeu 19/05/2009 em 16:52
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more