Toon posts:

[JS] Inhoud tag/element ophalen mbv DOM

Pagina: 1
Acties:
  • 101 views sinds 30-01-2008
  • Reageer

donderdag 30 juni 2005 21:51

Acties:

Verwijderd

Topicstarter
Heb een formuliertje gemaakt, waarbij ik gebruik maak van enkele <fieldset> elementen. Blijkt dat deze de een <legend> element moeten hebben als eerste child element.

Bij sommige fieldsets wil ik niet dat er iets boven staat, dus ik dacht; laat ik eens lege <legend> elementen gebruiken. Dit werkt wel, alleen komt er een kleine lege ruimte te staan.
Nu probeer ik dus de lege <legend> elementen mbv DOM JS en CSS onzichtbaar te maken, zodat de rand van de fieldset gewoon doorloopt, alsof er geen <legend> tag is.

Hiervoor gebruik ik de volgende code (gedeelte):
JavaScript:
1
2
3
4
5

// Hide empty FIELDSET legend elements (beauty fix)
var legends = document.getElementsByTagName( 'legend' );
for (var l = 0; l < legends.length; l++) {
    if (!legends[l].firstChild) { legends[l].style.display = 'none'; }
}

Ik heb GoT en Google gezocht voor oplossingen, maar ik heb niks werkends kunnen vinden.

Wat ik nu dus moet weten is hoe ik het beste kan checken of de <legend></legend> elementen leeg zijn of niet. Ik heb element.innerHTML geprobeerd, maar dat is niet DOM-compliant, dus ik probeerde element.firstChild.nodeValue, en die werkt weer niet.

Ik snap dus niet helemaal hoe ik aan de waarde van een text node kan komen...

Bij voorbaat dank!

PS Ik heb het script alleen nog getest op Firefox 1.0.4 (Windows).

[ Voor 24% gewijzigd door Verwijderd op 02-07-2005 12:59 ]

donderdag 30 juni 2005 21:55

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 11:13

André

Analytics dude

Niet getest, maar zo misschien:
code:
1

if (legends[l].childNodes.length == 0)

donderdag 30 juni 2005 22:00

Acties:

Verwijderd

Waarom voeg je een leeg legend element toe om het vervolgens weer te verbergen? Die legend is om uit te leggen wat de fieldset bevat. Als je er dan niets in zet, is dat net zo incorrect als de legend helemaal weglaten. Validatie is niet alles, zeker niet als je niet volledig begrijpt wat je aan het doen bent.

Wat je volgens mij beter kunt doen, is elke fieldset een zinvolle legend geven, en als je van een aantal fieldsets vindt dat de legend niet per se getoond hoeft te worden, kun je een class gebruiken om dat onderscheid te maken.

donderdag 30 juni 2005 22:13

Acties:

Verwijderd

Topicstarter
<fieldset> zonder <legend> ziet er trouwens niet uit in IE, dus ik heb ze er ook maar weer toegevoegd met enige tekst. En Cheatah, goed punt betreft 'correcte' HTML en lege <legend> elementen.

[ Voor 12% gewijzigd door Verwijderd op 30-06-2005 22:13 ]

zaterdag 2 juli 2005 04:32

Acties:

Verwijderd

Topicstarter
Ik snap dus niet helemaal hoe ik aan de waarde van een text node kan komen...
Mijn vraag is toch nog niet echt beantwoord... Iemand?

(Hoe ik aan de tekstuele waarde van een text node kan komen?)

zaterdag 2 juli 2005 10:23

Acties:

Verwijderd

Gokje. Dus legends[l].nodeValue != "" ofzo.

zaterdag 2 juli 2005 10:24

Acties:

Verwijderd

Met dit code snippet moet het wel lukken.

Java:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<html>
  <head>
    <script type="text/javascript">

/**
 
Zonder fieldset om de legend heen, kan je in IE wel een referentie naar het
element opvragen, maar lijkt het element geen childNodes te hebben. Dat lijkt
me een bug in Internet Explorer. FireFox doet het wel goed.

 */


