javascript-Selektoren

Wie macht man auswählen von DOM-Elementen in javascript?

Wie zum Beispiel:

<div class="des">
    <h1>Test</h1>
        <div class="desleft">
          <p>Lorem Ipsum.</p>
        </div>
        <div class="Right">
           <button>Test</button>
        </div>
</div>

Nun, wie wähle ich h1? Dies ist nur ein Teil einer größeren Seite, also nicht verwenden getElementsByTagName(), da könnten andere ausgewählt werden. Auch da gibt es möglicherweise andere h1's in das Dokument später, kann ich nicht befestigen Sie den index(Körper) oben.

Gibt es eine einfache Art und Weise zu wählen, sagen <h1> tag, das ist unter den classname von desleft?
Ich kann jQuery oder andere Bibliotheken.

  • Es ist einfach nicht produktiv nicht zu verwenden irgendeine Art von Selektor-Bibliothek für moderne javascript-Programmierung. Wenn Sie nicht verwenden können, jQuery, dann zumindest nutzen Brutzeln, das ist nur eine Selektor-engine (und ist, was die Verwendung innerhalb von jQuery und YUI). Es ist Recht klein und sparen Sie Hunderte von Stunden der Entwicklung, verhindern, dass viele bugs und sparen Sie viel cross-browser-Probleme. Es ist einfach nicht produktiv, das Rad neu zu erfinden sich selbst.
  • Ja, ich Stimme absolut. Ich hatte das Gefühl, es gab Möglichkeiten, es zu tun, und ich wollte nicht von Ihnen wissen.
  • In diesen Selektor Bibliotheken, würden Sie nur verwenden Sie den selector: ".des h1" Zugriff auf die <h1> Objekt in deinem Beispiel. In Brutzeln, es würde einfach sein: var list = Sizzle(".des h1");.
  • Sie wahrscheinlich nicht brauchen Sie eine Bibliothek an: caniuse.com/#search=querySelector
InformationsquelleAutor Aaditi Sharma | 2011-09-08
  1. 4
    getElementsByTag()

    Wäre eine Funktion, die Sie beginnen können mit, und dann können Sie filter für die DOMElements, dass die Klasse.

    var h1_array = document.getElementsByTag('h1');

var h1_class_array = [];
for (var i=0, len=h1_array.length; i < len; i++) {
    if (h1_array[i].className.indexOf('classname') !== -1) {
        h1_class_array.push(h1_array[i]);
    }
}

    Den .indexOf Funktion gibt -1 wenn die Nadel nicht im Heuhaufen.

    Jetzt re-Lektüre Ihrer Frage, warum nicht nur geben Sie Ihrem h1 id ' s???

    DOM-traversal ist ein javascript, eklatante Probleme auf (enter jQuery).

    einem einfachen getElementById() würde sparen Sie Kopfschmerzen, und ids, die auf alle Ihre h1-s wäre viel sauberer am Ende als zu versuchen, formulieren Sie einen Algorithmus, wählen Sie Sie durch andere Mittel.

    • Danke, das löst es 🙂 Aber aus Neugier, sagen wir mal ich es verwenden, um zu finden, um 5 verschiedene Elemente, und da wird ein array erstellt für jeden <h1>, <p> usw, usw, da gibt es eine Menge von <p> oder andere tags, die das array wird ziemlich gross. Im real-world-Szenario, wird es verbrauchen eine Menge Speicher/Verarbeitung?
    • Offensichtlich ohne eine bestimmte Einschränkung alle Szenarien werden schließlich außerhalb des Bereichs von akzeptablen, aber noch einmal, Vanille javascript-DOM-traversal ist eines jener Dinge, die man einfach grinsen und ertragen.
    • Gut <h1> ist nur ein Beispiel, ich werde es für andere Elemente, Frage mich, ob es eine einfache und saubere Art und Weise zu tun-DOM-traversal mit javascript. Ich denke, Angabe von id ' s werden die Klügste option, anstatt die Größe und Verarbeitung Dank nur für traversalen
    • ja, und genau das ist das Problem, das gegeben hat, eine solche Popularität, um die konkurrierenden JavaScript-Bibliotheken, als Ihre primäre Funktion das DOM traversal und Auswahl.
    InformationsquelleAutor jondavidjohn
  2. 8

    Können Sie diese verwenden, um auf Ihre H1:

    var des = document.getElementsByClassName('des')
