js操作的DOM 可以分为三个类型
1.属性操作
2.css类
3.样式
首先列举一下js获取DOM的方法
访问单个元素的方法
document.querySelector()
document.getElementById()
访问所有元素的方法
document.querySelectorAll()
document.getElementsByClassName()
document.getElementsByTagName()
一.修改属性
属性是包含有关 HTML 元素的附加信息的值。 它们通常以 名称/值 对的形式出现，并且可能是必不可少的，具体取决于元素。
| 方法 | 描述 | 例子 |
|---|---|---|
| hasAttribute() | 返回 true 或 false 布尔值 | element.hasAttribute('href'); |
| getAttribute() | 返回指定属性的值或 null | element.getAttribute('href'); |
| setAttribute() | 添加或更新指定属性的值 | element.setAttribute('href', 'index.html'); |
| removeAttribute() | 从元素中移除一个属性 | element.removeAttribute('href'); |
二.修改css类
CSS 类用于将样式应用于多个元素，这与每个页面只能存在一次的 ID 不同。 在 JavaScript 中，我们有 className 和 classList 属性来处理类属性。
| 方法/属性 | 描述 | 例子 |
|---|---|---|
| className | 获取或设置类值 | element.className; |
| classList.add() | 添加一个或多个类值 | element.classList.add('active'); |
| classList.toggle() | 打开或关闭课程 | element.classList.toggle('active'); |
| classList.contains() | 检查类值是否存在 | element.classList.contains('active'); |
| classList.replace() | 用新的类值替换现有的类值 | element.classList.replace('old', 'new'); |
| classList.remove() | 删除类值 | element.classList.remove('active'); |
三.修改样式
编辑样式的一种方法是使用 setAttribute()。
// 选中元素
const div = document.querySelector('div');
// 设置样式
div.setAttribute('style', 'text-align: center');
但是，这将从元素中删除所有现有的内联样式。 由于这可能不是预期的效果，最好直接使用 style 属性
div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';
CSS 属性是用 kebab-case 编写的，它是用破折号分隔的小写单词。 需要注意的是，kebab-case CSS 属性不能用于 JavaScript 样式属性。 相反，它们将被替换为等效的驼峰式，即第一个单词是小写的，而所有后续单词都是大写的。 换句话说，我们将使用 textAlign 代替 text-align 作为 JavaScript 样式属性。
// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';
如果要对一个元素应用许多样式更改，最好的做法是将样式应用到一个类并添加一个新类。 但是，在某些情况下，修改内联样式属性是必要的或更直接的。
标签：style,DOM,样式,classList,js,操作,div,element,属性 From： https://www.cnblogs.com/imlaoxie/p/18669553