DOM-Zugriffe mit CSS-Selektoren Wie?

CSS-Selektoren Was ist das?

Beim Rendern einer Seite dienen die CSS-Selektoren ( z.B. #myid, .myclass ) der Zuordnung von CSS-Elementen zu DOM-Elementen. Der ECMAScript-Code "sizzlin = hot selector engine", der die CSS-Selektoren-Zugriffe emuliert, wurde ( vor 2017 ) gerne verwendet siehe z.B. Webanwendungen ( Tutorium Wedel ), CSS-Selectoren ( w3schools ),

Wie kann die DOM-Elementeauswahl mit CSS-Selectoren getestet werden?
Siehe z.B. CSS-Selectoren interaktiv ( Wedel )


CSS-Selektoren Übersicht

einfache Selektoren

  Universalselektor: *
  Typselektoren: element
  Klassenselektoren: .class
  ID-Selektoren: #id
  Attributselektoren
    Attributpräsenz: [a]
    Attributwert: [a=v], [a~=v], [a|=v]
    Teilübereinstimmung: [a^=v], [a$=v], [a*=v]

Kombinatoren

  Kindselektor: e > f
  Nachfahrenselektor: e f
  Nachbarselektor: e + f
    The lobotomized owl selector: * + *
  Geschwisterselektor: e ~ f

Pseudoelemente

  ::first-line
  ::first-letter
  ::before, ::after
  ::backdrop
  ::selection

Pseudoklassen

 strukturelle Pseudoklassen
  :root
  :empty
  :first-child
  :last-child
  :nth-child()
  :nth-last-child()
  :only-child
  :first-of-type
  :last-of-type
  :nth-of-type()
  :nth-last-of-type()
  :only-of-type

 dynamische Pseudoklassen
  :any-link, :link, :visited
  :hover, :active, :focus
  :focus-within
  :target
  :disabled, :enabled, :checked
  :valid, :invalid
  :in-range, :out-of-range

:lang()
:not()
:matches()


Beispiel: dl-Liste dl    dt dd   dt dd   dt dd ... dt dd ... als List-Items

DT0
DD0
DT1
DD1
DT2
DD2
dt0
dd0
dt1
dd1
dt2
dd2
DT3
DD3
<dl id="dl_dt_dd"><dt>  DT0 
</dt><dd> DD0

</dd><dt>  DT1 
</dt><dd class="a"> DD1

</dd><dt>  DT2 
</dt><dd> DD2

  <dl><dt> dt0
  </dt><dd class="a b"> dd0
  </dd><dt> dt1
  </dt><dd> dd1
  </dd><dt> dt2
  </dt><dd> dd2
  </dd></dl>

</dd><dt class="b c">  DT3 
</dt><dd> DD3

</dd></dl>


dl    > dt { color:#a00;}
dl dl > dt { color:#600;}

dl    > dt + dd {color:#0f0;}
dl dl > dt + dd {color:#070;}

dl dt.a {background-color:#fcc;}

dl dd.a {background-color:#fcc;}

dl dd.b {background-color:#faf;}



Beispiel: dt dt... als Memü-Items dl    dt dt dt ... dd dd dd ... dt dt ... dd dd
   Beispiel: dl    dt dt dt dt ... dd dd dd ...

DT0
DT1
DT2
DD0
DD1
DD3
<dl>
<dt>  DT0  </dt>
<dt>  DT1  </dt>
<dt>  DT2  </dt>
<dd> DD0 </dd>
<dd> DD1 </dd>
<dd> DD3 </dd>
</dl>

<style>
#dl_dts_dds > dt {
 display:inline-block; width:5rem; 
 position:relative;top:0;left:3rem;
 margin:0; padding:0.3rem; color:#a00;border:0.1rem solid #a00;  
}
#dl_dts_dds > dd { display:block; width:80%; 
 position:relative;top:0;left:3rem;
 margin:0; padding:0.3rem; 
 color:#0f0;border:0.1rem solid #0f0; 
}
#dl_dts_dds > dt:before {content:"";padding:0;margin:0;}
</style>



DOM-Zugriffe mit .querySelectorAll(selektoren_str) Häufige Kurzschreibweise $()

Ein ECMAScript-Array ist zu unterscheiden von einer DOM-Node-Liste. Zu einem ECMAScript-Array gehört ein Prototyp-Array mit den ECMAScript-Array-Funktionen. Zu einer DOM-Node-Liste gehört kein Prototyp-Array. Eine Node-Liste kann grob wie ein live-Elemente-Array von Dom-Elementen betrachtet werden.

Mit Hilfe von ECMAScript kann auf den DOM-Node-Baum zugegriffen werden. Wie können die benötigten Elemente erhalten und geändert werden? Z.B. kann mit id="parent_node" anstelle von

 var parent_node = document.getElementById('parent_node');// auch geschrieben werden
 var parent_node = document.querySelector('#parent_node'); 

Beispiel: Ausgehend von der parent_node kann die Node-List der DOM-Elemente mit class="child_node" erhalten werden mit

var child_nodes = parent_node.querySelectorAll('> .child_node');

Nachfolgend geht es um DOM-Zugriffe, bei denen die Funktion .querySelectorAll(selectoren-String) verwendet wird.
Siehe CSS-Selektoren als W3C-Tabelle

Bei Kenntnis der CSS-Selektoren ist die ECMAScript-Funktion .querySelectorAll(selectoren-String) recht mächtig für Zugriffe auf Elemente des DOM-Baumes.

.querySelector(Selector-String)       findet das erste Element 
.querySelectorAll(Selectoren-String)  findet alle Elemente

Nachfolgend eine Kurzschreibweise von .querySelectorAll(selektoren_str) als function $(selektoren_str, parent_ele), der ein Selectoren-String übergeben wird. $(selektoren_str, parent_ele) gibt eine Node-Liste zurück.

Eine Node-Liste ist eine Element-Liste der DOM-Elemente, die dem selektoren_str entsprechen. In gewisser Weise entspricht eine Node-Liste einem Arry ( bis auf die ECMAScript-Array-Funktionalität ). Falls der Aufruf ohne parent_ele erfolgt, so wird parent_ele = document gesetzt.

 
 function $$( selektoren_strparent_ele ) { // $$=Node-Array
   return (parent_ele || document).querySelectorAll(selektoren_str); 
 } 
 function $( selektoren_strparent_ele ) { // $=Node-Element
   return (parent_ele || document).querySelector(selektoren_str); 
 } 
Lehrbeispiel $()-Funktion

Es gebe ein div-Tag, in dem 2 p-Tags sind und es gebe die obige $()-Funktion, die lediglich einer kürzeren Schreibweise für .querySelectorAll() entspricht. Etwa

<div id="DIV">
 <p class="a b"> div p1 Element</p>
 <p class="b c"> div p2 Element</p>
</div>

Es geht um die Selektoren an der Stelle // *** : Die beiden o-Tags erhalten einen grünen Hintergrund:

<script>
var i, p, ps, div;
div = $("#DIV")[0];  // zu "#DIV" gehört id="DIV"
ps  = $("p", div);   // das parent-div-tag hat 2 p-Tags 
                     // *** 
for (i = 0; i < ps.length; i += 1) {
  p = ps[i];
  p.style.backgroundColor = "#efe";
  p.innerHTML = p.innerHTML + " (grün)";
}
</script>

Die obige $()-Funktion kann für das "Sammeln" der geünschten DOM-Elemente ( nodeList ) als Argument die CSS-Selektoren benutzen. Beispiele: Mit den folgenden Selectoren werden beide p-Tags gefunden

ps = $("p",              div); // beide p-Elemente
ps = $("p.b",            div); // beide p-Elemente
ps = $("p[class]",       div); // beide p-Elemente
ps = $("p[class~='b']",  div); // beide p-Elemente
ps = $("p[class*='b']",  div); // beide p-Elemente

Mit den folgenden Selectoren wird ein p-Tags gefunden:

ps = $("p[class~='a']",  div); // nur p1-Element 
ps = $("p:nth-child(1)", div); // nur p1-Element
ps = $("p[class^='b']",  div); // nur p2-Element
ps = $("p:nth-child(2)", div); // nur p2-Element

Mit den folgenden Selectoren wird kein p-Tags gefunden:

ps = $("p[class='b']",   div); // kein p-Element
ps = $("p:nth-child(0)", div); // kein p-Element

Lehrbeispiel doc.createDocumentFragment() $()-Funktion
var htmlStr = " "
//===============================================================================
+ '<br \/><br \/><img width="100%" src=".\/img\/logo.png" alt="FH-Logo" \/>'
+ '<br \/><br \/><br \/><br \/><br \/><br \/>'
+ '<a href="index.htm"><span> Home <\/span><\/a>'
+ '<a href="ueberuns.htm"><span>Über uns<\/span><\/a>'
+ '<a href="termine.htm"><span>Termine<\/span><\/a>'
+ '<a href="kontakt.htm"><span>Info/Kontakt<\/span><\/a>'
+ '<a class="farb_gradient" href="./index.htm" onclick="return nav.menu();">'
+ '<span> FH intern <img src="./img/red_pin.gif" alt="Ziernote" /></span></a>'
+ '<br \/><br \/><br \/><br \/><br \/><br \/>'
//===============================================================================
; var nav = (function (win) { "use strict"; // quasi-global
    var doc = win.document, dst = "intern",
        bin = ["01100001011100100110010101110110"], // sehr vereinfacht!
      pwtxt = "Passwort für den internen Bereich"; // sehr vereinfacht!
function menu_erstellen_in(selector_st, htmlStr) {
 var ziel, par, frag = doc.createDocumentFragment(),
 temp = doc.createElement('div');
 temp.innerHTML = htmlStr;
        while (temp.firstChild) { frag.appendChild(temp.firstChild); } // return frag;
 
 ziel = doc.querySelectorAll(selector_st); if (ziel.length >= 1) { ziel = ziel[0]; }
 ziel.insertBefore(frag, ziel.childNodes[0]); //oder: ziel.appendChild( frag ...);
}
function menu(a, b) {
 var c = [], i, p, q;
 a = a || dst + "\/index.htm"; b = b || bin;
 if (a && b) { p = win.prompt(pwtxt, "").replace(/\s/g, '');
  for (i = p.length - 1; i >= 0; i -= 1) {
    q = p.charCodeAt(i).toString(2);
    c.push(('00000000' + q).slice(-8));
  } c = c.join("");
 } 
 for (i = 0; i < b.length; i += 1) {
   if (b[i] === c) { try { win.location.href = a; } catch (e) { } return false; }
 } win.alert('Falsches Passwort!'); return false;
} return { menu: menu, menu_erstellen_in: menu_erstellen_in };
} (window));
window.addEventListener("load",
   function () { nav.menu_erstellen_in('div.menu_bereich', htmlStr); }, true);