どのように要素がjavascriptにある2番目のクラスのみを選択しますか？

Question

2つのクラスを持つ要素で2番目のクラスのみを選択する方法が必要なので、後で使用するためにURLを渡すことができます。私は両方のクラスを取得する関数を作成しましたが、私はclass2しか必要としません。彼らはファーストクラスをストライプし、2番目のクラスのみを残す方法です。あるいは、彼らは第二のクラスだけを選択する方法です。

バニラジャバスクリプトを使用してこの問題に関する質問は見つかりませんでした。

<div class="class1 class2></div> 
<script> 

function get2ndClass(element) { 

    var secondClass = element.class; 
    return secondClass; 

} 

Answer 1

使用は、最初にすべてのアレイに第2項目を返し、その後、少なくとも2つのクラスが存在するかどうかをチェックするclassList配列プロパティを使用し

console.log("class1 class2".split(" ").pop());

Answer 2

を分割します。

function get2ndClass(element) { 
    return (element && element.classList.length>1) ? element.classList[1] : null; 
} 

あなたがclassListをサポートしていない古いブラウザをサポートしている場合、あなたは追加の行が必要です：

function get2ndClass(element) { 
    var classList = (element) ? element.className.split(" ") : null; 
    return (classList && element.classList.length>1) ? element.classList[1] : null; 
} 

Answer 3

使用classList

function get2ndClass(element) { 
 
    return element.classList[1] || false; 
 
} 
 

 
var $div = document.querySelector('div') 
 
var secondClass = get2ndClass($div); 
 

 
console.log(secondClass);

<div class="firstClass secondClass"></div>

Answer 4

を

を使用できますはclassListサポートの必要は、ちょうどclass属性要素を分割しない要素

return element.classList.length > 1 ? element.classList[1] : ""; 

Answer 5

に割り当てられているクラスを取得します

function get2ndClass(elt) { 
 
    return elt.getAttribute('class').split(' ')[1] || null; 
 
} 
 
console.log(get2ndClass(document.getElementsByTagName('div')[0]))

<div class="class1 class2" >