1. JavaScript操作元素属性
JavaScript给予我们许多操作元素属性的方法，这些方法允许我们动态修改HTML元素的属性值。HTML元素的属性值包括src、href、title、align、style等等。下面我们将结合实例详细介绍一下这些方法。
1.1 获取和设置元素属性
使用getAttribute()和setAttribute()方法可以获取和设置元素的属性值，其中getAttribute()方法可以得到指定属性的值，setAttribute()方法可以设置指定属性的值。
let a = document.getElementById('link');
let hrefValue = a.getAttribute('href');
console.log(hrefValue); //输出链接的地址
a.setAttribute('href', 'http://www.baidu.com');
上述例子中，我们使用getAttribute()方法获取了a元素的href属性值，并使用setAttribute()方法修改了a元素的href链接。
1.2 获取和设置元素的值
使用value属性可以获取和设置input元素的值，可以使用value属性改变<input>元素的内容。
let input = document.getElementsByTagName('input')[0];
let value = input.value;
console.log(value); //输出input元素的值
input.value = '新的值';
上述例子中，我们先获取第一个input元素的值，然后使用value属性修改了input元素的内容。
2. JavaScript操作元素样式
JavaScript允许我们动态修改HTML元素的样式，比如更改背景颜色、字体样式等等。下面我们将通过实例详细介绍一下这些方法。
2.1 获取和设置元素样式
可以使用style属性获取和设置元素的样式，其中style属性对象包含元素的所有内联样式属性，可以使用style属性对象给元素设置样式。
let p = document.getElementsByTagName('p')[0];
let fontColor = p.style.color;
console.log(fontColor); //输出p元素的字体颜色
p.style.color = 'blue';
上述例子中，我们使用style属性获取了p元素的color属性值，然后使用style属性设置了p元素的字体颜色。
2.2 动态添加和移除CSS类
可以通过JavaScript动态添加和移除HTML元素的CSS类，可以使用className属性添加和删除CSS类，也可以使用classList属性添加和删除CSS类（IE9及以下版本不支持）。
let div = document.getElementsByTagName('div')[0];
div.classList.add('red');
div.classList.remove('green');
上述例子中，我们使用classList属性为div元素添加了red类，同时删除了green类。
3. JavaScript操作元素类名
JavaScript允许我们动态修改HTML元素的类名，比如更改类名、添加和移除类名等等。下面我们将通过实例详细介绍一下这些方法。
3.1 使用className属性
可以使用className属性修改HTML元素的类名，可以给元素添加、删除和更改类名。
let span = document.getElementsByTagName('span')[0];
span.className = 'blue';
上述例子中，我们使用className属性为span元素更改了类名，将span元素的类名更改为blue。
3.2 使用classList属性
classList属性包含了在元素中添加、删除、替换和切换类名的方法。可以使用add()、remove()、toggle()和replace()方法来操作元素的类名。
let span = document.getElementsByTagName('span')[0];
span.classList.add('red');
span.classList.remove('blue');
上述例子中，我们使用classList属性为span元素添加了red类名，并删除了blue类名。
4. 小结
本文中，我们详细介绍了JavaScript如何操作元素属性、样式和类名。其中，操作元素属性主要使用getAttribute()和setAttribute()方法来获取和设置元素属性值，使用value属性来获取和设置元素的值。操作元素样式主要使用style属性来获取和设置元素的样式，使用className属性和classList属性来动态添加和移除HTML元素的CSS类。操作元素类名主要使用className属性和classList属性来修改元素的类名，其中classList属性包含了多个方法，通过这些方法可以方便地操作元素的类名。
熟练掌握这些操作方法可以让我们更好地操作HTML元素，实现更加丰富、灵活的交互效果。