Javascript and the DOM

Question

Can someone please help me through this..

app.js

const list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

  }
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and the DOM</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <section>
            <h1>Making a Webpage Interactive</h1>
            <p>Things to Learn</p>
            <ul>
                <li><p>Element Selection</p><button>Highlight</button></li>
                <li><p>Events</p><button>Highlight</button></li>
                <li><p>Event Listening</p><button>Highlight</button></li>
                <li><p>DOM Traversal</p><button>Highlight</button></li>
            </ul>
        </section>
        <script src="app.js"></script>
    </body>
</html>

Answer 1 · 2017-06-03T08:50:32Z

June 3, 2017 8:50am

As in the videos, you should start off by selecting the parentNode (the list element). This node has a property called firstChild, which you can use on the node to get the first child element of the node (In this case the first child is the paragraph element). Nodes have a property that holds the classes of the element. This can be accessed by the property classList. Furthermore this classList property has an 'add' method, which you can use to add a class. For instance, if you want to add a class to a node, it would look something like this.

node.classList.add('some-random-class');

Welcome to the Treehouse Community

Looking to learn something new?

Peter Rua

Peter Rua

Javascript and the DOM

1 Answer

Stephan Olsen

Stephan Olsen