如何获得对这个DOM结构的引用？

Question

如果我只引用document.getElementById（'btn_test'），如何仅使用Javascript获取对第一个复选框输入元素的引用。也许是parent.parent？什么是安全的方式？

<td>
    <input type="checkbox" name="text_rnd_input"/>
    <label>
        <button id="btn_test" type="button"></button>
    </label>
</td>

Answer 1

btn_test.parentNode.parentNode.getElementsByTagName('input')[0]

如果使用*Sibing属性，请注意，因为它们也选择文本节点（例如，只有空格的不可见文本节点），因此通常对任意HTML都不可靠（想想通过删除空格来压缩HTML） ）。

并强调不可避免：使用jQuery：

$btn_test.closest('td').children('input')[0]
// or
$btn_test.parent().prev('input')
// or ...