1// JS Tip of the Day
2// Difference between childNodes and children properties
3
4/*
5  ...
6  <article class="hero_card">
7      <h4>Batman</h4>
8      <p>Batman was created by artist Bob Kane and writer Bill Finger.</p>
9      <!-- This is a comment (node) -->
10	  <ul>
11        <li>Batwing</li>
12		<li>Batwing</li>
13      </ul>
14      This is a text (node)
15  </article>
16  ...
17*/
18
19// childNodes returns a live NodeList of child nodes (elements, text and comments)
20console.log(document.querySelector('.hero_card').childNodes.length); // 9
21
22// children returns a live NodeList of child nodes (only element)
23console.log(document.querySelector('.hero_card').children.length); // 3

1// JS Tip of the Day
2// Nullish Coalescing operator 
3
4console.log(10 ?? 20); // 10
5console.log(null ?? 20); // 20
6console.log(undefined ?? 20); // 20
7console.log(0 ?? 30); // 0
8console.log(0 || 30); // 30
9
10console.log('' ?? 40); // ''
11console.log('' || 40); // 40

1// JS Tip of the Day
2// How to use an object as an event handler
3
4// <button class="help-button">Help me!</button>
5
6const heroHandler = {
7	name: 'Batman',
8    handleEvent(event) {
9      console.log(`${this.name} help! ${event.type} was fired!`);
10    }
11  };
12
13const elem = document.querySelector('.help-button');
14elem.addEventListener('click', heroHandler);

1// JS Tip of the Day
2// Using Array Methods in DOM Collections
3
4const nodes = Array.from(document.body.childNodes);
5const textNodes = nodes.filter(node => node.nodeType === 3);

1// JS Tip of the Day
2// How to avoid to adding a new object property with Proxy
3
4let handler = {
5  set: (target, key, value) => {
6      if(!target.hasOwnProperty(key)) {
7        throw new Error('You cannot add a new property!');
8      }
9      target[key] = value;
10      return true;
11  }
12}
13
14const hero = { name: 'Batman' };
15
16const heroProxy = new Proxy(hero, handler);
17
18console.log(heroProxy); // { name: 'Batman' }
19heroProxy.name = 'Superman'; 
20console.log(heroProxy); // { name: 'Batman' }
21heroProxy.partner = 'Robin'; // Error: You cannot add a new property!