Overhaul of menuSpec

to use getElementsByClassName and getElementsById instead of
childNodes[i] for more reusability when creating new menu style objects.

Change-Id: I2c2566204f27f1f6eab141d35e68d0d43dd95295
diff --git a/Changes b/Changes
index 47a9833..ff68be4 100755
--- a/Changes
+++ b/Changes
@@ -1,4 +1,4 @@
-0.42 2021-04-28
+0.42 2021-05-19
         - Added GitHub based CI for perl.
         - Added further methods for communicating JSON Files
           with the server to the APIs (lerepp).
@@ -12,6 +12,9 @@
           (fixes #133).
         - Change samesite to 'None' to temporarily
           allow for session riding by plugins.
+        - Overhaul of menuSpec to use getElementsByClassName
+          and getElementsById instead of child accessors
+          (lerepp).
 
 0.41 2021-03-01
         - Introduce CORS headers to the proxy.
diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index 12a8fc1..22f3c77 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -418,61 +418,61 @@
 
         expect(menu.show()).toBe(true);
 
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
-        expect(menu.element().childNodes[4].getAttribute("data-action")).toEqual("l=");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].getAttribute("data-action")).toEqual("l=");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(true);
-        expect(menu.element().childNodes[4].classList.contains("no-more")).toBe(false);
-        expect(menu.element().childNodes[5].classList.contains("no-more")).toBe(false);
+        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.element().getElementsByTagName("li")[2].classList.contains("no-more")).toBe(false);
       });
 
       it('should be filterable', function () {
         var menu = KorAP.HintMenu.create("cnx/", list);
         menu.limit(3);
         expect(menu.prefix("o").show()).toBe(true);
-        expect(menu.element().childNodes[0].innerHTML).toEqual("o");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(true);
-        expect(menu.element().childNodes[4].classList.contains("no-more")).toBe(false);
-        expect(menu.element().childNodes[5].classList.contains("no-more")).toBe(true);
+        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.element().getElementsByTagName("li")[2].classList.contains("no-more")).toBe(true);
 
         menu.limit(2);
 
         expect(menu.prefix("o").show()).toBe(true);
-        expect(menu.element().childNodes[0].innerHTML).toEqual("o");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
-        expect(menu.element().childNodes[5]).toBe(undefined);
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("o");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
 
         // Check boundaries
-        expect(menu.element().childNodes[3].classList.contains("no-more")).toBe(true);
-        expect(menu.element().childNodes[4].classList.contains("no-more")).toBe(false);
-        expect(menu.element().childNodes[5]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[0].classList.contains("no-more")).toBe(true);
+        expect(menu.element().getElementsByTagName("li")[1].classList.contains("no-more")).toBe(false);
+        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
 
         expect(menu.prefix("e").show()).toBe(true);
-        expect(menu.element().childNodes[0].innerHTML).toEqual("e");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
-        expect(menu.element().childNodes[5]).toBe(undefined);
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("e");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2]).toBe(undefined);
 
         menu.limit(5);
         expect(menu.prefix("a").show()).toBe(true);
-        expect(menu.element().childNodes[0].innerHTML).toEqual("a");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
-        expect(menu.element().childNodes[6].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
-        expect(menu.element().childNodes[7].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
-        expect(menu.element().childNodes[8]).toBe(undefined);
+        expect(menu.element().getElementsByClassName("pref")[0].innerHTML).toEqual("a");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Ex<mark>a</mark>mple 1</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemm<mark>a</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Ex<mark>a</mark>mple 2</span>");
+        expect(menu.element().getElementsByTagName("li")[3].innerHTML).toEqual("<strong>P<mark>a</mark>rt-of-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[4].innerHTML).toEqual("<strong>Synt<mark>a</mark>x</strong>");
+        expect(menu.element().getElementsByTagName("li")[5]).toBe(undefined);
       });
 
 
@@ -483,74 +483,74 @@
         // Show only 3 items
         menu.limit(3);
         expect(menu.show()).toBe(true);
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate next (1)
         menu.next();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate next (2)
         menu.next();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate next (3)
         // scroll!
         menu.next();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate next (4)
         menu.next();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate next (5) - ROLL
         menu.next();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Active next (6)
         menu.next();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
       });
 
       it('should be nextable without active field', function () {
@@ -568,33 +568,33 @@
         menu.limit(3);
         expect(menu.show()).toBe(true);
 
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Lemma</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Lemma</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (1) - roll to bottom
         menu.prev();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (2)
         menu.prev();
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Morphology</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-of-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Syntax</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Syntax</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (3)
         menu.prev();
@@ -604,7 +604,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Syntax");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (4)
         menu.prev();
@@ -614,7 +614,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Part-of-Speech");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (5)
         menu.prev();
@@ -624,7 +624,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate next (1)
         menu.next();
@@ -634,7 +634,7 @@
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2).name()).toEqual("Morphology");
         expect(menu.shownItem(2).active()).toBe(false);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
 
         // Activate prev (6)
         menu.prev();
@@ -647,7 +647,7 @@
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Syntax");
         expect(menu.shownItem(2).active()).toBe(true);
