Vraag & Antwoord

Webprogrammeren & scripting

[js] meerder getElemensByTagName-selecties bij elkaar voegen

6 antwoorden
  • Hallo, Ik wil graag meerdere html-tags selecteren en in 1 array zetten. Ik probeerde het volgende maar dat lukte niet: [code:1:a874aec248]inputs = document.getElementsByTagName("input"); selects = document.getElementsByTagName("select"); elements = Array(); elements.concat(inputs); elements.concat(selects); [/code:1:a874aec248] Weet iemand hoe dat moet? Bijv. dank.
  • getElementsByTagName retourneert geen array maar een nodeList (een collection van nodes). Dat lijkt op een array, maar is het niet. M.a.w. je kan de collection benaderen op index en hij heeft een length, maar daar houdt de vergelijking met een array eigenlijk wel op. Er zit dus niets anders op dan door de collection lopen en alle elementen los toevoegen. [code:1:a7459d93ee] var inputs = document.getElementsByTagName("input"); var selects = document.getElementsByTagName("select"); var elements = [], i = 0, j = 0, element; while((element = inputs[i])) { elements[i++] = element; } while((element = selects[j])) { elements[i + j++] = element; } // de array elements bevat nu alle inputs en selects. [/code:1:a7459d93ee] /edit: Ik heb nog wat verder zitten frutten en je kan ook het array-object 'extenden' met de functionaliteit om een nodeList te concatten. Het voorbeeld wordt dan als volgt: [code:1:a7459d93ee] Array.prototype.concatNodeList = function (nodeList) { var elements = [], i = 0, element; while((element = nodeList[i])) { elements[i++] = element; } return this.concat(elements); } var inputs = document.getElementsByTagName("input"); var selects = document.getElementsByTagName("select"); var elements = []; elements = elements.concatNodeList(inputs); elements = elements.concatNodeList(selects); [/code:1:a7459d93ee] /edit 2: Nu ik er even naar kijk, is het een beetje onzin om de method aan het Array object toe te voegen. Dus onderstaande kan ook (heb meteen de functie uitgebreid zodat deze meerdere nodeLists slikt): [code:1:a7459d93ee] var concatNodeList = function () { if (arguments.length == 0) return []; var elements = [], i = 0, j, k = 0, element, nodeList; while((nodeList = arguments[i++])) { j = 0; while((element = nodeList[j++])) { elements[k++] = element; } } return elements; } var inputs = document.getElementsByTagName("input"); var selects = document.getElementsByTagName("select"); var elements = concatNodeList(inputs, selects); [/code:1:a7459d93ee] Zo, en nu ga ik slapen ;)
  • Bedankt! het werkt. Ik heb nog wel een vraagje. Ik hoor wel eens meer, net als nu, over node list. Wat is dat precies?
  • Een technisch verhaal staat op de site van het w3c: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177 Maar ik weet niet of ik daarmee je vraag beantwoord. Zo niet, waar zou je dan meer uitleg over willen hebben?
  • Nee, daar snap ik niet zo veel van. Het heeft geloof ik iets te maken met DOM, ook daar heb ik wel eens van gehoord maar weet ik niet wat het is. Ik zou er wel wat uitleg over willen, maar het hoeft niet uitgebrijd. Ik ben ook nog maar een beginner in js.
  • DOM is het Document Object Model. En dat is simpel gezegd een verzameling functies waarmee je je HTML pagina (het document) kan uitlezen en waarmee je op het document bewerkingen kan uitvoeren*. De DOM 'ziet' je pagina als een tree (stamboom waarin relaties zijn aangegeven) van nodes (elementen in de boom). Elke tag in je HTML is een node, maar ook de inhoud van een tag en ook de parameters van een tag. Binnen de tree worden de relaties tussen de nodes aangegeven met namen die vrij recht-toe-recht-aan zijn: parent (bovenliggende node), child (node die onder een andere node 'hangt'), sibling (node die op dezelfde hoogte als een andere node in de structuur hangt). Op deze wijze kan je door de complete tree lopen en van element naar element 'navigeren' via javascript. De eerder genoemde NodeList is een verzameling nodes uit de DOM tree. Verder wordt er in de DOM een verschil gemaakt tussen Core functionaliteit (voor alle XML documenten van toepassing) en HTML specifieke functionaliteit. Meer info en voorbeelden kan je bijvoorbeeld op [url=http://www.quirksmode.org/index.html?/dom/intro.html]quirksmode.org[/url] vinden. [size=9:0214dedfde]* De wat uitgebreidere (en correctere ;)) uitleg kan je teruglezen op de site van het [url=http://www.w3.org/TR/REC-DOM-Level-1/#id-622015212]w3c[/url][/size:0214dedfde]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.