nicht angemeldet
Properties einer Liste?
Gunnar BittersmannGuten 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
-
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-
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-
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; }
-
-
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)
-
-
Hallo,
hier eine Anregung:
beim Internet Explorer gilt für das UL-Objekt:
http://msdn2.microsoft.com/en-us/library/ms535914.aspxEs 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ängenerzeugen 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.firstChildnur 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.lastChildnur 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.nextSiblingnur 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 AnkerSyntax
[ 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.nodeTypeliefert 1 Element node.
3 Text node.
null wenn Knoten nicht vorhandennur 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 schreibenExample
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 wurdeSyntax
[ oDoc = ] object.ownerDocumentliefert null wenn der Knoten selbst ein Dokument-Objekt ist
nur lesen
======================================================================================
parentNode Referenz auf Eltern der Dokument-Hierarchie
Syntax
[ oElement = ] object.parentNodenur 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.parentElementoElement 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-
Hello out there!
beim Internet Explorer gilt für das UL-Objekt:
http://msdn2.microsoft.com/en-us/library/ms535914.aspxWie 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
StefanLast, 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) -
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:
- JScript-Referenz im MSDN
- Javascript 1.5 von Netscape
- Javascript-Referenz für Geckos
- ECMAScript-Support in Opera
- KDE-Support für Javascript
- Safari Javascript-Referenz
(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.
-
-
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:]-
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-
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:]
-
-