[JS] Omgaan met whitespace in de DOM

[X-Lars]

Loop er nu regelmatig tegenaan dat ik rekening moet houden met (het ontbreken van) whitespace in de DOM. In bijvoorbeeld IE is deze whitespace niet aanwezig, in Firefox wel.

Onderstaand is een oplossing die je bij het doorlopen van de tree of een array kunt gebruiken (bron: http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM)

JavaScript:

function is_all_ws(nod) {
    // Use ECMA-262 Edition 3 String and RegExp features
    return !(/[^\t\n\r ]/.test(nod.data));
}

function is_ignorable(nod) {
    return ( nod.nodeType == 8) || // A comment node
         ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
}

Maar telkens die functie binnen een lus aanroepen is niet zo efficiënt. Het kan ook in een global variabele worden opgeslagen; zoiets:

JavaScript:

window.onload = function() {
    excludeWhitespace = is_ignorable(document.getElementsByTagName("body")[0].childNodes[0]);
}

En die variabele dan blijven gebruiken, bijvoorbeeld:

JavaScript:

var tabs = getElementsByClassName(ge('content'), 'H2', 'tab');
for(var i = 0; i < tabs.length; i++) {
  if(excludeWhitespace) {
    tabs[i].nextSibling.nextSibling.style.display = 'block';
  } else {
    tabs[i].nextSibling.style.display = 'block';            
  }
}

Beetje overdreven, maar hopelijk is het zo duidelijk. Ik ben benieuwd hoe jullie dit benaderen en of hier betere oplossingen voor zijn?

[ Voor 0% gewijzigd door X-Lars op 06-12-2006 16:56 . Reden: Tweede stuk code was niet goed (ook al was het maar ter illustratie) ]

[X-Lars]

*kick*

[Blaise]

Ik denk dat er voor elke situatie een andere beste oplossing is.

Ik heb nog geen ervaring met gecompliceerde problemen, maar toen ik het probleem tegenkwam kon ik het eenvoudig oplossen met getElementsByTagName(). In mijn destijdse zoektocht naar een oplossing kwam ik ook een functie tegen die gewoon alle whitespace uit een bepaald element stript voordat er een DOM functie op los wordt gelaten.

[X-Lars]

Ja, het ligt wel telkens aan de situatie. Maar ik was op zoek naar een snelle oplossing, omdat ik laatst een vrij groot Suckerfish menu had waarin nog het een en ander moest gebeuren on mouseover (omdat het design niet alleen met CSS op te lossen was). Dan wil je toch graag dat het allemaal soepel blijft werken. Dat deed het in dat geval ook wel, maar ik was toch benieuwd of hier een goede, generieke oplossing voor was.

Alhoewel, direct onload het betreffende deel van whitespace ontdoen is zeker geen slecht idee

[crisp]

Ik gebruik soms toch wel de functies zoals in dat mozilla artikel benoemd, maar meestal doe ik dat eenmalig in een initialisatie-fase en cache dan referenties die ik later weer nodig heb.
Verder zijn er situaties waarbij ik andere middelen gebruik zoals een eigen stack-based treewalker of getElementsByTagName.

Ik krijg in ieder geval kriebels als ik dingen als element.nextSibling.nextSibling zie staan; dat maakt je code wel erg breekbaar not to mention slecht leesbaar...

[X-Lars]

crisp schreef op donderdag 07 december 2006 @ 23:25:
[...]

Ik krijg in ieder geval kriebels als ik dingen als element.nextSibling.nextSibling zie staan; dat maakt je code wel erg breekbaar not to mention slecht leesbaar...

Dat was ook precies mijn punt... Het is geen goede oplossing. Maar whitespace weghalen of de boel cachen bij het initialiseren is een ieder geval een goed idee. Thanks folks!