在不使用 getElementById 的情况下在 javaScript 中获取 Html 元素

如何解决在不使用 getElementById 的情况下在 javaScript 中获取 Html 元素

我是 JavaScript 新手。到目前为止，我学到的是我们可以通过 getElementById 或 querySelector 访问 html 元素。但是我看到了一个代码，其中 html 元素直接通过 id 访问，但没有使用 getElementById 或 querySelector 。我已经对其进行了测试。它正在工作。但我无法理解它是如何工作的。任何人都可以解释发生了什么。这将是一个很大的帮助。

<html>
<head>
    <title></title>
    <script>
            document.addEventListener('DOMContentLoaded',function() {
            btn.addEventListener('click',()=>{
            test.innerHTML="Some value"
            alert(txt.value)
            })
        });
     
    </script>
</head>
<body>
    <input type="text" value="Ahtisham" id="txt">
    <p id="test">abc</p>
    <button id="btn" >Click me</button>
</body>