如何使用纯JS通过document.querySelectorAll实现跨DOM节点内容替换

以下是纯JavaScript的实现方案，完全基于document.querySelectorAll实现需求，无需引入jQuery：

方式1：分别选择对应类名节点处理 #

逻辑直观可读性更高，适合大部分场景：

// 替换所有类名为name的节点内容
document.querySelectorAll('.name').forEach(dom => {
  dom.innerHTML = 'Dog';
});

// 替换所有类名为age的节点内容
document.querySelectorAll('.age').forEach(dom => {
  dom.innerHTML = '1990';
});

方式2：合并选择器单次遍历处理 #

可以减少DOM查询次数，性能更优：

document.querySelectorAll('.name, .age').forEach(dom => {
  dom.classList.contains('name') 
    ? dom.innerHTML = 'Dog' 
    : dom.innerHTML = '1990';
});

低版本兼容写法 #

NodeList.prototype.forEach在IE11及以上、所有现代浏览器都支持，如果需要兼容更早IE版本，可以将NodeList转为数组后遍历：

// 兼容低版本IE的name节点替换逻辑
var nameList = Array.prototype.slice.call(document.querySelectorAll('.name'));
for(var i = 0; i < nameList.length; i++) {
  nameList[i].innerHTML = 'Dog';
}
// age节点替换逻辑同理

内容的提问来源于stack exchange，提问作者CodeObserver