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 )
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]
Kindselektor: e > f
Nachfahrenselektor: e f
Nachbarselektor: e + f
The lobotomized owl selector: * + *
Geschwisterselektor: e ~ f
::first-line ::first-letter ::before, ::after ::backdrop ::selection
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()
<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;}
<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>
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_str, parent_ele ) { // $$=Node-Array
return (parent_ele || document).querySelectorAll(selektoren_str);
}
function $( selektoren_str, parent_ele ) { // $=Node-Element
return (parent_ele || document).querySelector(selektoren_str);
}
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
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);