Why people are using getElementById instead of accessing elements directly?

Question

In every single tutorial I have seen that using document.getElementById(id); is recommended, but it's longer than just accessing the elements directly by their IDs. Example code that is perfectly functional:

<script>
    function appendText() {
        foo.innerHTML += bar.value
    }
</script
<div>
    <p id="foo"></p>
    <input type="text" id="bar" />
    <button onclick="appendText()">Add</button> 
</div>

What are disadvantages of accessing elements like that, and why nobody is using it that way? For me it was always more handy to do this that way. Or maybe people just don't know that there is such a possibility?