Orlok: Click-Event auswerten (stopPropagation)

Beitrag lesen

Hallo Jürgen

  var items = document.getElementById('list').children,

nur ein kleiner unwichtiger Einwand, und auch nur, weil ich mit „Kindknoten“ schon mal Probleme hatte:

Kinder des UL sind nicht nur die LI sondern auch die aus den White Spaces bestehenden Textknoten zwischen </li> und <li>. Die würden in diesem Beispiel auch erfasst.

Nö. Genau deswegen habe ich ja children verwendet und nicht childNodes. ;-)

<body>
  <ul id="list">
    <li>Text <em>Emphasized</em></li>
    <li>Text <em>Emphasized</em></li>
  </ul>
</body>

Wenn wir hier nun die Eigenschaft childNodes verwenden, dann sähe das tatsächlich so aus, dass nicht nur die Elementknoten berücksichtigt werden:

const nodes = Array.from(document.getElementById('list').childNodes);

console.log(nodes.every(item => item.nodeType === 1)); // false

Die von der Eigenschaft children zurückgegebene HTMLCollection enthält im Gegensatz dazu aber tatsächlich nur diejenigen Kindknoten, bei denen es sich um Elemente handelt.

const nodes = Array.from(document.getElementById('list').children);

console.log(nodes.every(item => item.nodeType === 1)); // true

Wenn man also alle Kindelemente haben möchte, ist entsprechend children zu verwenden.

console.log(nodes); // Array [ <li>, <li> ]

Gruß,

Orlok