Lab - Dom Walk

Find the flags

HTML

<div id="container">
     <h1>Find the flag elements.</h1>
    
    <p>There are three flags ("FLAG") in the content below. Find them and move their containing elements into the #bucket element.</p>

    <div class="main">
        <ul>
            <li>One</li>
            <li>FLAG 1</li>
            <li>Three</li>
        </ul>
        <div id="articles">
            <article class="new">
                
                <h3>Article 1</h3>

                <p>This is <a href="#">some</a> body content</p>
                
                <p>This is some body content <a class="flag" href="#">FLAG 2</a></p>
               
            </article>
            <article class="new">
                 <h3>Article 2</h3>

                <p>This is some body content</p>
                
            </article>
            <article>
                 <h3>Article 3</h3>

                <p>This is some body content</p>
                
            </article>
            <div class="footer">
                <div>
                    <div>
                        <div></div>
                        <div>
                            <div>FLAG 3</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="bucket">
          <li>One</li>
            <li>FLAG#1</li>
            <li>Three</li>
         <h2>Drop  flags here...</h2>

    </div>
</div>

JavaScript

// You can use:
//     getElementById
//     getElementsByTagName
//     getElementsByClassName
//     querySelector
//     querySlectorAll
// and all the parent, child and sibling selectors

// get flag 1
// stored in the first ul, second li
var flag1 = document.getElementsByTagName('li')[1];
console.log(flag1);

// get flag 2
// stored in the first article, last p, the a
var flag2 = document.getElementsByClassName('flag')[0];
console.log(flag2);

// get flag 3
// stored in the last div p
var flag3 = document.querySelector('.footer').childNodes[1].childNodes[1].childNodes[3].childNodes[1];
console.log(flag3);

var bucketEl = document.getElementById("bucket");
          
            
bucket.appendChild(flag1);
bucket.appendChild(flag2);
bucket.appendChild(flag3);