如何获取dom内class的值

获取DOM内Class的值

在Web开发中，HTML、CSS、JavaScript 组成了一个网页的三个基本组成部分。而其中，CSS 负责样式的呈现，JavaScript 则完成了很多页面的交互和动态效果。而针对这些动态效果，我们常常需要获取 DOM 中特定元素的 class 值。在本文中，我们将要介绍如何快速高效地获取 DOM 内 class 值。

1. 获取DOM元素

在获取 class 值之前，首先需要获取到需要操作的 DOM 元素。在获取 DOM 元素方面，我们可以使用 document.getElementById() 或 document.getElementsByClassName() 方法。具体使用方式如下:

// 通过 id 获取元素
let elementById = document.getElementById('myElement');
// 通过 class 获取元素（返回的是一个类数组对象）
let elementByClass = document.getElementsByClassName('myClass');

在获取完 DOM 元素之后，我们就可以开始获取其 class 值。

2. 获取DOM元素的className

在 JavaScript 中获取 DOM 元素的 class 值，我们通常使用 element.className 方法，该方法可以返回一个字符串，其中包含了元素的所有 class 名称。例如：

let myElement = document.getElementById('myElement');
let elementClassName = myElement.className;
console.log(elementClassName);

上述代码将会输出 myElement 元素中的所有 class 名称，实际中可能会有多个 class 名称。

3. 判断DOM元素是否存在某个class

在 JavaScript 中，我们还可以通过 element.classList.contains() 判断一个 DOM 元素是否包含某一特定的 class 名称。例如：

let myElement = document.getElementById('myElement');
if (myElement.classList.contains('myClass')) {
  console.log('该元素包含 myClass 类名');
} else {
  console.log('该元素不包含 myClass 类名');
}

上述代码中使用 classList.contains() 方法判断了 myElement 元素是否包含 myClass 类名。如果包含，就会输出 该元素包含 myClass 类名。反之，则会输出 该元素不包含 myClass 类名。

4. 获取DOM元素的所有class名称

在获取 DOM 元素的所有 class 名称方面，除了使用 element.className 方法外，我们还可以通过 element.classList 获取元素的所有 class 名称。例如：

let myElement = document.getElementById('myElement');
let classes = myElement.classList;
// 遍历所有 class 名称
for (let i = 0; i < classes.length; i++) {
  console.log(classes[i]);
}

上述代码中使用 classList 方法获取了 myElement 元素的所有 class 名称，然后对这些名称进行遍历，并输出到控制台中。

5. 获取DOM元素的某个class名称

除了遍历所有 class 名称之外，有时我们还需要获取某个 class 名称。在 JavaScript 中，我们可以使用 classList.item(index) 来获取某一特定的 class 名称。例如：

let myElement = document.getElementById('myElement');
let className = myElement.classList.item(0);
console.log(className);

上述代码中，我们使用了 classList.item(index) 方法获取了 myElement 元素的第一个 class 名称，并将其输出到控制台中。

6. 获取DOM元素的多个class名称

除了获取一个 class 名称之外，我们还可以获取多个 class 名称。在 JavaScript 中，我们可以使用 element.className.split(' ') 将所有的 class 名称转为数组，然后再利用数组的方法对数组进行操作。例如：

let myElement = document.getElementById('myElement');
let classNames = myElement.className.split(' ');
// 遍历所有 class 名称
for (let i = 0; i < classNames.length; i++) {
  console.log(classNames[i]);
}

上述代码中使用 className.split(' ') 方法获取了 myElement 元素的所有 class 名称，并将其转为了数组。然后对这些名称进行遍历，并输出到控制台中。

总结

本文主要介绍了如何获取 DOM 内 class 值。我们可以使用 document.getElementById() 或 document.getElementsByClassName() 方法来获取需要操作的 DOM 元素，然后使用 element.className 方法获取元素的所有 class 名称。此外，我们还可以通过 element.classList.contains() 方法判断一个 DOM 元素是否包含某一特定的 class 名称，或者使用 element.classList 获取元素的所有 class 名称，并对其进行遍历等操作。