Wie kann ich auf alle Elemente innerhalb einer NodeList zugreifen?

Question

Mit reinem JavaScript, habe ich diese Linie verwendet, um eine NodeList von mehreren Elementen zurück:

var elements = document.getElementsByClassName('icon-wrapper'); 

Ich kann dann eine dieser Linien verwenden, um einen bestimmten Index aus diesen NodeList Ziel:

elements[0]; 
elements[1]; 
elements[2]; 

Wenn ich jedoch versuche, mehrere Objekte aus der NodeList aufzunehmen oder durch sie zu durchlaufen, wird nur ein Knoten zurückgegeben, der letzte, der angefordert wurde.

Ich versuche .appendChild an alle Knoten mit der Klasse von icon-wrapper

hier anzuwenden ist der Code:

var square = document.createElement('div'); 
 
square.style.width = "32px"; 
 
square.style.height = "32px"; 
 
square.style.zIndex = "-1"; 
 
square.style.position = "absolute"; 
 
square.style.backgroundColor = "red"; 
 
var elements = document.getElementsByClassName('icon-wrapper'); 
 
var requiredElement = elements[0, 1, 2]; 
 
requiredElement.appendChild(square);

body { 
 
    background: lightyellow; 
 
} 
 
.icon-wrapper { 
 
    width: 30px; 
 
    height: 30px; 
 
    background: green; 
 
    float: left; 
 
    margin: 2px; 
 
}

<div class="icon-wrapper"> 
 
    <svg></svg> 
 
</div> 
 
<div class="icon-wrapper"> 
 
    <svg></svg> 
 
</div> 
 
<div class="icon-wrapper"> 
 
    <svg></svg> 
 
</div>

Answer 1

Versuchen Sie, so etwas zu erreichen? Check out:

https://jsfiddle.net/cd2gbuc9/3/ 

heißt:

1) Get the required elements. 
    For each of them in a loop: 
    1) Create a square 
    2) Append the square to the element 

Answer 2

Ihre Logik fehlerhaft ist in zwei Möglichkeiten:

1. Die Aussage elements[0,1,2] entspricht elements[2]; es gibt nur das letzte Element zurück, nicht alle.

2. Sie versuchen, mehrere Elemente mit demselben EINEN Quadrat zu versehen. Selbst ohne die Fehlernummer 1 würde es sowieso auf dem letzten Element landen, da nur ein Quadrat herumlaufen muss. Wenn Sie ein Quadrat auf alle Element in der NodeList möchten, müssen Sie ein Quadrat für jedes Element in der NodeList erstellen, und dann durchlaufen Sie es, ein Quadrat bei jeder Iteration anfügen. Zum Beispiel:

umrechnen NodeList to an Array:

var node_list_array = Array.prototype.slice.call(div_list); 

und fügen Sie ein verschiedenen Platz zu jedem Element:

node_list_array.forEach(function(elem, index){ 
    elem.appendChild (squares[index]); 
}); 

Answer 3

var requiredElement = elements[0,1,2]; 

Dies wird nicht das tun, was Sie denken, es tut, was auch immer das ist. Es entspricht var requiredElement = elements[2];.

Sie müssen aus Ihrer jQuery Denkweise herauskommen. Sie könnten damit beginnen, nicht auf "reines JavaScript" zu verweisen; alles JavaScript ist rein. DOM-Elemente sind keine jQuery-ähnlichen magischen Gruppen von Dingen, auf die Sie gleichzeitig Klassen anwenden können, oder alle an etwas anhängen oder etwas an alles anhängen, oder was auch immer. Sie müssen über eine Liste LOOP gehen, die sich aus etwas wie getElementsByClassName ergibt, und tun, was Sie Element-für-Element wollen.

Im Allgemeinen ist die Verwendung von getElementsByClassName selbst ein Code-Geruch. Verwenden Sie keine Klassen, um Elemente zu identifizieren, die Sie anschließend bearbeiten und einfügen und löschen können. Klassen sind ein CSS-Konstrukt, dessen Hauptzweck es ist, Elemente mit CSS-Regeln zu verknüpfen, deren Selektoren diese Klassen spezifizieren.

Zum Beispiel, anstatt eine div in Code mit mühsam zugewiesenen individuellen Stilen zu erstellen, und dann versuchen, es hier und da mit Code einfügen (Hinweis: Sie können nur an einer Stelle enthalten; wenn Sie es woanders einfügen es wird dort verschoben und entfernt von wo es vorher war), fügen Sie es einfach zu Ihrem HTML hinzu, mit einer Klasse, die all diese Stile einbringt.

Answer 4

Es kann sehr unterschiedliche Wege geben, dies zu erreichen. Einfache Möglichkeiten erstellen 3 verschiedene Variablen für das Hinzufügen von Quadraten. und fügen Sie sie dann jeweils mit einer for-Schleife an jedes Element an.

Answer 5

wenn Sie getElementsByClassName Ergebnis "NodeList". Die NodeList ist ein Array von "Knoten" und Knoten kann "Element" oder "Attribut" oder "Kommentar" und oder "Text" sein. Sie am meisten noteType in Schleife überprüfen und elemnt fügen nur Typ-Element mit dem Knoten dass nodeType 1.

for(var i = 0; i < elements.length; i++) 
{ 
    if(elements[i].nodeType === 1){ 
     elements[i].appendChild(square); 
    } 
} 

für weitere Informationen ist die Referenz sehen:

http://www.w3schools.com/jsref/prop_node_nodetype.asp

Answer 6

Zuerst Document.getElementsByClassName. Dies ist etwas, auf das Sie achten sollten, wenn Sie Elemente während einer Schleife entfernen oder hinzufügen, da es sich um eine live HTMLCollection handelt.

var requiredElement = elements[0,1,2]; ist keine Möglichkeit, indizierte Elemente von einem Array wie Objekt zugreifen, weiß ich nicht, wo Sie diese Idee haben. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Sie müssen Array-ähnliche Objekte iterieren, indem Sie Iterationsmethoden verwenden.

Sie müssen für jede appendChild eine neue rote Box erstellen, ansonsten verschieben Sie die Box einfach von einem Ort zum anderen.

Ein Beispiel in ES6 geschrieben.

function createARedSquare() { 
 
    const square = document.createElement('div'); 
 
    // use CSS for a class when possibe 
 
    square.className = 'redSquare'; 
 
    return square; 
 
} 
 

 
//const slice = Function.prototype.call.bind(Array.prototype.slice); 
 

 
// Gets a 'live' HTMLCollection and converts to an Array, a fixed node content 
 
function getElementsByClassName(className) { 
 
    // You could use Array#slice here instead of Array.from if < ES6 
 
    return Array.from(document.getElementsByClassName(className)); 
 
} 
 

 
function addRedSquareToEachIconWrapper() { 
 
    getElementsByClassName('icon-wrapper') 
 
    .forEach(iconWrapper => iconWrapper.appendChild(createARedSquare())); 
 
} 
 

 
addRedSquareToEachIconWrapper();

body { 
 
    background: lightyellow; 
 
} 
 
.icon-wrapper { 
 
    width: 30px; 
 
    height: 30px; 
 
    background: green; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
.redSquare { 
 
    width: 32px; 
 
    height: 32px; 
 
    background: red; 
 
    z-index: -1; 
 
    position: absolute; 
 
}

<div class="icon-wrapper"> 
 
    <svg></svg> 
 
</div> 
 
<div class="icon-wrapper"> 
 
    <svg></svg> 
 
</div> 
 
<div class="icon-wrapper"> 
 
    <svg></svg> 
 
</div>