dom有几种获取方式

在 HTML 中,几乎所有的操作都可以通过 DOM(Document Object Model) 来实现。DOM 是浏览器提供的一种编程接口,它将 HTML 文档解析为一个树形结构,开发者可以通过 JavaScript 操作这个树形结构来实现对 HTML 的动态修改和交互。


1. DOM 的作用

  • 动态修改内容:通过 DOM 可以修改 HTML 元素的内容、属性和样式。

  • 事件处理:通过 DOM 可以为 HTML 元素绑定事件(如点击、输入等)。

  • 动态创建和删除元素:通过 DOM 可以动态添加或删除 HTML 元素。

  • 遍历和查询:通过 DOM 可以遍历和查询 HTML 元素。


2. DOM 获取方式

DOM 提供了多种方式来获取 HTML 元素,以下是常见的几种方式:

(1)通过 ID 获取
  • 使用 document.getElementById() 方法。

  • 返回一个元素对象,如果找不到则返回 null

javascript 复制代码
const element = document.getElementById('myId');
(2)通过类名获取
  • 使用 document.getElementsByClassName() 方法。

  • 返回一个 HTMLCollection(类数组对象),包含所有匹配的元素。

javascript 复制代码
const elements = document.getElementsByClassName('myClass');
(3)通过标签名获取
  • 使用 document.getElementsByTagName() 方法。

  • 返回一个 HTMLCollection(类数组对象),包含所有匹配的元素。

javascript 复制代码
const elements = document.getElementsByTagName('div');
(4)通过选择器获取单个元素
  • 使用 document.querySelector() 方法。

  • 返回第一个匹配的元素,如果找不到则返回 null

javascript 复制代码
const element = document.querySelector('.myClass');
(5)通过选择器获取多个元素
  • 使用 document.querySelectorAll() 方法。

  • 返回一个 NodeList(类数组对象),包含所有匹配的元素。

javascript 复制代码
const elements = document.querySelectorAll('.myClass');
(6)通过 name 属性获取
  • 使用 document.getElementsByName() 方法。

  • 返回一个 NodeList(类数组对象),包含所有匹配的元素。

javascript 复制代码
const elements = document.getElementsByName('myName');

3. DOM 操作示例

以下是一些常见的 DOM 操作示例:

(1)修改元素内容
javascript 复制代码
const element = document.getElementById('myId');
element.textContent = 'Hello, World!';

(2)修改元素属性

javascript 复制代码
const element = document.getElementById('myId');
element.setAttribute('class', 'newClass');

(3)修改元素样式

javascript 复制代码
const element = document.getElementById('myId');
element.style.color = 'red';

(4)添加事件监听器

javascript 复制代码
const element = document.getElementById('myId');
element.addEventListener('click', () => {
  alert('Element clicked!');
});

(5)创建新元素

javascript 复制代码
const newElement = document.createElement('div');
newElement.textContent = 'New Element';
document.body.appendChild(newElement);

(6)删除元素

javascript 复制代码
const element = document.getElementById('myId');
element.remove();

4. DOM 的局限性

虽然 DOM 可以实现几乎所有的 HTML 操作,但它也有一些局限性:

  • 性能问题:频繁操作 DOM 会导致性能问题,尤其是在大型应用中。

  • 复杂性:直接操作 DOM 可能会导致代码难以维护。

  • 兼容性问题:不同浏览器对 DOM 的实现可能存在差异。


5. 现代前端框架的 DOM 操作

现代前端框架(如 Vue、React、Angular)通过虚拟 DOM 或响应式系统来优化 DOM 操作:

  • 虚拟 DOM:框架通过虚拟 DOM 来减少直接操作真实 DOM 的次数,从而提高性能。

  • 响应式系统:框架通过数据绑定自动更新 DOM,开发者无需手动操作 DOM。


6. 总结

获取方式 方法 返回值类型 示例
通过 ID 获取 document.getElementById() 单个元素对象 document.getElementById('myId')
通过类名获取 document.getElementsByClassName() HTMLCollection document.getElementsByClassName('myClass')
通过标签名获取 document.getElementsByTagName() HTMLCollection document.getElementsByTagName('div')
通过选择器获取单个元素 document.querySelector() 单个元素对象 document.querySelector('.myClass')
通过选择器获取多个元素 document.querySelectorAll() NodeList document.querySelectorAll('.myClass')
通过 name 属性获取 document.getElementsByName() NodeList document.getElementsByName('myName')

通过 DOM,开发者可以实现对 HTML 的全面操作,但在现代前端开发中,建议结合框架的特性来优化 DOM 操作。

相关推荐
持久的棒棒君24 分钟前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆2 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz3 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干3 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大4 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu4 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端4 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想4 小时前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao4 小时前
Flutter入门:Flutter开发必备Dart基础
前端