JavaScript如何获取指定ID且为特定标签类型的DOM元素？

实现方案 #

方案1：直接使用querySelector（最简便）

用标准CSS选择器语法直接匹配符合要求的元素，一步到位：

var address = document.querySelector('input#address');

如果页面中存在符合input标签且ID为address的元素，该方法会直接返回第一个匹配的元素，没有匹配项则返回null。如果需要获取所有符合条件的同规则元素，可以用querySelectorAll：

var addressList = document.querySelectorAll('input#address');

返回结果是包含所有匹配元素的NodeList，可自行遍历使用。 #

方案2：基于原有获取逻辑加标签校验

如果不想修改原有getElementById的写法，可以拿到元素后额外做标签校验，过滤不符合要求的元素：

var address = document.getElementById('address');
// 校验标签是否为input
if (address && address.tagName.toLowerCase() !== 'input') {
  address = null;
}

注：HTML规范中要求页面ID全局唯一，出现同ID多元素属于不规范写法，若有条件建议优先修正页面重复ID的问题，避免后续出现更多选择器异常。

内容的提问来源于stack exchange，提问作者user984621