Stefan: Properties einer Liste?

SELF-Forum

Properties einer Liste?

Stefan
– Informationen zu den Bewertungsregeln

Guten Abend zusammen,

ich möchte mittels JavaScript die Items einer Liste (<ul>) entfernen bzw. neue hinzufügen. Allerdings suche ich verzweifelt nach den entsprechenden Properties für eine Liste.

Über document.getElementById() hole ich mir die Liste, leider ist sowohl die Eigenschaft .rows als auch .items nicht richtig. Kann mir jemand weiterhelfen?

MFG
Stefan

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Properties einer Liste?

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    ich möchte mittels JavaScript die Items einer Liste (<ul>) entfernen bzw. neue hinzufügen. Allerdings suche ich verzweifelt nach den entsprechenden Properties für eine Liste.

    es gibt keine. Ein <ul> ist ein stinknormales HTML-Element, welches ein stinknormales Content-Modell besitzt und stinknormale Kinder hat. Es gibt keinen[1] Unterschied zu z.B. einem <div> mit vielen <p>. Nutze also die selben Methoden, mit denen Du diese <p> innerhalb dieses <div> erhalten würdest.

    Cheatah

    [1] Nun ja, ein <p> darf kein <p> enthalten, ein <li> aber indirekt ein <li>.

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Properties einer Liste?

      Mathias Brodala Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Cheatah.

      ich möchte mittels JavaScript die Items einer Liste (<ul>) entfernen bzw. neue hinzufügen. Allerdings suche ich verzweifelt nach den entsprechenden Properties für eine Liste.

      es gibt keine. Ein <ul> ist ein stinknormales HTML-Element, welches ein stinknormales Content-Modell besitzt und stinknormale Kinder hat.

      Meine Güte riecht es hier merkwürdig.

      Einen schönen Donnerstag noch.

      Gruß, Mathias

      --
      ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
      debian/rules
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Properties einer Liste?

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        es gibt keine. Ein <ul> ist ein stinknormales HTML-Element, welches ein stinknormales Content-Modell besitzt und stinknormale Kinder hat.

        Meine Güte riecht es hier merkwürdig.

        Wieso merkwürdig?
        Es riecht _normal_.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Properties einer Liste?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hello out there!

      Ein <ul> ist ein stinknormales HTML-Element, welches ein stinknormales Content-Modell besitzt und stinknormale Kinder hat. Es gibt keinen[1] Unterschied zu z.B. einem <div> mit vielen <p>.

      Doch: die Semantik des Markups. Also, dass du das nicht weißt ...

      See ya up the road,
      Gun*SCNR*nar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Properties einer Liste?

    twseiten_de Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    hier eine Anregung:

    beim Internet Explorer gilt für das UL-Objekt:
    http://msdn2.microsoft.com/en-us/library/ms535914.aspx

    Es gibt folgende Collectionen (Zeigerfelder)

    all Returns a reference to the collection of elements contained by the object.

    attributes Retrieves a collection of attributes of the object.

    childNodes Retrieves a collection of HTML Elements and TextNode objects that are direct descendants of the specified object.

    children Retrieves a collection of DHTML Objects that are direct descendants of the object. Mit DHTML-Objekts sind HTML-Tags gemeint.

    Die HTML-DOM-Funktionen

    document.createElement()     HTML-Objekt erzeugen
    document.body.appendChild()  erzeugtes HTML-Objekt in den DOM
                                  einbinden: hier in body anhängen
    objekt_zeiger.appendChild()  erzeugtes HZML-Objekt in den DOM
                                  einbinden: hier in das Objekt laut
                                  zeiger anhängen

    erzeugen Objekte.

    Zur Verwaltung der Objekte sind neben o.g. Collectionen auch noch
    andere HTML-DOM-Funktionen verfügbar.

    Achtung: Collectionen können browserspezifisch sein.

    Nachfolgend ein paar angaben zum HTML-DOM des IE an Beispielen zum
    UL-Objekt.

    Gruss Tom

    Eigenschaften des DOM AB IE 5.x

    firstChild   Referenz des ERSTEN Kindes laut childNodes collection eines Objektes

    Syntax
       [ oElement = ] object.firstChild

    nur lesen

    Example

    <SCRIPT>
    var oFirstChild = oList.firstChild; // liefert Referenz auf List Item 1
    </SCRIPT>

    <BODY>
    <UL ID = oList>
    <LI>List Item 1
    <LI>List Item 2
    <LI>List Item 3
    </UL>
    <BODY>

    ======================================================================================

    lastChild   Referenz des ERSTEN Kindes laut childNodes collection eines Objektes

    Syntax
       [ oElement = ] object.lastChild

    nur lesen
    Example

    <SCRIPT>
    var olastChild = oList.lastChild; // lieferr Referenz auf List Item 3
    </SCRIPT>

    <BODY>
    <UL ID = "oList">
    <LI>List Item 1
    <LI>List Item 2
    <LI>List Item 3
    </UL>

    <BODY>

    ======================================================================================

    nextSibling  Referenz des Nachfolgerkindes laut childNodes collection eines Objektes

    Syntax
       [ oElement = ] object.nextSibling

    nur lesen

    Example

    This example uses the nextSibling property to obtain the next item in the list.

    <SCRIPT>
    var oSibling = oList.childNodes(0).nextSibling; // liefert Zeiger auf List Item 2
    </SCRIPT>

    <BODY>
    <UL ID = oList>
    <LI>List Item 1
    <LI>List Item 2
    <LI>List Item 3
    </UL>
    <BODY>

    ======================================================================================

    nodeName   String als Name des Knoten, also
        TAG-Bezeichner
        Attribut-Name
        #text für Anker

    Syntax

    [ sName = ] object.nodeName

    nur lesen

    Example

    <SCRIPT>
    // returns the element name 'LI' of the list item labeled 'List Item 2'
    var sName = oList.childNodes(1).nodeName;
    </SCRIPT>

    <BODY>
    <UL ID = oList>
    <LI>List Item 1
    <LI>List Item 2
    <LI>List Item 3
    </UL>
    </BODY>

    ======================================================================================

    nodeType   Knotentyp laut attributes collection

    Syntax
       [ iType = ] object.nodeType

    liefert  1 Element node.
       3 Text node.
       null wenn Knoten nicht vorhanden

    nur lesen

    Example 1

    var iType = document.body.nodeType; // Knotentyp des BODY-Objektes

    Example 2

    var oNode = document.createElement("B");
    document.body.insertBefore(oNode);
    var iType = oNode.nodeType;

    ======================================================================================

    nodeValue   Knotenwert setzen bzw. lesen

    Syntax
       object.nodeValue [ = sValue ]

    sValue Variant null-Wert (nicht 0-Wert hier gemeint sonder Schlüsselwert null) auch möglich
         wenn nicht kodiert so lesen:
         wenn Textnode so der Inhalt geliefert
         wenn Knoten nicht vorhanden oder Knoten ein Elelemt node,
           so null geliefert
         wenn Knoten ein Attribut-Objekt ist, dann Attributwert geliefert
     lesen und schreiben

    Example

    This example alters the text of the specified list item by setting the nodeValue property of the text node contained by that list item.

    Hide Example

    <SCRIPT>
    function fnChangeValue(oList, iItem, sValue){
       // only perform the operation on lists
       if (        (oList.nodeName != "UL")
                && (oList.nodeName != "OL")
          )
       {return false;}

    // only perform the operation if the specified index is
       // within the acceptable range of available list items
       if (iItem > oList.childNodes.length -1)
       {return false;}

    // get a reference to the specified list item
       var oLI = oList.childNodes(i);
       if (!oLI){return false;}

    // get a reference to the text node contained by the list item
       var oText = oLI.childNodes(0);
       // ensure that the node is a text node
       if (oText.nodeType != 3)
       {return false;}

    oText.nodeValue = sValue;
       return true;
    }
    </SCRIPT>

    <UL ID="oList" onclick="fnChangeValue(this, 0, 'New Node value')">
    <LI>Old Node Value
    </UL>

    ======================================================================================

    ownerDocument  Referenz auf das document object zu dem der Koten gehört,
         also in dem der Knoten erzeugt wurde

    Syntax
      [ oDoc = ] object.ownerDocument

    liefert null wenn der Knoten selbst ein Dokument-Objekt ist

    nur lesen

    ======================================================================================

    parentNode   Referenz auf Eltern der Dokument-Hierarchie

    Syntax
      [ oElement = ] object.parentNode

    nur lesen

    oberstes Objekt liefert immer null, da keine Eltern hat

    Example 1

    <SCRIPT>
    var oParent = oSpan.parentNode;
    </SCRIPt>
    :
    <BODY>
    <SPAN ID=oSpan>A Span</SPAN>
    </BODY>

    Example 2

    var oNode = document.createElement("B");
    document.body.insertBefore(oNode);
    var sType = oNode.parentNodes;

    ======================================================================================

    parentElement  Referenz auf das Elternobjekt

    Syntax
        [ oElement = ] object.parentElement

    oElement Referenz

    nur lesen

    liefert null wenn oberste Eltern referenziert werden sollen

    Guten Abend zusammen,

    ich möchte mittels JavaScript die Items einer Liste (<ul>) entfernen bzw. neue hinzufügen. Allerdings suche ich verzweifelt nach den entsprechenden Properties für eine Liste.

    Über document.getElementById() hole ich mir die Liste, leider ist sowohl die Eigenschaft .rows als auch .items nicht richtig. Kann mir jemand weiterhelfen?

    MFG
    Stefan

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Properties einer Liste?

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hello out there!

      beim Internet Explorer gilt für das UL-Objekt:
      http://msdn2.microsoft.com/en-us/library/ms535914.aspx

      Wie man Verweise einbindet, liest du bitte in der Forums-Hilfe nach.

      Mit DHTML-Objekts sind HTML-Tags gemeint.

      Den Unterschied zwischen Tags und Elementen liest du bitte bei [MI] nach.

      <SCRIPT>

      Aber mit dem Lesen hapert es bei dir ja anscheinend gewaltig. Liest du Antworten auf deine Postings? Meine offenbar nicht.

      Wie JavaScript-Bereiche in HMTL definiert werden, liest du bitte in [SELFHTML] nach.

      MFG
      Stefan

      Last, but not least: Kritik an TOFU liest du bitte in der [Wikipedia] nach.

      See ya up the road,
      Gunnar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Einschlägige Quellen

      Siechfred Homepage des Autors
      +3 Informationen zu den Bewertungsregeln

      Bitte beachte vor dem Posten bitte folgende Regeln:

      Das MSDN ist *nicht* die Standardreferenz zu Javascript. Für die allgemeinen Regeln, denen Javascript folgt, ist die ECMAScript-Spezifikation die erste Adresse, für die allgemeinen Regeln des DOM ist dies das W3C Document Object Model. Alles andere ist proprietär:

      (das wären die wichtigsten, die mir einfallen).

      Also löse dich vom MSDN und zitiere es nur dann, wenn es sinnvoll ist, denn als Referenzwerk für Javascript oder das DOM ist es mehr als untauglich. Und wenn du es denn mal zitierst, dann zitiere es sinnvoll und unterlasse das teilweise sinnentstellende Übersetzen der englischen Originaltexte.

      Dies gilt selbstverständlich auch für alle anderen von mir genannten Quellen.

      Siechfred

      --
      Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.
      Beitrag melden
      +3
      Informationen zu den Bewertungsregeln

  3. NodeLists und Array-Iteratoren - Scripte schneller entwickeln

    peterS. Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    hallo Stefan,

    ich möchte mittels JavaScript die Items einer Liste (<ul>) entfernen bzw.
    neue hinzufügen.

    dann musst Du Dich also schon mit node, sowie mit mindestens einer dieser
       methoden - removeChild, replaceChild, appendChild, insertBefore - befasst
       haben.

    und warum denkst Du dann noch an soetwas ...

    Allerdings suche ich verzweifelt nach den entsprechenden Properties für
    eine Liste. Über document.getElementById() hole ich mir die Liste, leider
    ist sowohl die Eigenschaft .rows als auch .items nicht richtig. Kann mir
    jemand weiterhelfen?

    .., anstatt einfach hier - getElementsByTagName, childNodes, nodeName,
       parentNode - weiterzulesen?

    und weil es sich mal wieder so schoen anbietet, verweise ich alle an
       eleganten loesungen interessierte gleich noch auf array-iteratoren.

    mit dem gesammelten material lassen sich locker zwei aus der vielzahl
       der fuer dieses problem moeglichen loesungen zimmern - ACHTUNG code:

    ~~~javascript (function () { // version 01:

    //var ulElement = document.getElementsByTagName("ul")["HTMLUListElementId"]; // bzw.:
         var ulElement = document.getElementsByTagName("ul")[0];

    var firstLevelListItems = Array.filter(ulElement.childNodes, (function (elm/, idx, arr/) {

    return (elm.nodeName && (elm.nodeName.toLowerCase() == "li") && elm.parentNode && (elm.parentNode === ulElement));
         }));
         alert("firstLevelListItems.length = " + firstLevelListItems.length);
       })();/*
       javascript:(function () {var ulElement = document.getElementsByTagName("ul")[0];var firstLevelListItems = Array.filter(ulElement.childNodes, (function (elm) {return (elm.nodeName && (elm.nodeName.toLowerCase() == "li") && elm.parentNode && (elm.parentNode === ulElement));}));alert("firstLevelListItems.length = " + firstLevelListItems.length);})();
       */

    (function () { // version 02:

    //var ulElement = document.getElementsByTagName("ul")["HTMLUListElementId"]; // bzw.:
         var ulElement = document.getElementsByTagName("ul")[0];

    var firstLevelListItems = Array.filter(ulElement.getElementsByTagName("li"), (function (elm/, idx, arr/) {

    return (elm.parentNode && (elm.parentNode === ulElement));
         }));
         alert("firstLevelListItems.length = " + firstLevelListItems.length);
       })();/*
       javascript:(function () {var ulElement = document.getElementsByTagName("ul")[0];var firstLevelListItems = Array.filter(ulElement.getElementsByTagName("li"), (function (elm) {return (elm.parentNode && (elm.parentNode === ulElement));}));alert("firstLevelListItems.length = " + firstLevelListItems.length);})();
       */

      
   (bei geoffnetem forum die in den beispielen jeweils auskommentierte  
   letzte zeile ruhig mal auf die location-bar eines einigermassen  
   aktuellen geckos loslassen)  
  
  
   und hier noch ein chronologisch ungeordneter zwischenstand sich hoffentlich  
   in der praxis bewaehrender predigttexte aus meinereiniger tastatur zum thema  
   »DOM, Knotenlisten, Array-Iteratoren/-Accessoren«:  
  
   - [»Zugriff auf alle Input-Felder - \[Array.filter\]«](http://forum.de.selfhtml.org/archiv/2007/3/t149012/#m967245)  
   - [»Alle Elem. einer Klasse visible/hidden setzten«](http://forum.de.selfhtml.org/archiv/2007/2/t146934/#m953507)  
   - [»alle checkboxen an? - konzept: \[NodeList\]s und array-iteratoren«](http://forum.de.selfhtml.org/archiv/2007/3/t147923/#m959677)  
   - [»Suchen und Ersetzen - Typumwandlung mit dem Array-iterator "map"«](http://forum.de.selfhtml.org/archiv/2006/10/t138877/#m903048)  
   - [»auf Listen operieren, iteratoren/accessoren, Lisp im Anzug von C«](http://forum.de.selfhtml.org/archiv/2007/4/t149840/#m973530)  
   - [»radiogroup-spielkram: ...ich auch, ich auch... ;-)«](http://forum.de.selfhtml.org/archiv/2007/3/t149403/#m970429)  
   - [»DOM-getter und array-iteratoren - scripte schneller entwickeln«](http://forum.de.selfhtml.org/archiv/2007/3/t148291/#m962147)  
  
  
   messianische gruesse - peterS. - pseliger@gmx.net  
  
  

-- 
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.  
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - [Douglas Crockford](http://javascript.crockford.com/)  
  
ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. NodeLists und Array-Iteratoren - Scripte schneller entwickeln

      rob
      – Informationen zu den Bewertungsregeln

      Hi!

      und weil es sich mal wieder so schoen anbietet, verweise ich alle an
         eleganten loesungen interessierte gleich noch auf array-iteratoren.

      Ja, aber das funktioniert (zumindest momentan noch) nicht in allen Browsern.
      Das gehört zu JavaScript Version 1.6 und ich glaube, der MSIE 6 kann gerade mal JS 1.3, wenn ich mich jetzt nicht irre...

      Ich habe vor kurzem mal eine Tabelle gesehen, wo aufgeführt war, welche Browser welche Javascript-Version unterstützen.
      Leider kann ich mich nicht mehr an den URL erinnern und war auch nicht in der Lage, die Site mit einer Suchmaschine wiederzufinden.

      Schöner Gruß,
      rob

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. NodeLists und Array-Iteratoren - Scripte schneller entwickeln

        peterS. Homepage des Autors
        – Informationen zu den Bewertungsregeln

        gruss rob

        Ja, aber das funktioniert (zumindest momentan noch) nicht in allen Browsern.

        dieser aussage moechte ich ein entschiedenes Jain entgegenhalten ...

        Das gehört zu JavaScript Version 1.6 und ich glaube, der MSIE 6 kann gerade
        mal JS 1.3, wenn ich mich jetzt nicht irre...

        .., denn beim kurzen ueberfliegen wenigstens zweier beitraege, die ich
           am schluss meines ersten postings verlinke, waere deutlich geworden,
           dass die von Dir genannte huerde, mittlerweile mit einem lockeren
           laecheln zu bewaeltigen ist - beweis:

        - »DOM-getter und array-iteratoren«
           - »alle checkboxen an? - konzept: [NodeList]s und array-iteratoren«
           - »Zugriff auf alle Input-Felder - [Array.filter]«

        so long - peterS. - pseliger@gmx.net

        --
        »Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
        Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
        ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln