首页 > 网络编程 > JavaScript > javascript技巧 > js dom api使用

JS中DOM的API使用示例详解

2025-09-04 09:36:41 作者：藤原とラふ店丶

在JavaScript中,DOM（文档对象模型）API是操作HTML/XML文档结构、内容和样式的核心接口,本文给大家介绍JS中DOM的API使用示例,感兴趣的朋友跟随小编一起看看吧

在JavaScript中，DOM（文档对象模型）API是操作HTML/XML文档结构、内容和样式的核心接口。通过DOM API，我们可以动态创建、修改、删除元素，处理事件，以及改变文档的布局和样式。以下是DOM API的常用分类及示例：

一、获取DOM元素（选择器API）

获取元素是操作DOM的第一步，常用方法如下：

方法	说明	示例
`document.getElementById(id)`	通过ID获取唯一元素（效率最高）	`const box = document.getElementById('app');`
`document.getElementsByClassName(className)`	通过类名获取元素集合（动态更新）	`const items = document.getElementsByClassName('item');`
`document.getElementsByTagName(tagName)`	通过标签名获取元素集合（动态更新）	`const lis = document.getElementsByTagName('li');`
`document.querySelector(selector)`	通过CSS选择器获取第一个匹配元素	`const firstItem = document.querySelector('.list .item');`
`document.querySelectorAll(selector)`	通过CSS选择器获取所有匹配元素（静态集合）	`const allItems = document.querySelectorAll('ul > li');`

二、操作元素内容

通过API可以修改元素的文本或HTML内容：

textContent：获取/设置元素的纯文本内容（忽略HTML标签，安全防XSS）

const div = document.querySelector('#content');
div.textContent = 'Hello <strong>DOM</strong>'; // 显示：Hello <strong>DOM</strong>

innerHTML：获取/设置元素的HTML内容（会解析HTML标签，有XSS风险）

div.innerHTML = 'Hello <strong>DOM</strong>'; // 显示：Hello DOM（strong标签生效）

value：获取/设置表单元素（input、textarea等）的值

const input = document.querySelector('input');
input.value = '默认值'; // 设置输入框内容
console.log(input.value); // 获取用户输入

三、操作元素属性

修改元素的HTML属性（如src、href、class等）：

直接操作属性：

const img = document.querySelector('img');
img.src = 'new-image.jpg'; // 修改图片路径
img.alt = '新图片'; // 设置alt属性

setAttribute(name, value)：设置任意属性（包括自定义属性）

const link = document.querySelector('a');
link.setAttribute('target', '_blank'); // 设置a标签跳转方式
link.setAttribute('data-id', '123'); // 设置自定义属性data-id

getAttribute(name)：获取属性值

console.log(link.getAttribute('href')); // 获取链接地址
console.log(link.getAttribute('data-id')); // 获取自定义属性

removeAttribute(name)：移除属性

img.removeAttribute('title'); // 移除title属性

四、操作元素样式

动态修改元素的CSS样式：

style属性：直接修改行内样式（驼峰命名，如fontSize对应font-size）

const box = document.querySelector('.box');
box.style.width = '200px';
box.style.backgroundColor = 'blue'; // 对应CSS的background-color
box.style.fontSize = '16px';

classList：操作元素的类名（推荐，避免覆盖原有样式）

const btn = document.querySelector('button');
btn.classList.add('active'); // 添加active类
btn.classList.remove('disabled'); // 移除disabled类
btn.classList.toggle('highlight'); // 切换highlight类
console.log(btn.classList.contains('active')); // 输出：true

add(class)：添加类
remove(class)：移除类
toggle(class)：切换类（存在则移除，不存在则添加）
contains(class)：判断是否包含类

五、DOM结构操作（增删改节点）

动态创建、添加、删除元素：

创建元素：document.createElement(tagName)

const newLi = document.createElement('li'); // 创建li元素
newLi.textContent = '新列表项';
newLi.className = 'item'; // 添加类名

添加元素：

const list = document.querySelector('ul');
list.appendChild(newLi); // 在ul末尾添加li
const firstItem = list.querySelector('li:first-child');
list.insertBefore(newLi, firstItem); // 在第一个li前插入新li

parent.appendChild(child)：在父元素末尾添加子元素
parent.insertBefore(newChild, referenceChild)：在参考元素前插入新元素

替换元素：parent.replaceChild(newChild, oldChild)

const oldLi = list.querySelector('li:nth-child(2)');
list.replaceChild(newLi, oldLi); // 用新li替换第二个li

删除元素：parent.removeChild(child) 或 child.remove()（更简洁）

const toRemove = list.querySelector('li:last-child');
toRemove.remove(); // 直接删除元素（无需父元素）

六、事件处理（交互核心）

通过DOM API绑定事件，处理用户交互（如点击、输入、滚动等）：

addEventListener(event, handler)：绑定事件（推荐，可绑定多个同类型事件）

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  console.log('按钮被点击了');
});
// 箭头函数写法
btn.addEventListener('mouseenter', () => {
  btn.style.color = 'red';
});

removeEventListener(event, handler)：移除事件监听（需引用原函数）

function handleClick() {
  console.log('点击事件');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick); // 移除监听

常用事件类型：
- 鼠标：click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）
- 键盘：keydown（按键按下）、keyup（按键松开）
- 表单：input（输入变化）、submit（表单提交）
- 窗口：load（页面加载完成）、resize（窗口大小变化）

七、节点关系与遍历

DOM树中节点（元素、文本、注释等）的关系操作：

parentNode：获取父节点
childNodes：获取所有子节点（包括文本、注释，返回NodeList）
children：获取所有子元素节点（只含元素，返回HTMLCollection）
firstChild / lastChild：第一个/最后一个子节点
previousSibling / nextSibling：前一个/后一个兄弟节点
previousElementSibling / nextElementSibling：前一个/后一个兄弟元素

示例：

const list = document.querySelector('ul');
console.log(list.children); // 所有li子元素
console.log(list.firstElementChild); // 第一个li
console.log(list.lastElementChild); // 最后一个li
const firstLi = list.firstElementChild;
console.log(firstLi.nextElementSibling); // 第二个li

总结

DOM API是前端交互的核心，常用操作可归纳为：

选择元素（querySelector系列最常用）
操作内容（textContent、innerHTML）
修改样式（style、classList）
调整结构（createElement、appendChild、remove）
处理事件（addEventListener）

实际开发中，结合这些API可以实现动态页面效果（如表单验证、列表增删、交互反馈等）。

到此这篇关于JS中DOM的API使用的文章就介绍到这了,更多相关js dom api使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！