【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~

// 获取元素
var element = document.querySelector('.my-element'); // 获取第一个class为my-element的元素
var elements = document.querySelectorAll('div.my-class'); // 获取所有class为my-class的div元素
 
// 操作元素
element.textContent = 'Hello, World!'; // 设置元素的文本内容
element.style.color = 'blue'; // 设置元素的文本颜色为蓝色
 
// 添加和移除类
element.classList.add('new-class'); // 添加一个新的类
element.classList.remove('old-class'); // 移除一个已存在的类
 
// 添加和删除属性
element.setAttribute('data-role', 'page'); // 添加一个新的属性
element.removeAttribute('data-role'); // 移除一个已存在的属性
 
// 添加和移除元素/节点
var newNode = document.createElement('p');
newNode.textContent = 'This is a new paragraph.';
element.appendChild(newNode); // 添加一个新的子节点
element.removeChild(newNode); // 移除一个已存在的子节点

这段代码展示了如何使用querySelector和querySelectorAll获取元素，并对其进行文本内容设置、样式更改、类的添加和移除、属性的添加和移除，以及如何添加和移除节点。这些是在进行DOM操作时常用的基本操作。