javascript - 获取 div 内对象的引用

Question

我正在尝试使用 plain JavaScript 引用 div 内的对象:

<div id="main">
    <div id="search">
        <input type="text" id="query" />
        <button onclick="test()">OK</button>
    </div>
</div>
<script>
    function test() {
        try {
            var main = document.getElementById("main");
            var search = main.getElementById("search");
            alert(search);
        } catch (e) {
            alert(e);
        }
    }
</script>

但我一直收到这个错误:

TypeError: main.getElementById is not a function(…)

引用 main 有效，但不能引用 main 中的内容。

我还设置了a Fiddle .

Answer 1

要在其他用途​​中查找元素 querySelector

document.querySelector('#main #search')

由于ID是唯一的，可以直接使用

document.getElementById('search')