-        expect(menu.element().childNodes[6]).toBe(undefined);
+        expect(menu.element().getElementsByTagName("li")[3]).toBe(undefined);
       });
 
       it('should be prevable without active field', function () {
@@ -666,49 +666,49 @@
 
         expect(menu.prefix("o").show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (1)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (2)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (3) - to prefix
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Part-of-Speech");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Part-<mark>o</mark>f-Speech</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>C<mark>o</mark>nstituency</strong><span>Example 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>M<mark>o</mark>rph<mark>o</mark>l<mark>o</mark>gy</strong><span>Example 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
       });
@@ -722,20 +722,20 @@
         expect(menu.prefix("ex").show()).toBe(true);
 
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
         // Next (1)
         menu.next();
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -744,11 +744,11 @@
 
         expect(menu.prefix()).toEqual('ex');
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constituency</strong><span><mark>Ex</mark>ample 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>Ex</mark>ample 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -759,10 +759,10 @@
         expect(menu.prefix("e").show()).toBe(true);
         expect(menu._prefix.active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -771,10 +771,10 @@
         expect(menu._prefix.active()).toBe(false);
         expect(menu.prefix()).toEqual('e');
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -782,10 +782,10 @@
         menu.next();
         expect(menu._prefix.active()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -793,10 +793,10 @@
         menu.next();
         expect(menu._prefix.active()).toBe(false);
         expect(menu.shownItem(0).name()).toEqual("Constituency");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Constitu<mark>e</mark>ncy</strong><span><mark>E</mark>xampl<mark>e</mark> 1</span>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Morphology");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Morphology</strong><span><mark>E</mark>xampl<mark>e</mark> 2</span>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
       });
@@ -808,13 +808,13 @@
         menu.limit(2);
         expect(menu.prefix("pro sin").show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("PPS");
-        expect(menu.element().childNodes[3].innerHTML).toEqual(
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual(
           "<strong>PPS</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular</span>"
         );
 
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("PPSA");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>PPSA</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative</span>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>PPSA</strong><span>Personal <mark>Pro</mark>noun, <mark>Sin</mark>gular, Accusative</span>");
         expect(menu.shownItem(1).active()).toBe(false);
 
         expect(menu.shownItem(2)).toBe(undefined);
@@ -831,7 +831,7 @@
         menu._prefix.add("p")
         expect(menu.show()).toBe(true);
         expect(menu.shownItem(0).name()).toEqual("PP");
-        expect(menu.element().childNodes[3].innerHTML).toEqual(
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual(
           "<strong><mark>P</mark><mark>P</mark></strong>"+
             "<span><mark>P</mark>ersonal <mark>P</mark>ronoun</span>"
         );
@@ -888,13 +888,13 @@
         expect(menu.prefix()).toEqual("");
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -902,31 +902,31 @@
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("a");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
 
         menu._prefix.add('u');
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("au");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>Au</mark>tor</strong>");
 
         menu._prefix.chop();
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("a");
         expect(menu.shownItem(0).name()).toEqual("Autor");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong><mark>A</mark>utor</strong>");
 
         menu._prefix.chop();
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -935,26 +935,26 @@
         expect(menu.show()).toBe(true);
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
 
         // Forward
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -962,13 +962,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -976,13 +976,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Länge");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -990,13 +990,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Länge");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Länge</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Länge</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Autor");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Autor</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Autor</strong>");
         expect(menu.shownItem(2).active()).toBe(true);
         expect(menu.shownItem(3)).toBe(undefined);
 
@@ -1004,13 +1004,13 @@
         menu.next();
         expect(menu.prefix()).toEqual("");
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Titel</strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Titel</strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertitel</strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertitel</strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2).name()).toEqual("Veröffentlichungsdatum");
-        expect(menu.element().childNodes[5].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
+        expect(menu.element().getElementsByTagName("li")[2].innerHTML).toEqual("<strong>Veröffentlichungsdatum</strong>");
         expect(menu.shownItem(2).active()).toBe(false);
       });
 
@@ -1031,10 +1031,10 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1043,10 +1043,10 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1055,10 +1055,10 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1067,11 +1067,11 @@
         expect(menu.prefix()).toEqual("El");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
       });
@@ -1090,10 +1090,10 @@
         expect(menu.prefix()).toEqual("el");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1102,11 +1102,11 @@
         expect(menu._prefix.active()).toEqual(true);
 
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
 
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1114,10 +1114,10 @@
         menu.prev();
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(true);
         expect(menu.shownItem(2)).toBe(undefined);
       });
@@ -1134,10 +1134,10 @@
         expect(menu.prefix()).toEqual("el");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1145,10 +1145,10 @@
         menu.prev();
         expect(menu._prefix.active()).toEqual(true);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(false);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);
 
@@ -1158,10 +1158,10 @@
         expect(menu.prefix()).toEqual("el");
         expect(menu._prefix.active()).toEqual(false);
         expect(menu.shownItem(0).name()).toEqual("Titel");
-        expect(menu.element().childNodes[3].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[0].innerHTML).toEqual("<strong>Tit<mark>el</mark></strong>");
         expect(menu.shownItem(0).active()).toBe(true);
         expect(menu.shownItem(1).name()).toEqual("Untertitel");
-        expect(menu.element().childNodes[4].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
+        expect(menu.element().getElementsByTagName("li")[1].innerHTML).toEqual("<strong>Untertit<mark>el</mark></strong>");
         expect(menu.shownItem(1).active()).toBe(false);
         expect(menu.shownItem(2)).toBe(undefined);