window.onload = function () {
  var a = document.getElementById('a');
  var b = document.getElementById('b');

  var aIsEmpty = a.childNodes.length == 0;
  var bIsEmpty = b.childNodes.length == 0;
  alert("The legend with id 'a' is empty: " + aIsEmpty);
  alert("The legend with id 'b' is empty: " + bIsEmpty);
  

  if (b.childNodes.length == 1 && b.firstChild.nodeType == 3) {
    alert("The legend with id 'b' has one child of a TEXT_NODE type with value: " + b.firstChild.nodeValue);
  }
}
    </script>
  </head>
  <body>
    <fieldset>
      <legend id="a">asdf</legend>
    </fieldset>
    <fieldset>
      <legend id="b">asdfasdf</legend>
    </fieldset>
  </body>
</html>

[ Voor 14% gewijzigd door Verwijderd op 02-07-2005 10:24 ]

zaterdag 2 juli 2005 10:25

Acties:

Verwijderd

Voor Mozilla kun je overigens ook het volgende gebruiken:
Cascading Stylesheet:
1

legend:empty{display:none}

zaterdag 2 juli 2005 10:35

Acties:

Verwijderd

Is het eigenlijk niet makkelijker om gewoon een className op te geven? De empty pseudo-class werkt namelijk alleen in Mozilla en Safari. Aangezien je in Internet Explorer de boel ook wil verbergen, lijkt het me de makkelijkste oplossing als je een class attribuut aan je markup toevoegt.

zaterdag 2 juli 2005 12:58

Acties:

Verwijderd

Topicstarter
OF ie leeg is is het probleem niet meer, maar ik vraag me gewoon af hoe ik de tekst die tussen de <legend></legend> tags staat kan ophalen in JavaScript.

Het volgende werkt niet:
JavaScript:
1
2
3
4

var legends = document.getElementsByTagName( 'legend' );
for (var i = 0; i < legends.length; i++) {
    alert( legends[i].nodeValue ); // geeft overal null, óók als ie NIET leeg is...
}

[ Voor 12% gewijzigd door Verwijderd op 02-07-2005 12:59 ]

zaterdag 2 juli 2005 13:02

Acties:

Verwijderd

Je moet ook de nodeValue van de firstChild opvragen.

JavaScript:
1
2
3
4

var legends = document.getElementsByTagName( 'legend' );
for (var i = 0; i < legends.length; i++) {
    alert( legends[i].firstChild.nodeValue );
}


De in het document zichtbare tekst zit namelijk altijd in een textNode. Die textNode is een child van je legend element.

[ Voor 44% gewijzigd door Verwijderd op 02-07-2005 13:04 ]

zaterdag 2 juli 2005 13:03

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

een textNode is een aparte node binnen het legend-element; dit zou dus moeten werken:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var legends = document.getElementsByTagName( 'legend' );
for (var i = 0; i < legends.length; i++)
{
    if (legends[i].firstChild)
    {
        if (legends[i].firstChild.nodeType == 3)
        {
            alert( legends[i].firstChild.nodeValue );
        }
        else
        {
            alert('firstChild is not a textNode');
        }
    }
    else
    {
        alert('Element does not have a childNode');
    }
}

Intentionally left blank

zaterdag 2 juli 2005 13:03

Acties:

Verwijderd

Topicstarter
My bad... heb het al gevonden... Moest zorgen dat ik de first child node pak (de text node in het <legend> element) en daarvan de nodeValue uitlezen;

JavaScript:
1
2
3
4

var legends = document.getElementsByTagName( 'legend' );
for (var i = 0; i < legends.length; i++) {
    alert( legends[i].firstChild.nodeValue );
}


[edit] Te laaaaaat..... :D

[ Voor 9% gewijzigd door Verwijderd op 02-07-2005 13:05 ]

donderdag 7 juli 2005 13:37

Acties:

Verwijderd

Topicstarter
Ik kwam erachter dat met behulp van firstChild.nodeValue om de waarde van een text node op te vragen niet de actuele waarde teruggeeft. Alleen de waarde die in de originele HTML staat...

Bij user input velden als een <textarea> is het vaak belangrijk om de actuele waarde terug te krijgen in JavaScript.

Heeft het gebruik van textarea.value (in JS) nadelen (mbt het DOM en cross-browser compatibility)?

donderdag 7 juli 2005 13:50

Acties:

Verwijderd

Verwijderd schreef op donderdag 07 juli 2005 @ 13:37:

Heeft het gebruik van textarea.value (in JS) nadelen (mbt het DOM en cross-browser compatibility)?
Waarom zou je problemen verwachten? Die .value property is gewoon beschreven in HTML DOM.
Pagina: 1
Reageer