Selecting Elements

Elements can be obtained by id, name, class, tag or CSS selector.
RESETRUNFULL
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
    <head></head><body>
    <p id="remark1">"We see a lot of feature-driven product design in which the cost of features is not properly accounted. Features can have a negative value to customers because they make the products more difficult to understand and use. We are finding that people like products that just work. It turns out that designs that just work are much harder to produce than designs that assemble long lists of features."
        <br/><strong class="writerA">- Douglas Crockford, JavaScript: The Good Parts</strong>
        <button name="button">OK</button></p>
    <p id="remark2">You're building your own maze, in a way, and you might just get lost in it."
        <br/><strong class="writerB goodWriter">- Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming</strong>
        <button name="button">OK</button></p>
    <p id="remark3">"You should imagine variables as tentacles, rather than boxes. They do not contain values; they grasp them -- two variables can refer to the same value."
        <br/><strong class="writerB goodWriter">- Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming</strong>
        <button name="button">OK</button></p>
    <script>        // i. returns Element
        var p3 = document.getElementById("remark3");                               // over entire document by id
        var a3 = p3.querySelector("strong.writerB");                                 // over element by CSS --> first match
        console.log(a3.parentElement.id);  // remark3
        console.log(a3.closest("p").id);                               // remark3 --> closest ancestor by CSS        // ii. returns NodeList
        document.getElementsByName("button").
                                                  forEach((val,ind,arr)=>{
            console.log(val instanceof HTMLElement,
                                   arr.length);  // true 3 ... *3
        });
        console.log(document.querySelectorAll(
                                    "body *")[2].tagName);  // strong        // iii. returns HTMLCollection
        document.body.getElementsByClassName(
                     "writerB goodWriter")[1].style.color = "red";
        document.getElementsByTagNameNS(
             "http://www.w3.org/1999/xhtml","strong")[1].
             innerHTML = "- Marijn Haverbeke";
    </script></body></html>