JavaScript基础-DOM操作:查找、创建、修改

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
注册配置 MSE Nacos/ZooKeeper,118元/月
性能测试 PTS,5000VUM额度
简介: 【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。

DOM(Document Object Model)是Web开发中的核心概念,它将HTML文档表示为一个可编程的对象集合,使得JavaScript能够动态地查询、创建、修改页面内容。本文旨在深入浅出地介绍DOM操作的基础知识,包括查找元素、创建新节点以及修改现有节点的方法,同时揭示一些常见问题、易错点,并提供避免策略及实用代码示例。
image.png

查找元素

常见方法

  • getElementById: 通过ID精确查找一个元素。
  • getElementsByClassName: 根据类名查找多个元素。
  • getElementsByTagName: 通过标签名查找多个元素。
  • querySelector: 使用CSS选择器查找第一个匹配的元素。
  • querySelectorAll: 使用CSS选择器查找所有匹配的元素。

易错点与避免策略

  • ID唯一性:使用getElementById时,确保ID在整个文档中是唯一的,否则行为可能不可预测。
  • 性能考量getElementsByClassNamegetElementsByTagName返回的是实时的NodeList集合,频繁操作可能影响性能,考虑使用querySelectorAll获取静态集合。

创建新节点

方法介绍

  • document.createElement: 创建一个新的HTML元素。
  • document.createTextNode: 创建文本节点。

易错点与避免策略

  • 忘记插入:创建节点后,记得将其插入到DOM树中,否则新节点不会显示在页面上。
  • 直接赋值与appendChild混淆:对于已存在子节点的元素,直接使用element.innerHTML赋值会覆盖原有子节点,应根据需求选择合适方法。

修改现有节点

常见操作

  • innerText/innerHTML: 改变元素内的文本或HTML结构。
  • setAttribute/getAttribute/removeAttribute: 操作元素的属性。
  • classList: 添加、删除或切换元素的CSS类。

易错点与避免策略

  • innerText与innerHTML混用innerText仅用于文本内容,而innerHTML会解析HTML,使用时需明确意图。
  • 安全问题:使用innerHTML插入用户输入时,警惕XSS攻击,考虑使用textContent代替或进行适当的输入验证。
  • 样式操作:尽量使用CSS类进行样式管理,而非直接修改style属性,以提高代码可维护性。

代码示例

查找元素

const elementById = document.getElementById('myElement');
const elementsByClass = document.getElementsByClassName('exampleClass');
const firstMatch = document.querySelector('.special');
const allMatches = document.querySelectorAll('p');

创建新节点并插入

const newDiv = document.createElement('div');
const textNode = document.createTextNode('New Content');
newDiv.appendChild(textNode);
document.body.appendChild(newDiv);

修改现有节点

const targetElement = document.getElementById('target');
targetElement.innerText = 'Updated Text';
targetElement.setAttribute('data-status', 'active');
targetElement.classList.add('highlight');

总结

DOM操作是前端开发的基石,熟练掌握查找、创建、修改节点的技巧对于构建动态网页至关重要。通过避免上述提及的易错点,采用最佳实践,开发者可以更高效、安全地操控页面元素,提升用户体验。记住,虽然直接操作DOM可以实现丰富的交互效果,但也应注意性能优化,特别是在处理大量数据或频繁更新时,考虑使用现代框架或库来简化DOM操作,提高应用性能。

相关文章
|
23天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
22 1
|
23天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
14 1
|
7天前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$("p")`、`$("#myDiv")`、`$(".myClass")`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
|
20天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
10 0
|
23天前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(一)
20 0
|
23天前
|
存储 JavaScript 前端开发
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(二)
16 0
|
23天前
|
JavaScript 前端开发
js/javascript 操作对象【全】(含常用的操作对象的lodash)
js/javascript 操作对象【全】(含常用的操作对象的lodash)
8 0
|
23天前
|
存储 JavaScript 前端开发
js/javascript 操作数组【全】(含常用的操作数组的lodash)
js/javascript 操作数组【全】(含常用的操作数组的lodash)
8 0
|
24天前
|
JavaScript
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
33 0
|
24天前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
14 0