2024年前端最新快速搞定前端JS面试 -- 第六章 JS-Web-API-DOM，2024年最新程序员面试题精选100题

// 获取页面中的元素
let element = document.getElementById('myElement'); // 通过ID
let elements = document.getElementsByClassName('myClass'); // 通过类名
let elementsByTag = document.getElementsByTagName('div'); // 通过标签名
 
// 创建新的元素
let newElement = document.createElement('div');
newElement.innerHTML = 'Hello, World!';
 
// 添加和移除元素
document.body.appendChild(newElement); // 添加到文档体
element.parentNode.removeChild(element); // 移除指定元素
 
// 添加和移除类
element.classList.add('myClass'); // 添加类
element.classList.remove('myClass'); // 移除类
 
// 设置和获取属性
element.setAttribute('name', 'value'); // 设置属性
let attributeValue = element.getAttribute('name'); // 获取属性
 
// 添加和移除事件监听器
element.addEventListener('click', function(event) {
  // 处理点击事件
});
element.removeEventListener('click', function(event) {
  // 处理点击事件
});
 
// 操作CSS
element.style.color = 'blue'; // 设置样式属性
let computedStyle = window.getComputedStyle(element); // 获取计算后的样式
 
// 操作节点关系
let parent = element.parentNode; // 获取父节点
let children = element.childNodes; // 获取子节点
let firstChild = element.firstChild; // 获取第一个子节点
let lastChild = element.lastChild; // 获取最后一个子节点
let nextSibling = element.nextSibling; // 获取下一个兄弟节点
let previousSibling = element.previousSibling; // 获取上一个兄弟节点

这段代码展示了如何使用JavaScript和DOM API进行基本的元素选择、创建、添加、移除、属性设置和获取、类的添加和移除、事件监听器的绑定和移除、样式的设置和获取，以及节点之间关系的操作。这些是前端开发中常见的Web API操作，对于前端面试来说是非常实用的知识点。