nicht Knoten Liste bei der Verwendung von console.log

Question

Ich lerne immer noch Javascript, fand ich diesen Code als Teil eines Tutorials und verstehe nicht, warum ich console.log die el Variable und sehe eine Sammlung. Mit der Variablen tabNavigationLinks gibt es eine leere Sammlung von Elementen. Hilfe zu verstehen, was ich in diesem Abschnitt von Javascript vermisse.

Dank

(function() { 

     'use strict'; 

     var tabs = function(options) { 

     var el = document.querySelector(options.el); 
     var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks); 

     console.log(tabNavigationLinks); // empty list of items 

     var tabContentContainers = el.querySelectorAll(options.tabContentContainers); 
     var activeIndex = 0; 
     var initCalled = false; 

     }; 

    window.tabs = tabs; 

})(); 

Html

<div id="tabs" class="c-tabs no-js"> 
     <div class="c-tabs-nav"> 
     <a href="#" class="c-tabs-nav__link is-active"></a> 
     <a href="#" class="c-tabs-nav__link"></a> 
     </div> 
     <div class="c-tab is-active"> 
     <div class="c-tab__content"></div> 
     </div> 
     <div class="c-tab"> 
     <div class="c-tab__content"></div> 
     </div> 
    </div> 

Objekt in die Optionen übergeben varialbe

var myTabs = tabs({ 
el: '#tabs', 
tabNavigationLinks: '.c-tabs-nav__link', 
tabContentContainers: '.c-tab' 

});

Answer 1

document.querySelector() gibt entweder einen "Knoten" oder null zurück, je nachdem, ob ein Element gefunden werden kann, das dem von Ihnen bereitgestellten Selektor entspricht. In Ihrer Probe, haben Sie dies:

var el = document.querySelector(options.el); 

die null zurückkehren sollte, weil es keine Anführungszeichen um options.el sind, was bedeutet, dass options.el als el Eigenschaft des options Objekt ausgewertet werden würde. Wenn eine Abfrage wie diese null zurückgibt, erhalten Sie nicht sofort einen Fehler. Wenn Sie stattdessen die Variable verwenden, die das Ergebnis speichern soll, erhalten Sie die null oder wenn Sie versuchen, auf eine Eigenschaft des Objekts zuzugreifen, erhalten Sie eine null Ausnahme.

Ich glaube, Sie zu schreiben gemeint.

var el = document.querySelector("options.el"); 

Da, dass ein gültiger Selektor (alle options Elemente, die die el Klasse Es gibt jedoch nicht options (Plural) Element in HTML

.

document.querySelectorAll() eine „Knotenliste“ zurückzukehren - - immer, ob die Knotenliste alles enthält hängt alles davon ab, wie viele Elemente gefunden wurden, die passen die gelieferten Abfrage Wenn Sie schreiben:.

.

Sie erhalten eine Knotenliste, die alle options Elemente mit der Klasse tabNavigationLinks enthält, oder Sie erhalten eine leere Knotenliste. Aber auch hier gibt es kein options (Plural) Element in HTML.

Um Ihnen mehr zu sagen, müssen wir Ihr HTML sehen.