如何替换HTML中指定元素的全部原有class类名？

问题根因 #

$(divId).find('#b1') 返回的是jQuery封装的实例对象，不是原生DOM节点，jQuery对象本身没有原生的className属性，直接赋值不会作用到实际DOM元素上。

正确实现方案 #

方案1：使用jQuery内置类操作方法（最推荐，不影响其他已存在的类） #

通过jQuery提供的removeClass、addClass方法完成类的替换：

$('#a1').find('#b1').removeClass('green').addClass('red');

如果需要直接覆盖元素的所有类属性，也可以使用attr方法直接设置class：

$('#a1').find('#b1').attr('class', 'red');

方案2：转成原生DOM节点后操作 #

如果要使用原生className属性，需要先取出jQuery对象中包裹的原生DOM元素：

var divId = document.getElementById('a1');
// 通过索引[0]获取匹配的第一个原生DOM元素
$(divId).find('#b1')[0].className = "red";

方案3：全原生JS实现，无需依赖jQuery #

// 直接选择目标元素修改类
document.getElementById('b1').className = 'red';

// 按层级查找的写法
// document.getElementById('a1').querySelector('#b1').className = 'red';

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