[JS] code replace om en om met parentNode.replaceChild

[orf]

Ik probeer met Javascript <h1>titel</h1> te vervangen door een Flash movie met de titel erin.
Daarvoor gebruik ik deze code:

JavaScript:

function embedFlash(movie, id, flashvars, width, height) {

  html  = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"';
  html += ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"';
  html += ' id="' + id + '" width="' + width + '" height="' + height + '">';
  html += '<param name="movie" value="' + movie + '">';
  html += '<param name="bgcolor" value="#FFFFFF">';
  html += '<param name="quality" value="high">';
  html += '<param name="loop" value="false">';
  html += '<param name="flashvars" value="'+ flashvars + '">';
  html += '<param name="menu" value="false">';
  html += '<param name="wmode" value="transparent">';
  html += '<param name="allowscriptaccess" value="samedomain">';
  if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) {
    html += '<embed name="' + id + '" src="' + movie + '"';
    html += ' quality="high" bgcolor="#FFFFFF" menu="false" swLiveConnect="true" allowScriptAccess="sameDomain"';
    html += ' width="' + width + '" height="' + height + '" wmode="transparent"';
    html += ' type="application/x-shockwave-flash"';
    html += ' flashvars="' + flashvars + '"';
    html += ' pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>';
  }
  html += '</object>';
  return html;
}

function replaceHeadings(){

  var heading1 = document.getElementsByTagName('h1');
  alert(heading1.length);
  for (var i=0; i < heading1.length; i++){
    alert(heading1[i].innerHTML);
    var div = document.createElement('div');
    div.innerHTML = embedFlash('flash/heading1.swf', 'flash_heading', 'title=' + escape(heading1[i].innerHTML.replace('&amp;','&')), '100%', '25');
    heading1[i].parentNode.replaceChild(div, heading1[i]);
  }
}

onload = replaceHeadings;

Als ik nu in een document dit zet:

<h1>titel 1</h1>
<h1>titel 2</h1>
<h1>titel 3</h1>
<h1>titel 4</h1>

dan geeft mijn eerste alert(heading1.length) netjes 4 aan. De tweede geeft echter alleen maar titel 1, titel 3 aan en ook titel 1 en 3 worden daadwerkelijk vervangen door de Flash movie. Als ik meer <h1> toevoeg, blijft het alleen maar werken bij de oneven elementen.

Ik snap er werkelijk niets van; nergens in de code zie ik iets dat ervoor zou moeten zorgen dat alleen oneven voorkomende headings replaced moeten worden.

Iemand een idee wat ik fout doe?

[Brakkie]

Is dit om je javascript skills te verbeteren of heb je nog nooit van sifr gehoord?

http://www.mikeindustries.com/sifr/

[ Voor 20% gewijzigd door Brakkie op 25-01-2006 18:37 ]

[orf]

Ken flash replacement wel, maar gebruik liever een enkele functie voor de headings.

[crisp]

heading1 is een dynamische collection, dus als je al je headers wilt vervangen zou ik het van achter naar voren doen:

JavaScript:

var heading1 = document.getElementsByTagName('h1');
var i = heading1.length;
while (i--)
{
  // vervangen
}

[orf]

Aha, thanks!

Dit is vast gelukt. Heb je misschien een linkje naar documentatie hierover? Ik weet niets van dynamische collections en kan er ook niets over vinden met Google of op bijvoorbeeld quirksmode.

nogmaals dank.

[BtM909]

Gisteravond hele reply te tikken, lag GoT eruit

Komt ie nog een keer:

Wat crisp bedoelt met je dynamic collection:
Je wilt de volgende vier headings vervangen, die je in een array hebt.

0 <h1>titel 1</h1>
1 <h1>titel 2</h1>
2 <h1>titel 3</h1>
3 <h1>titel 4</h1>

In je loop vervang je de eerste (0) en telt daarna 1 op bij je teller.

Wat dus betekent dat je lijst van hierboven na de vervanging is veranderd:
0 <h1>titel 2</h1>
1 <h1>titel 3</h1>
2 <h1>titel 4</h1>

Als je nu dan je teller gaat optellen, dan sla je de eerste (0) in dit geval over

De optie van crisp is daarom het makkelijkste. Die blijft automatisch doorgaan tot en met de laatste in je collection. Duidelijk zo?

[orf]

Duidelijk zo?

Zeer duidelijk!
(en nogal dom dat ik deze uitleg ervoor nodig had)
Bedankt!

[ Voor 5% gewijzigd door orf op 26-01-2006 16:57 ]

[BtM909]

en nogal dom dat ik deze uitleg ervoor nodig had

Domme vragen bestaan niet

[Verwijderd]

crisp schreef op woensdag 25 januari 2006 @ 20:33:
heading1 is een dynamische collection, dus als je al je headers wilt vervangen zou ik het van achter naar voren doen:

JavaScript:

var heading1 = document.getElementsByTagName('h1');
var i = heading1.length;
while (i--)
{
  // vervangen
}

Crisp refereert hier aan het princiepe dat NodeLists live zijn. Even een quote uit de DOM Core Level 2 standaard.

"The DOM also specifies a NodeList interface to handle ordered lists of Nodes, such as the children of a Node, or the elements returned by the getElementsByTagName method of the Element interface, and also a NamedNodeMap interface to handle unordered sets of nodes referenced by their name attribute, such as the attributes of an Element. NodeList and NamedNodeMap objects in the DOM are live; that is, changes to the underlying document structure are reflected in all relevant NodeList and NamedNodeMap objects."

Bron: DOM Core Level 2, The DOM Structure Model