原生JavaScript查找元素的常用方法详解

通过唯一ID定位元素

document.getElementById() 是最常用的单元素查找方法。由于HTML规范规定页面的 id 属性必须唯一，该方法的返回值是一个单一的 Element 对象，而非列表。

以下代码演示如何获取特定ID的节点并读取其内容：

<span id="span1">span标签</span>
<script>
// 通过ID查找单个元素
var oSpan = document.getElementById('span1'); 
alert(oSpan.innerHTML); // 弹出span标签中的内容
</script>

批量获取指定标签名的元素

getElementsByTagName() 根据HTML标签名称（如 div, p）返回一个包含所有匹配节点的集合。这个集合具备数组的部分特性（length 属性及索引访问），通常被称为“类数组”对象。

操作方式包括直接通过索引访问或使用 item() 方法：

var oDiv = document.getElementsByTagName('div'); // 返回所有div元素的集合

// 访问第一个div的内容
alert(oDiv[0].innerHTML);

// 访问第二个div的内容
alert(oDiv.item(1).innerHTML);

如果需要遍历集合中的所有元素，可以利用 length 属性：

var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < oDiv.length; i++) {
    console.log(oDiv[i]); // 执行具体操作
}

通过Name属性查找表单元素

在处理表单（Form）时，getElementsByName() 经常用于按 name 属性值获取元素列表。因为同一组单选按钮或复选框通常拥有相同的 name 值，所以该方法同样返回一个类数组集合。

示例如下：

// 查找name为'city'的所有元素
var oIpt = document.getElementsByName('city'); 
alert(oIpt[0].value);
alert(oIpt.item(1).value);

封装基于Class的查找方法

原生的 getElementsByClassName 在现代浏览器中已广泛支持，但在处理复杂兼容性需求或需要限定搜索范围时，我们往往需要手动实现逻辑。以下提供一个通用的 getByClass 函数实现。

该函数接收两个参数：oParent（父容器/参考节点）和 sClass（目标类名）。它首先获取父节点下的所有子节点，然后通过正则表达式精确匹配 className。

/**
 * 在指定父节点内查找具有特定class的元素
 * @param {HTMLElement} oParent - 父容器节点
 * @param {string} sClass - 目标类名
 */
function getByClass(oParent, sClass){
    var aEle = oParent.getElementsByTagName('*');
    // 使用 \b 确保匹配单词边界，避免 partial matches
    var re = new RegExp('\\b' + sClass + '\\b');
    var aResult = [];
    
    for(var i = 0; i < aEle.length; i++){
        if(re.test(aEle[i].className)){
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}

注意：这里使用正则表达式而非简单的字符串相等判断（==），是为了防止某个元素的 class 属性包含多个类名（如 class="active main"）时发生误判。如果直接使用 == sClass，只有当 className 完全相同时才返回真；而正则 \bsClass\b 能准确提取出目标类名。

总结

原生JS提供的 getElementById、getElementsByTagName 和 getElementsByName 构成了DOM访问的基础。对于需要更高灵活性的场景，理解基于循环和正则表达式的自定义类名查找逻辑，有助于在不引入额外库的情况下解决兼容性与性能问题。以上就是原生JavaScript查找元素的详细内容，更多关于JavaScript DOM操作的资料请关注本站其它相关文章！