var fc = des[0].getElementsByTagName('h1')
alert(fc[0].innerHTML)
    InformationsquelleAutor Diodeus - James MacFarlane
  3. 7

    w3.org hat Selektoren jetzt (http://www.w3.org/TR/selectors-api/#examples). Hier sind 2 verschiedene Arten, arbeitete für mich auf Chrome. Sie verwenden möchten, können querySelectorAll-Funktion, die eine Liste zurückgibt.

    <script type="text/javascript">
//looks for <h1> tag under <div> with className "des"
showOff1 = function() {
  var x = document.querySelector(".des h1");
  alert(x.innerHTML);      
}
//looks for <div> tag with className "desleft" and then use previousSibling to traceback <h1> tag
showOff2 = function() {
  var y = document.querySelector("div.desleft");
  var z = y.previousSibling.previousSibling;
  alert(z.innerHTML);      
}
</script>
<body onload="showOff2();">
    InformationsquelleAutor StackRover
  4. 7

    Verwenden querySelectorAll

    Können Sie querySelectorAll:

    //Will return a NodeList even if there is only one element found
var heading = document.querySelectorAll('.des > h1');

heading[1].style.color = 'red'; //NodeList is similar to an array

    Diese zurück NodeList.

    oder

    Verwenden querySelector, um das erste element gefunden:

    var first_heading = document.querySelector('.des > h1');

first_heading.style.color = 'blue';

    Häufig verwendet, mit einem id-Selektor #single-header-id.

    Hier ist eine demo

    InformationsquelleAutor hitautodestruct
  5. 1

    Wenn du meinst, wählen Sie ein h1 ist vor die ersten element der Klasse desleft könnten Sie dies jederzeit tun:

    document.getElementsByClassName("desleft")[0].previousSibling.previousSibling

    Beispiel: http://jsfiddle.net/Xeon06/ZMJJk/

    previousSibling muss zweimal aufgerufen werden, da der leere text-Knoten zwischen den beiden. Deshalb ist die Verwendung von Bibliotheken zu tun, dieses Zeug ist wirklich der beste Weg zu gehen.

    • Hinweis: getElementsByClassName wird nur unterstützt, > firefox 3
    • Beachten Sie, dass diese funktionieren nicht auf älteren Versionen von IE. (müssen IE9 glaube ich zumindest) Kein jQuery ist ein richtiger pisser, wenn Sie tun Sachen wie diese, die ich bekommen habe, so dass nicht sich Gedanken über DOM Macken.
    • Ich habe noch nie verwendet previousSibling vor, gehen durch das, Danke 🙂
    • Danke, wusste nicht, dass. Zurück zu mehr Codierung zu finden Elemente :/
    • wenn Sie brauchen, um die Unterstützung für ältere Browser und können nicht, verwenden Sie ein Drittanbieter-Bibliothek, die ich bekommen würde, bereit zu schreiben, VIEL mehr code.
    • Glaube, es wird gedrängt und als html5 (FF3, Chrome und Opera 9+) bereits unterstützen.
    • Denke mal, nur um id ' s um alles.Das scheint der Ausweg.Keinen Sinn in zusätzlichen code schreiben für transversalien, das auch für die ausgestorbenen Browsern :/

    InformationsquelleAutor Alex Turpin
  6. 0
    var h1 = document.querySelector('.desleft').previousElementSibling;
    1. Finden element mit className='desleft' mit dem Selektor '.desleft'
    2. Bewegen Sie einfach zurück zum vorherigen element (nicht zum vorherigen Knoten!)
    • bitte, eine Erklärung zu deinem code
    InformationsquelleAutor Volodymyr Fedorov
Schreibe einen Kommentar