JavaScript DOM 编程基础：节点类型与元素获取方法详解

DOM 节点结构基础

文档对象模型（DOM）将 HTML 文档视为一棵树，其基本组成单元是节点。理解不同类型的节点是进行动态交互的前提：

1. 元素节点：DOM 的原子。如 <body>、<p>、<ul> 等。除了 <html> 根元素外，其他元素均可包含子元素。
2. 文本节点：在 XHTML/HTML 文档中，纯文本内容始终被包含在元素节点内部。
3. 属性节点：用于对元素进行具体描述，例如 <p title="a gentle reminder">Don't forget to buy this stuff.</p> 中的 title="a gentle reminder" 即为一个属性节点。

获取元素节点的核心方法

JavaScript 提供了多种从 DOM 树中提取元素的方法，其中最常用的是 getElementById、getElementsByTagName 和 getElementsByClassName。

使用 ID 和通配符批量获取

getElementsByTagName 支持传入通配符 "*"，这会返回文档中所有元素节点的集合。通过结合 getElementById 定位父容器，可以高效获取特定范围内的所有元素。

var shopping = document.getElementById("purchase");
// 获取 id 为 purchase 的元素内所有的子元素
var items = shopping.getElementsByTagName("*");

兼容旧浏览器的 getElementsByClassName 实现

虽然现代浏览器普遍支持 getElementsByClassName，但在需要兼容较旧版本的场景中，可通过封装原生方法来实现类似功能。该函数接受两个参数：搜索起点 node 和类名 classname。

function getElementsByClassName(node, classname){
  if(node.getElementsByClassName){
    return node.getElementsByClassName(classname);
  }else{
    var results = new Array();
    var elems = node.getElementsByTagName("*");
    for(var i=0;i<elems.length;i++){
      if(elems[i].className.indexOf(classname) != -1){
        results[results.length] = elems[i];
      }
    }
    return results;
  }
}

此实现首先检查浏览器是否原生支持该方法，若不支持，则遍历指定节点下的所有子元素，通过 indexOf 判断类名字符串是否包含目标类名，从而手动构建结果数组。

属性的获取与动态修改

DOM 允许通过脚本动态读写元素属性，主要涉及以下两个 API：

• getAttribute(attribute)：查询指定元素的属性值。
• setAttribute(attribute, value)：修改或设置元素的属性值。

需要注意的是，setAttribute 所做的修改仅作用于内存中的 DOM 树，而不会反向更新浏览器查看源代码时显示的原始静态 HTML 文件。这种“表里不一”的特性正是 DOM 的威力所在：它允许在不刷新页面的情况下，动态刷新页面内容，提升用户体验。

以上就是 JavaScript DOM 编程基础之节点类型与元素获取方法的详细内容，更多关于 JavaScript 前端开发技巧的资料请关注本站其它相关文章！