js对DOM 的操作

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';

如果要对一个元素应用许多样式更改，最好的做法是将样式应用到一个类并添加一个新类。 但是，在某些情况下，修改内联样式属性是必要的或更直接的。