【前端基础篇】JavaScript之DOM介绍

在JavaScript中，可以使用DOM（Document Object Model）来访问和操作HTML文档的内容和结构。DOM是一种与平台和语言无关的接口，使用该接口可以动态地访问和操作HTML文档的内容。

以下是一些基本的DOM操作示例：

1. 获取元素：

// 通过ID获取元素
var element = document.getElementById('myElementId');
 
// 通过标签名获取元素列表
var elements = document.getElementsByTagName('div');
 
// 通过类名获取元素列表
var elements = document.getElementsByClassName('myClassName');
 
// 通过CSS选择器获取单个元素
var element = document.querySelector('.myClassName');
 
// 通过CSS选择器获取元素列表
var elements = document.querySelectorAll('div.myClassName');

2. 修改元素属性：

// 修改元素属性
element.setAttribute('name', 'newName');
 
// 获取元素属性
var name = element.getAttribute('name');
 
// 移除元素属性
element.removeAttribute('name');

3. 修改元素内容和样式：

// 修改元素内容
element.textContent = 'New content';
 
// 修改元素HTML内容
element.innerHTML = '<strong>New content</strong>';
 
// 修改元素样式
element.style.color = 'blue';
element.style.backgroundColor = 'yellow';

4. 添加和删除元素：

// 创建新元素
var newElement = document.createElement('div');
 
// 添加新元素到父元素
parentElement.appendChild(newElement);
 
// 在指定元素前插入新元素
parentElement.insertBefore(newElement, referenceElement);
 
// 删除元素
parentElement.removeChild(element);

5. 监听事件：

// 为元素添加事件监听器
element.addEventListener('click', function(event) {
    // 处理点击事件
    console.log('Element clicked!');
});

以上代码展示了如何使用JavaScript的DOM API进行基本的元素获取、属性修改、内容和样式更改以及元素的添加和删除操作。同时也展示了如何为元素添加事件监听器，以响应用户的交互。