查找以“lang”开头的类（不是节点）

Question

在下面的 HTML 示例中，我想获取code元素中使用的语言：<div id="editor"><pre><code class="language-js something"></code></pre></div>我可以使用以下代码获取班级列表：editor = document.getElementById('editor');let codeNode = editor.querySelector('code[class*="lang"]');console.log (codeNode.classList);但是，现在我被卡住了，我不知道如何上课？我期望一个包含“language-js”的字符串我不想使用 jQuery。

Answer 1

这classList是一个只读属性，它返回DOMTokenList元素的类属性的实时集合。然后可以使用它来操作类列表。但由于您只想获取此元素上的类名称，您可以简单地使用：

codeNode.classList.value

演示：

editor = document.getElementById('editor');

let codeNode = editor.querySelector('code[class*="lang"]');

let classes = codeNode ? codeNode.classList.value.split(/(\s+)/) : [];

console.log(classes.filter(c => c.startsWith("lang"))[0]);

<div id="editor"><pre><code class="language-js something"></code></pre></div>

Answer 2

如果我正确地完成了任务，那么您只有通过其 ID 找到的一个元素，对吧？然后你应该把所有的类（getAttribute（'class'））找到一个以'lang'开头的类。为此，我将使用如下代码：

document.getElementById('editor').getAttribute('class').split(' ').find(element => element.indexOf('lang')===0)

请注意，它将仅返回以“lang”开头的第一个类。如果您需要所有这些，请使用 reduce() 方法来构建一个新的类数组。